本篇內(nèi)容介紹了“如何用ajax來(lái)進(jìn)行交互”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

10多年建站經(jīng)驗(yàn)， 成都網(wǎng)站建設(shè)、做網(wǎng)站客戶的見(jiàn)證與正確選擇。創(chuàng)新互聯(lián)公司提供完善的營(yíng)銷型網(wǎng)頁(yè)建站明細(xì)報(bào)價(jià)表。后期開(kāi)發(fā)更加便捷高效，我們致力于追求更美、更快、更規(guī)范。

同步和異步

同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任務(wù)

異步: 不受當(dāng)前任務(wù)的影響，兩件事情同時(shí)進(jìn)行，做一件事情時(shí)，不影響另一件事情的進(jìn)行。

編程中：異步程序代碼執(zhí)行時(shí)不會(huì)阻塞其它程序代碼執(zhí)行,從而提升整體執(zhí)行效率。

ajax的概念

什么是ajax

1 Ajax: asynchronous javascript and xml (異步j(luò)s和xml)

2 是可以與服務(wù)器進(jìn)行(異步/同步)交互的技術(shù)之一。

ajax的語(yǔ)言載體是javascript。 最大特點(diǎn)：頁(yè)面不刷新
ajax的一些常見(jiàn)應(yīng)用,使網(wǎng)頁(yè)無(wú)刷新向web服務(wù)器發(fā)送請(qǐng)求數(shù)據(jù).

ajax出現(xiàn)的歷史

1999年，微軟公司發(fā)布IE5瀏覽器的時(shí)候嵌入的一種技術(shù)。起初名字是XMLHttp
直到2005年，google公司發(fā)布了一個(gè)郵箱產(chǎn)品gmail，內(nèi)部有使用ajax技術(shù)，該事情引起人們對(duì)ajax的注意，也使得一蹶不振的javascript語(yǔ)言從此被人們重視起來(lái)

ajax的使用

XMLHttpRequest對(duì)象

瀏覽器內(nèi)建對(duì)象，用于與服務(wù)器通信(交換數(shù)據(jù)) ， 由此我們便可實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)的部分更新，而不是刷新整個(gè)頁(yè)面。這個(gè)請(qǐng)求是異步的，即在往服務(wù)器發(fā)送請(qǐng)求時(shí)，并不會(huì)阻礙程序的運(yùn)行，瀏覽器會(huì)繼續(xù)渲染后續(xù)的結(jié)構(gòu)。

ajax的運(yùn)行

一定要打開(kāi)phpsudy,js文件與php文件在同一主機(jī)下,才能請(qǐng)求成功.

GET請(qǐng)求的創(chuàng)建

請(qǐng)求的創(chuàng)建與發(fā)送

主流瀏覽器(火狐、google、蘋果safari、opera,包括IE8以上的版本)的創(chuàng)建方式,也是現(xiàn)在主要使用的.

//1. 創(chuàng)建一個(gè)XMLHttpRequest對(duì)象var xhr = new XMLHttpRequest();
//2. 設(shè)置請(qǐng)求的類型,以及地址
// 第一個(gè)參數(shù):請(qǐng)求方式  get/post
// 第二個(gè)參數(shù):請(qǐng)求的地址 需要在url后面拼上參數(shù)列表
// 第三個(gè)參數(shù)：默認(rèn)是異步xhr.open("get", "01.php?name=Jepson"，異步/同步);
//3.發(fā)送請(qǐng)求到服務(wù)器xhr.send(null);

手冊(cè)位置

http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp

GET的使用

例1:在頁(yè)面中添加一個(gè)按鈕,點(diǎn)擊一次向php后臺(tái)發(fā)送一個(gè)請(qǐng)求,php將一段文字寫入a.txt

php代碼如下

ajax狀態(tài)

通過(guò)監(jiān)控請(qǐng)求狀態(tài)，當(dāng)狀態(tài)等于4的時(shí)候才能接受數(shù)據(jù)

xhrObj.onreadystatechange - 監(jiān)聽(tīng)readyState狀態(tài)，當(dāng)狀態(tài)發(fā)生改變可調(diào)用對(duì)應(yīng)函數(shù)處理

ajax五種狀態(tài)的作用

