如何使用ajax

1、ajax是什么

我理解的ajax就是一種異步請求數據的方式，他的基本職責就是發送數據和接收數據。ajax執行過程主要依賴瀏覽器提供的XMLHttpRequest對象，而這個對象具有使得瀏覽器可以發出HTTP請求與接收HTTP響應的功能，從而實現了在頁面不刷新的情況下和服務器進行數據交互。

2、原生js如何實現ajax請求

主要有以下五個步驟：（非常重要）
（1）創建XMLHttpRequest對象

var xhr = new XMLHttpRequest()

（2）初始化一個請求，xhr.open()可以接收5個參數，我們經常使用的是前三個

xhr.open('GET/POST','url',async)// true(異步),false(同步)

（3）發送該請求,可以獲取到數據

xhr.send()//當為post請求時，send（參數），get請求時，send(null)

（4）獲取數據，分為同步和異步

當同步獲取數據時

var data = xhr.responseText
console.log(data) 

缺點：如果網絡請求特別慢，頁面就卡住一直等待數據的請求，用戶就無法操作。所以我們只能用異步的方式（不推薦同步）。

當異步獲取數據時

//監聽數據，內部數據到了會觸發load
 xhr.addEventListener('load', function () {
    // 如果響應狀態是200到300以內，或者等於304
    // 200到300都是請求數據成功的
    // 304 重定向（緩存）
    if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
      //responseText：響應文本（內容）
     console.log(xhr.responseText)
    }else{
      console.log('出錯了')
    }
 }

因為代碼是從上往下執行的，數據請求的速度沒比不上代碼的執行速度，所以需要監聽數據的到來

換一種寫法就是：

var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://hello.php', true)
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4) {
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            //成功了
            console.log(xhr.responseText)
        } else {
            console.log('出錯了')
        }
    }
}
xhr.onerror = function(){
    console.log('服務器異常')
}
xhr.send()

3、在jquery中如何使用ajax

jquery中已經封裝好了一個ajax，直接使用即可。

$.ajax({
            url:"/user/login",//url地址
            dataType:"json",//返回的數據類型
            type:"post",//發起請求的方式,get/post
            data:{//此處為請求的參數
                'name':name,
                'password':password
            },
            success:function(data) {
            //請求成功時，執行
            console.log(data)//后端接口返回的參數
            },
            error:function(){
            //請求失敗時，執行
            }
        });