什么是Ajax?

ajax是一種技術(shù)方案，但并不是一種新技術(shù)。它依賴的是現(xiàn)有的CSS/HTML/Javascript，而其中最核心的依賴是瀏覽器提供的XMLHttpRequest對(duì)象，是這個(gè)對(duì)象使得瀏覽器可以發(fā)出HTTP請求與接收HTTP響應(yīng)。 實(shí)現(xiàn)在頁面不刷新的情況下和服務(wù)端進(jìn)行數(shù)據(jù)交互

如何實(shí)現(xiàn)Ajax?

• XMLHttpRequest對(duì)象
• fetch

XMLHttpRequest的用法、屬性

1.創(chuàng)建XHR對(duì)象

var xhr = new XMLHttpRequest();

2.xhr.open()

接受三個(gè)參數(shù)

• 1.要發(fā)送的請求的類型（"get"、"post"）,
• 2. 請求的URL
• 3. 是否異步發(fā)送請求的布爾值

3.xhr.send()

接受一個(gè)參數(shù)

• 1.請求主體發(fā)送的數(shù)據(jù)，不需要?jiǎng)t傳入(null)

4.xhr.responseText:作為響應(yīng)主體被返回的文本

5.xhr.responseXML:如果響應(yīng)的內(nèi)容類型是"text/html"或"application/xml",這個(gè)屬性中將保存包含著響應(yīng)數(shù)據(jù)的XML DOM文檔

6.xhr.status:響應(yīng)的HTTP狀態(tài)

7.xhr.statusText:HTTP狀態(tài)的說明

8.xhr.readyState:請求/響應(yīng)過程的當(dāng)前活動(dòng)階段

• 0：未初始化。尚未調(diào)用open()方法。
• 1：啟動(dòng)。已經(jīng)調(diào)用open()方法，但尚未調(diào)用send()方法。
• 2：發(fā)送。已經(jīng)調(diào)用send()方法，但尚未接收到響應(yīng)。
• 3：接收。已經(jīng)接收到部分響應(yīng)數(shù)據(jù)。
• 4：完成。已經(jīng)接收到全部數(shù)據(jù)，而且已經(jīng)可以在客戶端使用。
  說明:可以把xhr.readyState屬性和TCP/IP的三次握手類比一下，1,2表示第一次，3表示第二次，4表示第三次。只要readyState屬性變一次，就會(huì)觸發(fā)一次readyState事件。還要強(qiáng)調(diào)一點(diǎn)的是必須在調(diào)用open()之前指定onreadystatechage事件處理程序才能確保跨瀏覽器兼容性。

9.xhr.abort():取消異步請求，在接收響應(yīng)之前使用

10.xhr.setRequestHeader():設(shè)置自定義的請求頭部信息。

在調(diào)用open()方法之后，send()方法之前使用。

11.xhr.timeout:表示請求在等待響應(yīng)多少毫秒之后就終止。

12.xhr.overrideMimeType():用于重寫響應(yīng)的MIME類型。

比如服務(wù)器返回的MIME類型時(shí)text/plain，但數(shù)據(jù)實(shí)際包含的是XML,根據(jù)MIME類型，即使數(shù)據(jù)是XML，responseXML屬性仍然是null,通過調(diào)用該方法，可以保證把響應(yīng)當(dāng)作XML而非純文本使用。調(diào)用方法必須在send()之前使用

var xhr = new XMLHttpReququest()
xhr.open("get","text.php",true)
xhr.overrideMimeType("text/html")
xhr.send(null)

具體實(shí)現(xiàn)Ajax

1.同步實(shí)現(xiàn)Ajax

hello.html

    //同步執(zhí)行Ajax
    var xhr=new XMLHttpRequest();
    xhr.open('GET','/hello.json',false);
    xhr.send();
    var data=xhr.responseText;
    console.log(data);

hello.json

{
  "name":"Ajax"
}

首先我們打開命令行本地服務(wù)器，不然會(huì)報(bào)錯(cuò)。

報(bào)錯(cuò)

接下來執(zhí)行

大家可以看到紅色框的英文，大概意思就是主線程上的同步XMLHttpRequest由于對(duì)最終用戶體驗(yàn)的不利影響而被淘汰。如需更多幫助，請檢查。所以我們需要使用異步執(zhí)行Ajax

2. 請求方式為GET異步實(shí)現(xiàn)Ajax