/*xhrObj.readyState - 返回當(dāng)前請(qǐng)求的狀態(tài)
xhr.readyState = 0時(shí)-未初始化,對(duì)象已建立,尚未調(diào)用open()
xhr.readyState = 1時(shí)-初始化,對(duì)象建立未調(diào)用send()
xhr.readyState = 2時(shí)-發(fā)送數(shù)據(jù),send()方法調(diào)用,但是當(dāng)前的狀態(tài)及http頭未知,請(qǐng)求未完成
xhr.readyState = 3時(shí)-數(shù)據(jù)傳輸中,接受部分?jǐn)?shù)據(jù)
xhr.readyState = 4時(shí)-響應(yīng)內(nèi)容解析完成
*/

例:獲取ajax請(qǐng)求過(guò)程的四種狀態(tài)

    // 1 實(shí)例化對(duì)象
  let xhr = new XMLHttpRequest(); 
     xhr.onreadystatechange = function(){
          // 4 使用回調(diào)函數(shù)檢測(cè)當(dāng)前的狀態(tài)
                console.log(xhr.readyState);
                // 獲取服務(wù)器狀態(tài)碼
                console.log(xhr.status)
                // 接受服務(wù)器返回?cái)?shù)據(jù)
               console.log(xhr.responseText);  
     }
    //  2 創(chuàng)建請(qǐng)求
     xhr.open('get','http://localhost/web/index.php');
     // 3 發(fā)送請(qǐng)求
     xhr.send();

返回服務(wù)器狀態(tài)碼 xhr.status

1**：請(qǐng)求收到，繼續(xù)處理
2**：操作成功收到，分析、接受
3**：完成此請(qǐng)求必須進(jìn)一步處理
4**：請(qǐng)求包含一個(gè)錯(cuò)誤語(yǔ)法或不能完成
5**：服務(wù)器執(zhí)行一個(gè)完全有效請(qǐng)求失敗

100——客戶必須繼續(xù)發(fā)出請(qǐng)求
101——客戶要求服務(wù)器根據(jù)請(qǐng)求轉(zhuǎn)換HTTP協(xié)議版本

200——客戶端請(qǐng)求成功
201——提示知道新文件的URL     
202——接受和處理、但處理未完成
203——返回信息不確定或不完整
204——請(qǐng)求收到，但返回信息為空
205——服務(wù)器完成了請(qǐng)求，用戶代理必須復(fù)位當(dāng)前已經(jīng)瀏覽過(guò)的文件
206——服務(wù)器已經(jīng)完成了部分用戶的GET請(qǐng)求

300——請(qǐng)求的資源可在多處得到
301——?jiǎng)h除請(qǐng)求數(shù)據(jù)
302——在其他地址發(fā)現(xiàn)了請(qǐng)求數(shù)據(jù)
303——建議客戶訪問(wèn)其他URL或訪問(wèn)方式
304——客戶端已經(jīng)執(zhí)行了GET，但文件未變化
305——請(qǐng)求的資源必須從服務(wù)器指定的地址得到
306——前一版本HTTP中使用的代碼，現(xiàn)行版本中不再使用
307——申明請(qǐng)求的資源臨時(shí)性刪除

400——錯(cuò)誤請(qǐng)求，如語(yǔ)法錯(cuò)誤
401——請(qǐng)求授權(quán)失敗
402——保留有效ChargeTo頭響應(yīng)
403——請(qǐng)求不允許
404——沒(méi)有發(fā)現(xiàn)文件、查詢或URl
405——用戶在Request-Line字段定義的方法不允許
406——根據(jù)用戶發(fā)送的Accept拖，請(qǐng)求資源不可訪問(wèn)
407——類似401，用戶必須首先在代理服務(wù)器上得到授權(quán)
408——客戶端沒(méi)有在用戶指定的餓時(shí)間內(nèi)完成請(qǐng)求
409——對(duì)當(dāng)前資源狀態(tài)，請(qǐng)求不能完成
410——服務(wù)器上不再有此資源且無(wú)進(jìn)一步的參考地址
411——服務(wù)器拒絕用戶定義的Content-Length屬性請(qǐng)求
412——一個(gè)或多個(gè)請(qǐng)求頭字段在當(dāng)前請(qǐng)求中錯(cuò)誤
413——請(qǐng)求的資源大于服務(wù)器允許的大小
414——請(qǐng)求的資源URL長(zhǎng)于服務(wù)器允許的長(zhǎng)度
415——請(qǐng)求資源不支持請(qǐng)求項(xiàng)目格式
416——請(qǐng)求中包含Range請(qǐng)求頭字段，在當(dāng)前請(qǐng)求資源范圍內(nèi)沒(méi)有range指示值，請(qǐng)求也不包含If-Range請(qǐng)求頭字段
417——服務(wù)器不滿足請(qǐng)求Expect頭字段指定的期望值，如果是代理服務(wù)器，可能是下一級(jí)服務(wù)器不能滿足請(qǐng)求

