Question

我正在创建基于Ajax的完全网站，所以所有动作都调用不同的JS函数，因此我在每个函数中使用这个Ajax代码，这使得我的函数成为一个很大的代码。

if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else {
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        var getData=xmlhttp.responseText;
        if(getData=="something") {
            /* 
            code goes here
            */
        }
        else {
            /* 
            code goes here
            */
        }
    }
}
xmlhttp.open("GET","mypage.php",true);
xmlhttp.send();

所以我想问一下，如果我使用一个只包含Ajax Code的不同函数，并在全局范围内声明我的变量getData，那么每当我需要它时我都应该调用它。

以下是我想要使用的方式

var getData=""; /*declaring var Globally (I read it like this dont know right)*/

function oneAjax(checkPage) {
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            getData=xmlhttp.responseText;
            /*now check further in the function which called it*/
        }
    }
    xmlhttp.open("GET",checkPage+".php",true);
    xmlhttp.send();
}

它是否会与其他正在运行的操作产生冲突？或者为我的问题提供任何正确的解决方案。

Answer 1

如果您不打算使用现成的库，则应将“回调”传递给oneAjax：

function oneAjax(checkPage, done, fail) {

     ...

     xmlhttp.onreadystatechange = function() {
         if (xmlhttp.readyState == 4) {
             if (xmlhttp.status == 200) {
                 done(xmlhttp.responseText, xmlhttp.status);
             } else {
                 fail(xmlhttp.status);
             }
          }
     };

 }

调整传递给回调的参数以满足您的要求。

使用：

oneAjax('mypage', function(text, status) {
    // success
    console.log(status);
}, function(status) {
    // failure
    console.log(status);
});

Answer 2

为什么不使用Jquery或类似的东西？这样的库将大大缩短你的陈述，这将更容易编写。

但是如果你想自己做，你应该阅读有关javascript的承诺。在msdn上有一个很好的教程如何解决你的问题：Asynchronous Programming in JavaScript with “Promises”

Answer 3

我认为使用jQuery库会更好并提供更好的低级抽象

<!-- add a protocol if on local ex: http: -->
<script src="//code.jquery.com/jquery-1.10.0.min.js"></script>
$.ajax({
  type: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
}).done(function( msg ) {
  alert( "Data Saved: " + msg );
});

它还提供JSONP等功能来解决跨域问题

缩短Ajax代码

3 个答案: