js中的ajax

ajax：異步的JavaScript和XML，首先它是一門用于前后臺數(shù)據(jù)交互的技術，這里有兩個比較有趣的概念（同步與異步）說白了就是后臺傳回來的數(shù)據(jù)，同步的話，你必須刷新頁面才能更新數(shù)據(jù)，而異步更新的話，可以在不刷新頁面的情況下，實現(xiàn)頁面數(shù)據(jù)的更新

ajax的好處：舉個簡單的例子，表單驗證，在ajax技術出現(xiàn)之前，咱們都是把表單填寫完成，然后提交給后臺進行驗證，后臺如果發(fā)現(xiàn)有一個表單填寫的不符合規(guī)范，就會將數(shù)據(jù)返回給前臺，前臺刷新頁面重新填寫，所以的表單都得重新填寫，這樣就很氣知道嗎？很氣?。。?后來就有了ajax，你可以填完一個然后ajax就會跑到后臺去驗證，驗證完了，然后再跑回來告訴你，填寫的行不行，要求重新填寫，而且還不用刷新頁面，，哈哈，是不是很厲害呢

ajax說白了就是前臺和后臺之間數(shù)據(jù)傳遞的一門技術，再往白了說，就是跑腿的，假如前臺頁面需要一個數(shù)據(jù)了，好，ajax你去后臺跑一趟，把數(shù)據(jù)給我取回來，然后ajax就去了，后臺給了它一串數(shù)據(jù)，最后跑回來了，把數(shù)據(jù)給了我們前臺。這個過程其實特別簡單，ajax的一個關鍵就是，他取數(shù)據(jù)的這個過程，咱們前臺該干嘛還是干嘛，并不影響，也就是說相當于開辟了兩個空間，一個空間繼續(xù)做你該做的事，另一個空間去取數(shù)據(jù)，ajax去取數(shù)據(jù)，其他人毫不影響，而且取回來直接就可以用，不用刷新頁面，或者說的更準確一點，實現(xiàn)局部刷新

ajax具體實現(xiàn)方式

• 核心就是對象，首先創(chuàng)建一個XMLHttpRequest對象，然后連接后臺，發(fā)送請求，最后接受后臺返回來的數(shù)據(jù)即可

var xhr ;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();//現(xiàn)代瀏覽器實例化ajax對象方式
        }else{
            xhr = new ActiveXObject('Microsoft.XMLHTTP'); //IE瀏覽器實例化ajax對象方式

        }
//這里進行的是針對IE瀏覽器的兼容性處理,在IE中,我們的XMLHttpRequest對象就變成了ActiveXObject,而且里邊的參數(shù)是不能少的

• 上面提到了用ajax就簡單的幾步而已，
• 第一步實例化ajax對象，
• 第二步連接后臺，：怎么連接呢，ajax對象給我們提供了一個方法：open("指定提交的方式get或者post","后臺的url地址","是否使用異步，默認true使用異步")
• 第三步發(fā)送請求：send（發(fā)送的數(shù)據(jù)）有時候我們需要給后臺發(fā)送一些數(shù)據(jù)，比如你只想要第一條數(shù)據(jù)，這個時候你就send的時候告訴后臺我只要第一條，別的不要
• 第四步接受后臺給我們返回來的數(shù)據(jù)

get與 post的區(qū)別：都是給后臺提交數(shù)據(jù)的方式，區(qū)別就是get提交的時候把數(shù)據(jù)放到請求地址的后面，這樣就會很不安全，大家都可以看到、而post提交的數(shù)據(jù)會進行加密，所以比較安全，get傳遞的數(shù)據(jù)量比較少，post傳遞的數(shù)據(jù)量比較大

我們發(fā)送了ajax請求，但是我們并不知道是否發(fā)送成功了并且服務器是否處理了我們的請求，以及是否返回給我們前臺，這兒就需要用到一個東西，可以讓我們很好的檢測ajax請求的過程

• ajax對象身上有一個readystate屬性，表示ajax整個請求的狀態(tài)：
  • 0：請求并沒有發(fā)出（沒有建立與后臺的聯(lián)系，open之前）
  • 1 ：請求已經(jīng)建立還沒有發(fā)出
  • 2 ：請求已經(jīng)發(fā)送
  • 3 ：請求正在處理
  • 4 ：請求已經(jīng)被處理完畢
  • 每當readystate狀態(tài)改變的時候，就會調(diào)用onreadystatechange（）函數(shù)，所以我們可以在這個函數(shù)中做相應的判斷，當readystate為4時，表示請求成功的被后臺執(zhí)行、在這兒還要提一個屬性就是：status屬性，表示狀態(tài)碼，有很多很多，在這兒就說一個，200這個狀態(tài)碼就表示后臺成功返回了數(shù)據(jù)。

xhr.onreadystatechange = function(){
     if(xhr.readystate == 4){//請求已經(jīng)成功被處理
         if(xhr.status == 200){//成功的從服務器得到了響應
             //這里進行處理返回的數(shù)據(jù)
        }
    }
}

ajax在jQuery中的應用

$.ajax({
                    type:"post",  //請求方式
                    url:"a.php", //服務器的鏈接地址
                    dataType:"json", //傳送和接受數(shù)據(jù)的格式
                    data:{
                        username:"james",
                        password:"123456"
                    },
                    success:function(data){//接受數(shù)據(jù)成功時調(diào)用的函數(shù)
                       console.log(data);//data為服務器返回的數(shù)據(jù)
                    },
                    error:function(request){//請求數(shù)據(jù)失敗時調(diào)用的函數(shù)
                        alert("發(fā)生錯誤:"+request.status);
                    }
});

本文有不完善的地方，希望大家評論指正，本文首發(fā)于csdn博客喜歡的可以去點個贊，謝謝大家