500——服務(wù)器產(chǎn)生內(nèi)部錯(cuò)誤
501——服務(wù)器不支持請(qǐng)求的函數(shù)
502——服務(wù)器暫時(shí)不可用，有時(shí)是為了防止發(fā)生系統(tǒng)過(guò)載
503——服務(wù)器過(guò)載或暫停維修
504——關(guān)口過(guò)載，服務(wù)器使用另一個(gè)關(guān)口或服務(wù)來(lái)響應(yīng)用戶，等待時(shí)間設(shè)定值較長(zhǎng)
505——服務(wù)器不支持或拒絕支請(qǐng)求頭中指定的HTTP版本

服務(wù)器響應(yīng)值接收

如需獲得來(lái)自服務(wù)器的響應(yīng)，請(qǐng)使用 XMLHttpRequest 對(duì)象的 responseText 或 responseXML 屬性。

接受服務(wù)器返回值

    
        
    
    
      function f1(){
        //創(chuàng)建ajax對(duì)象
        var xhr  = new XMLHttpRequest();
        //設(shè)置請(qǐng)求的地址
        xhr.open('get','./reponse.php');
        //發(fā)送請(qǐng)求,如果是get請(qǐng)求則參數(shù)設(shè)置為null
        xhr.send();
        //顯示ajax的狀態(tài)
        /*
        ajax的四中狀態(tài)
        0 對(duì)象已創(chuàng)建,請(qǐng)求連接未初始化(尚未調(diào)用open方法)
        1 請(qǐng)求連接已經(jīng)已經(jīng)建立沒(méi)有調(diào)用send方法
        2 請(qǐng)求連接已建立,調(diào)用send方法
        3 數(shù)據(jù)已經(jīng)開(kāi)始傳輸?shù)形赐瓿?
        4 數(shù)據(jù)傳輸已經(jīng)完成,請(qǐng)求已經(jīng)完成
         */
           // onreadystatechange 當(dāng)請(qǐng)求的狀態(tài)發(fā)生改變時(shí),就會(huì)觸發(fā)
        xhr.onreadystatechange=function(){
            //顯示五種狀態(tài)
            //console.log(xhr.readyState);
            //判斷當(dāng)?shù)恼?qǐng)求狀態(tài)等于4時(shí),代表數(shù)據(jù)傳輸完成
             if(xhr.readyState==4 && xhr.status==200){
                //使用responseText接受服務(wù)器端傳遞的數(shù)據(jù)
                //alert(xhr.responseText);
                //追加顯示到頁(yè)面中
               document.body.innerHTML+=xhr.responseText;
             }
        }
        
        //alert(xhr.responseText);
      }
    
    
    
    

服務(wù)器代碼

總結(jié):

1 創(chuàng)建對(duì)象let xhr = new XMLHttpRequest();2 設(shè)置請(qǐng)求

xhr.open(get,請(qǐng)求地址)3 發(fā)送請(qǐng)求

xhr.send()4 判斷狀態(tài)接收返回值

