ajax常見(jiàn)錯(cuò)誤和使用總結(jié)

先給出標(biāo)準(zhǔn)的js時(shí)間ajax


    <script type="txt/javascript">
       
    //1、在IE中實(shí)例化Msxml2.XMLHTTP對(duì)象  Msxml2.XMLHTTP是IE瀏覽器的內(nèi)置對(duì)象,該對(duì)象具有異步提交數(shù)據(jù)和獲取結(jié)果的功能
     
    var  xmlHttp=false;
    function initAJAX()
    {
        if(window.XMLHttpRequset)
         {
             xmlHttp=new XMLHttpRequest();
         }
        else if(window.ActiveXObject)
       {
            try {
                xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
                }
            catch(e){
                  try{
                 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }
                catch(e)
                    {
                         window.alert("該瀏覽器不支持AJAX");
                    }
           }
       }
    }
    //2、指定異步提交的目標(biāo)和提交方式,調(diào)用xmlHttp的open方法true 表示異步請(qǐng)求
     xmlhttp.open("get","info.jsp","true");
    //3、指定當(dāng)xmlHttp狀態(tài)改變時(shí),需要進(jìn)行處理
     
     
    //xmlHttp的狀態(tài)不斷變化,其狀態(tài)保存在xmlHttp的readyState屬性中,用xmlHttp.readyState表示,常見(jiàn)readyState屬性如下
    //0:為初始化狀態(tài),對(duì)象以創(chuàng)建,尚未調(diào)用open()
    //1:已初始化狀態(tài),調(diào)用open()方法以后
    //2:發(fā)送數(shù)據(jù)狀態(tài),調(diào)用send()方法以后
    //3:數(shù)據(jù)傳送狀態(tài),已經(jīng)接受到部分?jǐn)?shù)據(jù),但接受尚未完成
    //4:完成狀態(tài),數(shù)據(jù)全部接受完成
    xmlHttp.onreadystatechange=function()
    {
       //處理代碼
       if(xmlHttp.readyState==4)
        {
             infoDiv.innerHTML=xmlHttp.responseText;
         }
    }
    //還可以infoDiv.innerText中,xmlHttp.responseText表示目標(biāo)文件得到的輸出的文本內(nèi)容,xmlHttp.responseXml表示提交目標(biāo)得到的xml格式的數(shù)據(jù),
     
     
    //或者xmlHtttp.onreadyStatechange=handle;
      function handle()
    {
       //處理代碼
    }
    
    //調(diào)用xmlHttp的send函數(shù) 如果請(qǐng)求方法是get的話,send可以沒(méi)有參數(shù),或者參數(shù)是null,如果請(qǐng)求方式的post,可以將需要傳送的內(nèi)容傳入send函數(shù)中以字符串的形式發(fā)出,及時(shí)是post
    //即使是post提交方式send函數(shù)還是可以將參數(shù)置空,可以將參數(shù)放在url后面進(jìn)行請(qǐng)求。
     xmlhttp.send();
    </script>


然后我們一般用jquery實(shí)現(xiàn)比較多點(diǎn),這樣避免了瀏覽器不兼容


      $.ajax({
                type: "POST",
                contentType: "application/json",
                url: "WS_Page.asmx/InitList",
                data: "{id:'" + $("#txtId").val() + "',url:'" + $("#txtUrl").val() + "',ip:'" + $("#txtIp").val() + "'}",
                datatype: 'json',
                cache: false,
                success: function(json) {
                
                    var objlist = eval(json.d);
                    $.each(objlist, function(n, obj) {
     
                        strhtml += "<tr >";
                        strhtml += "<td>";
                        strhtml += obj.id;
                        strhtml += "</td>";
                        strhtml += "<td>";
                        strhtml += obj.url;
                        strhtml += "</td";
                        strhtml += "<td>";
                        strhtml += obj.ip;
                        strhtml += "</td>";
                        strhtml += "<td>";
                        strhtml += obj.updatetime;
                        strhtml += "</td>";
                        strhtml += "<td>";
                        strhtml += "<input type='button' value='編輯'onclick='javascript:location.href=\"Manager.aspx?id=" + obj.id + "\"'/>  ";
                        strhtml += "<input type='button' value='刪除'onclick='deleteInfo(" + obj.id + ")'/>";
                        strhtml += "</td>";
                        strhtml += "</tr>";
                    })      
                    $("#liststr").append(strhtml);
     
                },
                error: function(err) {
                    alert(err.responseText);
                }
            });

當(dāng)然我們也可以用for循環(huán),但是這個(gè)時(shí)候的話

 success: function(json){for(var i=0;i<json.length;i++){json.name}}

這樣寫(xiě)是錯(cuò)的啊,切記,得不到數(shù)據(jù)的,忘記了寫(xiě)坐標(biāo),下面是對(duì)的。

 

 success: function(json){for(var i=0;i<json.length;i++){json[i].name}}

 

不知道大家看到過(guò)jquery API 沒(méi)有


$.ajax()


返回的是xmlRequest對(duì)象,已經(jīng)封裝好了,如我們想通過(guò)驗(yàn)證 return false 或者 return true 是得不到結(jié)果值的,這個(gè)原因我看了API才知道

 
比如:

     $.ajax({
                type: "POST",
                contentType: "application/json",
                url: "WS_Page.asmx/InitList",
                data: "{id:'" + $("#txtId").val() + "',url:'" + $("#txtUrl").val() + "',ip:'" + $("#txtIp").val() + "'}",
                datatype: 'json',
                cache: false,
                success: function(json) {
                     
                     return false;
     
                },
                error: function(err) {
                    alert(err.responseText);
                }
     });

這樣寫(xiě)就錯(cuò)了 因?yàn)椴粫?huì)返回?。妫幔欤螅濉】梢赃@么寫(xiě)



    var boo=true;
    $.ajax({
                type: "POST",
                contentType: "application/json",
                url: "WS_Page.asmx/InitList",
                data: "{id:'" + $("#txtId").val() + "',url:'" + $("#txtUrl").val() + "',ip:'" + $("#txtIp").val() + "'}",
                datatype: 'json',
                cache: false,
                success: function(json) {
                     
                     boo=false;
     
                },
                error: function(err) {
                    alert(err.responseText);
                }
     });


我們拿到boo的值就可以操作我們相關(guān)的函數(shù)了。

 

還有拼接字符串的時(shí)候

url:'" + $("#txtUrl").val() + "',ip:'" + $("#txtIp").val() + "'}",

 

一定要記得加單引號(hào),切記。





作者:chen.yu
深信服三年半工作經(jīng)驗(yàn),目前就職游戲廠商,希望能和大家交流和學(xué)習(xí),
微信公眾號(hào):編程入門(mén)到禿頭 或掃描下面二維碼
零基礎(chǔ)入門(mén)進(jìn)階人工智能(鏈接)