Ajax

Ajax概念

ajax：async javascript and xml - 前端和后端的交互技術(shù)录别，是異步的js技術(shù)，作用是前端跟后端進(jìn)行傳遞數(shù)據(jù)

使用js的Ajax跟服務(wù)器接口進(jìn)行交互

步驟：

一、創(chuàng)建對(duì)象

var xhr = new XMLHttpRequest()

二柬焕、設(shè)置請(qǐng)求參數(shù)

xhr.open('get', 'http://localhost:8888/test/first', true)

參數(shù)一：請(qǐng)求的方式

參數(shù)二：請(qǐng)求的地址

參數(shù)三：是否異步執(zhí)行 - 為布爾值默認(rèn)為true表示異步執(zhí)行

三欠拾、監(jiān)聽(tīng)請(qǐng)求狀態(tài)

xhr.onreadystatechange = function() {
    if(xhr.readyState === 4) {
        if(xhr.status >= 200 && xhr.status < 300) {
            var res = xhr.responseText
            console.log(res);
        }
    }
}

1. 其中xhr.onreadystatechange是類(lèi)似綁定事件的語(yǔ)法，表示這個(gè)事件是當(dāng)ajax請(qǐng)求的狀態(tài)發(fā)生改變的時(shí)候觸發(fā)

   xhr.onreadystatechange = function() {}
   

2. xhr.readyState表示ajax的狀態(tài)治泥，總共有5種狀態(tài)對(duì)應(yīng)五種返回值

   0 -- 表示沒(méi)有初始化，說(shuō)明還沒(méi)有創(chuàng)建對(duì)象

   1 -- 表示已經(jīng)創(chuàng)建對(duì)象但是遮精，還沒(méi)有發(fā)送請(qǐng)求

   2 -- 表示已經(jīng)發(fā)送居夹，對(duì)方已經(jīng)收到消息了，但是還沒(méi)有徹底看懂我們什么意思本冲，還有很多事情需要準(zhǔn)備

   3 -- 服務(wù)器已經(jīng)在給我們響應(yīng)信息了准脂，但是信息不完整

   4 -- 數(shù)據(jù)已經(jīng)完整了 - 可以接收到完整的數(shù)據(jù)了

3. xhr.status判斷請(qǐng)求是否成功，成功的請(qǐng)求是以2開(kāi)頭的

           if(xhr.status >= 200 && xhr.status < 300) {
               var res = xhr.responseText
               console.log(res);
           }
            // 請(qǐng)求狀態(tài)-http狀態(tài)：
           /*
           1開(kāi)頭：正在進(jìn)行中
           2開(kāi)頭：各種成功
           3開(kāi)頭：重定向-緩存
           4開(kāi)頭：客戶端錯(cuò)誤
           5開(kāi)頭：服務(wù)器錯(cuò)誤
           */
   
   

4. 接收傳來(lái)的數(shù)據(jù)并處理

四檬洞、發(fā)送請(qǐng)求

xhr.send()來(lái)向服務(wù)器發(fā)送請(qǐng)求

Ajax的一些操作

1. xhr.responseText

   獲取從服務(wù)器端發(fā)送過(guò)來(lái)的數(shù)據(jù)

2. JSON.parse(json字符串)

   可以將Json字符串轉(zhuǎn)化成為數(shù)組

3. JSON.stringify(json對(duì)象)

   json對(duì)象轉(zhuǎn)成json字符串

get請(qǐng)求參數(shù)

get請(qǐng)求：

1. 直接在瀏覽器中輸入地址敲回車(chē)
2. 在頁(yè)面中點(diǎn)擊了a標(biāo)簽跳轉(zhuǎn)到另一個(gè)頁(yè)面狸膏，顯示另一個(gè)頁(yè)面中的內(nèi)容，顯示內(nèi)容也是要發(fā)送請(qǐng)求的 - get
3. 引入文件的請(qǐng)求也是get請(qǐng)求添怔，link引入css湾戳、script引入js、img引入圖片广料、iframe引入html頁(yè)面
4. form表單默認(rèn)能提交院塞，默認(rèn)提交方式也是get
5. 通過(guò)ajax發(fā)送get請(qǐng)求

var xhr = new XMLHttpRequest;
xhr.open('post','http://localhost:8888/test/third?username=zhangsan&age=18');
xhr.send()
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status>=200 && xhr.status<300){
            var res = xhr.responseText;
            // 將json字符串轉(zhuǎn)成json對(duì)象
            // res = JSON.parse(res)
            console.log(res);
        }
    }
}

POST請(qǐng)求參數(shù)

var xhr = new XMLHttpRequest;

xhr.open('post','http://localhost:8888/test/fourth');
// post請(qǐng)求的參數(shù)要放在send方法中作為參數(shù)的 - 必須的字符串
// post請(qǐng)求要帶參數(shù)必須在send之前設(shè)置 頭信息
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
// 數(shù)據(jù)在傳送之前需要進(jìn)行編碼
xhr.send('name=王五&age=666')
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status>=200 && xhr.status<300){
            var res = xhr.responseText;
            res = JSON.parse(res)
            console.log(res);
        }
    }
}

Json

Json文件只能有一個(gè)數(shù)組或者一個(gè)對(duì)象，對(duì)象中的鍵必須是雙引號(hào)性昭，如果值是字符串也必須是雙引號(hào)拦止，最后一項(xiàng)不能在最后加逗號(hào)。(Json中沒(méi)有注釋)

{
    "people": {
        "name": "張三",
        "age": 12,
        "children": []
    },
    "dog": "小狗"
}