xhr.onreadystatechange = funtion(){

   if(xhr.readyState==4 && xhr.status==200){// 接受返回值let str = xhr.response  }}

get和post的區(qū)別

1 get是地址欄的方式訪問(wèn)的,是可見(jiàn)的

2 get方式傳遞數(shù)據(jù)量比較小.安全性低.

3 post以非地址欄的形式訪問(wèn),能夠安全且大量的穿遞數(shù)據(jù)

常見(jiàn)post使用

表單中使用, ajax中使用

POST方式

請(qǐng)求步驟

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

2. 設(shè)置回調(diào)函數(shù)。接收后臺(tái)返回的結(jié)果

3. 設(shè)置請(qǐng)求

4. 設(shè)置請(qǐng)求頭信息“Content-type,application/x-www-form-urlencoded”

5. 發(fā)送請(qǐng)求。

實(shí)現(xiàn)請(qǐng)求

setRequestHeader() 設(shè)置請(qǐng)求頭信息

application/x-www-form-urlencoded 設(shè)置傳遞參數(shù)時(shí),使用的編碼格式(默認(rèn))

例:以post的方式傳遞數(shù)據(jù)

    
        
    
    
     function f1(){
        //實(shí)例化ajax對(duì)象
        var xhr = new XMLHttpRequest();
        //設(shè)置請(qǐng)求的參數(shù),設(shè)置以post方式發(fā)送請(qǐng)求
        xhr.open('post','./post.php');
         //如果需要像 HTML 表單那樣 POST 數(shù)據(jù),以&形式傳輸數(shù)據(jù)
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        //構(gòu)造傳遞的參數(shù),形式與get傳參的方式一致
        var data = 'name=張三&age=19';
         //發(fā)送請(qǐng)求
         xhr.send(data);

         //接受返回的信息
         xhr.onreadystatechange=function(){
            //驗(yàn)證當(dāng)前的裝態(tài)接受返回的信息
            if(xhr.readyState==4){
                //接受服務(wù)器返回的信
                var info = xhr.responseText;
                alert(info);
            }
         }
     }
    
    
    
    

同步和異步請(qǐng)求

異步：不等待ajax請(qǐng)求響應(yīng)完畢，直接執(zhí)行下面的代碼

同步：等待ajax請(qǐng)求響應(yīng)完畢后，再執(zhí)行下面的代碼

ajax的異步

異步示意圖

ajax的同步

同步請(qǐng)求

驗(yàn)證同步與異步

js代碼

PHP代碼

測(cè)試同步請(qǐng)求時(shí),獲取返回結(jié)果的responseText一定要放在send()之前

服務(wù)返回?cái)?shù)據(jù)格式處理

類型

Text（又稱HTML格式）

XML格式

JSON格式

Text類型處理

      var xhr = new XMLHttpRequest();
           xhr.onreadystatechange = function(){
            if(xhr.readyState==4){
                //接受返回的消息
                var info =xhr.responseText; 
               alert(info);
            }
           }
      xhr.open('get','./geshi.php');
      xhr.send(null);
    [php代碼]echo '
完了,就要完了!
';

json數(shù)據(jù)的處理

使用JOSN.parse()將PHP輸出的json字符串轉(zhuǎn)化為對(duì)象

      var xhr = new XMLHttpRequest();
           xhr.onreadystatechange = function(){
            if(xhr.readyState==4){
                //接受返回的消息,
                var info =xhr.responseText; 
                //將json數(shù)組轉(zhuǎn)化為js對(duì)象
                 var str = JSON.parse(info);
                 console.log(str);
            }
           }
      xhr.open('get','./geshi.php');
      xhr.send(null);[PHP代碼]echo json_encode(array("name"=>'張三',"age"=>'12'));

xml數(shù)據(jù)的處理

 
      var xhr = new XMLHttpRequest();
           xhr.onreadystatechange = function(){
            if(xhr.readyState==4){
                //接受返回的消息,使用responseXML接受
                var info =xhr.responseXML; 
                 var msg=info.getElementsByTagName('msg')[0].innerHTML;
                 console.log(msg);
            }
           }
      xhr.open('get','./geshi.php');
      xhr.send(null);[PHP代碼]
      
      1
      返回的的消息
       ';

回調(diào)函數(shù)的嵌套

概念

回調(diào)函數(shù)是一個(gè)作為變量傳遞給另外一個(gè)函數(shù)的函數(shù)，它在主體函數(shù)執(zhí)行完之后執(zhí)行。

正常的代碼都是鏈?zhǔn)讲僮?某一步執(zhí)行出問(wèn)題,則向下停止,而回調(diào)則不然.

常見(jiàn)的典型異步回調(diào)

    setTimeout(function(){
        console.log('1s之后做的事情');
        setTimeout(function(){
            console.log('2s之后做的事情');
            setTimeout(function(){
               console.log('3s之后做的事情');
            },1000);
        },1000);
    },1000);

在回調(diào)函數(shù)中嵌套,就是上一個(gè)函數(shù)執(zhí)行完成,再執(zhí)行下一個(gè)

promise使用

在JavaScript的世界中，所有代碼都是單線程執(zhí)行的。由于這個(gè)“缺陷”，導(dǎo)致JavaScript的所有網(wǎng)絡(luò)操作，瀏覽器事件，都必須是異步執(zhí)行。異步執(zhí)行可以用回調(diào)函數(shù)實(shí)現(xiàn).