hello.html

 //   異步執(zhí)行Ajax
    var xhr=new XMLHttpRequest();
    xhr.open('GET','/hello.json',true);
    xhr.send();
    xhr.addEventListener('load',function(){
    var data=xhr.responseText;
    console.log(data);
    });

hello.json

{
  "name":"Ajax"
}

image.png

大家注意一下，這里用Ajax向本地服務(wù)器請求的是/hello.json ,返回的數(shù)據(jù)類型是什么？是json對(duì)象還是什么？我們可以驗(yàn)證一下。在源代碼添加一句 typeof data

image.png

結(jié)果為string

假如我們在open()當(dāng)中輸入錯(cuò)誤的會(huì)發(fā)現(xiàn)什么狀況呢？

404 not found

   var xhr=new XMLHttpRequest();
    xhr.open('GET','/hello.json',true);
    xhr.send();
  
    xhr.addEventListener('load',function(){
      console.log(xhr.status);
      if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
      var data=xhr.responseText;
      console.log(data);
      }
      else{ 
        console.log('error');
      }
    });
    //當(dāng)網(wǎng)絡(luò)出現(xiàn)故障的時(shí)候
    xhr.error=function(){
      console.log("error");
    }

當(dāng)文件路徑?jīng)]有出錯(cuò)的時(shí)候

假如我們要監(jiān)聽當(dāng)前執(zhí)行的狀態(tài)，該怎么做？
hello.html

    //監(jiān)聽狀態(tài)
    var xhr=new XMLHttpRequest();

    console.log('readystatus:',xhr.readyState);
    //使用readystatechange事件監(jiān)聽狀態(tài)
    xhr.addEventListener('readystatechange',function(){
      console.log('readystatus:',xhr.readyState);
    })
    xhr.addEventListener('load',function(){
      console.log(xhr.status);
      if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
      var data=xhr.responseText;
      console.log(data);
      }
      else{ 
        console.log('error');
      }
    });
    xhr.open('GET','/hello.json',true);
    xhr.send();

如果路徑出錯(cuò)則是下圖這種狀況

image.png

由于是錯(cuò)誤的路徑，所以沒有readyState:3,因?yàn)?表示接受響應(yīng)數(shù)據(jù)，這步是不可能有的。

3.請求方式為POST異步實(shí)現(xiàn)Ajax

  var xhr = new XMLHttpRequest()
  xhr.timeout = 3000        //可選，設(shè)置xhr請求的超時(shí)時(shí)間
  xhr.open('POST', '/login', true)

  xhr.onload = function(e) { 
    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
      console.log(this.responseText)
    }
  }
    //可選
  xhr.ontimeout = function(e) { 
        console.log('請求超時(shí)')
  }

  //可選
  xhr.onerror = function(e) {
      console.log('連接失敗')
  }
  //可選
  xhr.upload.onprogress = function(e) {
      //如果是上傳文件，可以獲取上傳進(jìn)度
  }

  xhr.send('username=jirengu&password=123456')  

POST方式將數(shù)據(jù)放到send()中

4.封裝Ajax

  function ajax(opts){
    var url = opts.url
    var type = opts.type || 'GET'
    var dataType = opts.dataType || 'json'
    var onsuccess = opts.onsuccess || function(){}
    var onerror = opts.onerror || function(){}
    var data = opts.data || {}

    var dataStr = []
    for(var key in data){
        dataStr.push(key + '=' + data[key])
    }
    dataStr = dataStr.join('&')

    if(type === 'GET'){
        url += '?' + dataStr
    }

    var xhr = new XMLHttpRequest()
    xhr.open(type, url, true)
    xhr.onload = function(){
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            //成功了
            if(dataType === 'json'){
                onsuccess( JSON.parse(xhr.responseText))
            }else{
                onsuccess( xhr.responseText)
            }
        } else {
            onerror()
        }
    }
    xhr.onerror = onerror
    if(type === 'POST'){
        xhr.send(dataStr)
    }else{
        xhr.send()
    }
}

ajax({
    url: 'http://api.jirengu.com/weather.php',
    type:'POST',
    dataType:'TEXT',
    data: {
        city: '北京'
    },
    onsuccess: function(ret){
        console.log(ret)
        render(ret)  //瀏覽器渲染
    },
    onerror: function(){
        console.log('服務(wù)器異常')
        showError()   //錯(cuò)誤瀏覽器渲染
    }
})
function render(json){
    //拼裝成dom輸入頁面中
}
function showError(){
  //錯(cuò)誤提示
}

sever mock