Promise使ES6中引入的一個(gè)異步編程解決方案，與傳統(tǒng)的ES5方法相比它的結(jié)構(gòu)更合理，功能更強(qiáng)大.

特點(diǎn)

Promise對(duì)象代表一個(gè)異步操作，有三種狀態(tài)：pending（進(jìn)行中）、fulfilled（已成功）和rejected（已失?。?。只有異步操作的結(jié)果，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無(wú)法改變這個(gè)狀態(tài).

語(yǔ)法:

  var p = new Promise(function(resolve,reject){})
 resolve 代表 決定(成功); reject 代表 失敗

使用

基本使用

const p  = new Promise(function(resolve,reject){
    setTimeout(function(){
       // resolve('我是成功的')
       reject('這是失敗的');
    },2000)
});

.then(callback)的使用(成功時(shí)調(diào)用)

.catch(callback的用法(失敗時(shí)調(diào)用)

  p.then(function(data){
			console.log('resolved成功回調(diào)');
			console.log('成功回調(diào)接受的值：',data);
		}).catch(function(reason, data){
		    console.log('catch到rejected失敗回調(diào)');
		     console.log('catch失敗執(zhí)行回調(diào)拋出失敗原因：',reason);
	});	效果和寫在then的第二個(gè)參數(shù)里面一樣。它將大于10的情況下的失敗回調(diào)的原因輸出

注意:resolve和reject的兩種狀態(tài)

resolve作用是，將Promise對(duì)象的狀態(tài)從“未完成”變?yōu)椤俺晒Α保磸?pending 變?yōu)?resolved），在異步操作成功時(shí)調(diào)用，并將異步操作的結(jié)果，作為參數(shù)傳遞出去；

reject作用是，將Promise對(duì)象的狀態(tài)從“未完成”變?yōu)椤笆　保磸?pending 變?yōu)?rejected），在異步操作失敗時(shí)調(diào)用，并將異步操作報(bào)出的錯(cuò)誤，作為參數(shù)傳遞出去。

promise改造ajax依賴調(diào)用

使用promise檢測(cè)ajax的請(qǐng)求狀態(tài)，利用promise的成功狀態(tài)函數(shù)，返回ajax請(qǐng)求到的數(shù)據(jù)

第一步,將ajax進(jìn)行封裝

    const ajaxParam=param=>{
        return new Promise(function(resolve,reject){
            let xhr = new XMLHttpRequest();
        
              xhr.open('get',param.url); // 默認(rèn)是true,表示異步
      
              xhr.send();
              xhr.onreadystatechange = function(){
                  if(xhr.readyState==4 ){
                      if(xhr.status==200){
                          resolve(xhr.responseText)
                      }else{
                          reject(xhr.responseText)
                      }

                  }
              }
        });

    }

第二步:使用then和catch獲取結(jié)果,

      ajaxPromise({type:'get',url:'http//:www.baidu.com',data:null}).then(function(data){
          
      }).catch(function(data){
          
      });

擴(kuò)展:

Promise.all()

所有的異步請(qǐng)求完成才執(zhí)行的方法.

Promse.all在處理多個(gè)異步處理時(shí)非常有用，比如說(shuō)一個(gè)頁(yè)面上需要等兩個(gè)或多個(gè)ajax的數(shù)據(jù)回來(lái)以后才正常顯示，在此之前只顯示loading圖標(biāo)。

let wake = (time) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time / 1000}秒后醒來(lái)`)
    }, time)
  })}let p1 = wake(3000);let p2 = wake(2000);Promise.all([p1, p2]).then((result) => {
  console.log(result)       // [ '3秒后醒來(lái)', '2秒后醒來(lái)' ]}).catch((error) => {
  console.log(error)})只有兩次調(diào)用promise都執(zhí)行完畢,才會(huì)執(zhí)行all

Promise.race()

Promse.race就是賽跑的意思，意思就是說(shuō)，Promise.race([p1, p2, p3])里面哪個(gè)結(jié)果獲得的快，就返回那個(gè)結(jié)果，不管結(jié)果本身是成功狀態(tài)還是失敗狀態(tài)。

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  },1000)})let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('failed')
  }, 500)})Promise.race([p1, p2]).then((result) => {
  console.log(result)}).catch((error) => {
  console.log(error)  // 打開(kāi)的是 'failed'})

“如何用ajax來(lái)進(jìn)行交互”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！