溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何用ajax來進(jìn)行交互

發(fā)布時間：2022-02-09 09:35:16 來源：億速云 閱讀：110 作者：iii 欄目：web開發(fā)

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

如何用ajax來進(jìn)行交互

同步和異步

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

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

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

如何用ajax來進(jìn)行交互

ajax的概念

什么是ajax

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

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

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

如何用ajax來進(jìn)行交互

如何用ajax來進(jìn)行交互

ajax出現(xiàn)的歷史

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

ajax的使用

XMLHttpRequest對象

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

ajax的運行

一定要打開phpsudy,js文件與php文件在同一主機下,才能請求成功.

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

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

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

手冊位置

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

GET的使用

例1:在頁面中添加一個按鈕,點擊一次向php后臺發(fā)送一個請求,php將一段文字寫入a.txt

<body>
    <input type="button" onclick="fn()" value="點擊發(fā)送ajax" />
    <script>
    function fn(){
            // 1 實例化對象
            let xhr = new XMLHttpRequest();
        // 2 設(shè)置請求的類型以及地址
        xhr.open('get','./02.php');
        // 3 發(fā)送請求,get請求則設(shè)置為空,post請求則設(shè)置參數(shù)
        xhr.send();
    }

    </script></body>

php代碼如下

<?php$str  = '越懶散,越懶!';$file = './a.txt';$f = fopen($file,'a');
  fwrite($f,$str);?>
ajax狀態(tài)

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

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

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

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

例:獲取ajax請求過程的四種狀態(tài)

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

如何用ajax來進(jìn)行交互

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

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

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

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

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

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

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

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

屬性描述
response獲得字符串形式的響應(yīng)數(shù)據(jù)。
responseXML獲得 XML 形式的響應(yīng)數(shù)據(jù)(知道)。

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

<!DOCTYPE html><html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <script type="text/javascript">
      function f1(){
        //創(chuàng)建ajax對象
        var xhr  = new XMLHttpRequest();
        //設(shè)置請求的地址
        xhr.open('get','./reponse.php');
        //發(fā)送請求,如果是get請求則參數(shù)設(shè)置為null
        xhr.send();
        //顯示ajax的狀態(tài)
        /*
        ajax的四中狀態(tài)
        0 對象已創(chuàng)建,請求連接未初始化(尚未調(diào)用open方法)
        1 請求連接已經(jīng)已經(jīng)建立沒有調(diào)用send方法
        2 請求連接已建立,調(diào)用send方法
        3 數(shù)據(jù)已經(jīng)開始傳輸?shù)形赐瓿?
        4 數(shù)據(jù)傳輸已經(jīng)完成,請求已經(jīng)完成
         */
           // onreadystatechange 當(dāng)請求的狀態(tài)發(fā)生改變時,就會觸發(fā)
        xhr.onreadystatechange=function(){
            //顯示五種狀態(tài)
            //console.log(xhr.readyState);
            //判斷當(dāng)?shù)恼埱鬆顟B(tài)等于4時,代表數(shù)據(jù)傳輸完成
             if(xhr.readyState==4 && xhr.status==200){
                //使用responseText接受服務(wù)器端傳遞的數(shù)據(jù)
                //alert(xhr.responseText);
                //追加顯示到頁面中
               document.body.innerHTML+=xhr.responseText;
             }
        }
        
        //alert(xhr.responseText);
      }
    </script>
    <body>
    <input type="button" name="" value="點我發(fā)送請求" onclick="f1();">
    </body></html>

服務(wù)器代碼

<?php$a = '1234';echo $a;?>

總結(jié):

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

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

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

xhr.onreadystatechange = funtion(){

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

get和post的區(qū)別

1 get是地址欄的方式訪問的,是可見的

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

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

常見post使用

表單中使用, ajax中使用

POST方式

請求步驟

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

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

  3. 設(shè)置請求

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

  5. 發(fā)送請求。

實現(xiàn)請求

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

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

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

<!DOCTYPE html><html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <script type="text/javascript">
     function f1(){
        //實例化ajax對象
        var xhr = new XMLHttpRequest();
        //設(shè)置請求的參數(shù),設(shè)置以post方式發(fā)送請求
        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ā)送請求
         xhr.send(data);

         //接受返回的信息
         xhr.onreadystatechange=function(){
            //驗證當(dāng)前的裝態(tài)接受返回的信息
            if(xhr.readyState==4){
                //接受服務(wù)器返回的信
                var info = xhr.responseText;
                alert(info);
            }
         }
     }
    </script>
    <body>
    <input type="button" name="" value="post請求" onclick="f1();">
    </body></html>

同步和異步請求

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

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

ajax的異步

異步示意圖

如何用ajax來進(jìn)行交互

ajax的同步

同步請求

如何用ajax來進(jìn)行交互

驗證同步與異步

js代碼

<body>
    <input type="button" onclick="fn()" value="點擊發(fā)送ajax" />
    <script>
    function fn(){
         // 1 實例化對象
         let xhr = new XMLHttpRequest();
         // 獲取ajax的四種狀態(tài)
         xhr.onreadystatechange = function(state){
             // console.log(xhr.readyState);
              //alert(xhr.responseText)
              if(xhr.readyState==4){
                  console.log(xhr.response)
              }
         }

        // 2 設(shè)置請求的類型以及地址,第三個參數(shù)設(shè)置為false,表示同步,設(shè)置為true表示異步(默認(rèn))
        xhr.open('get','http://localhost/demo.php',false);
        // 3 發(fā)送請求,get請求則設(shè)置為空,post請求則設(shè)置參數(shù)
        xhr.send();
        // 驗證同步必須寫的
        console.log(11111);
    }

 //   console.log(eval('{}'));
 //   console.log(eval('({})'));

    </script>

PHP代碼

<?php$str  = '越懶散,越懶!';$file = './a.txt';$f = fopen($file,'a');
  fwrite($f,$str);
  // 讓代碼沉睡十秒之后,再向下執(zhí)行
 sleep(10);
  echo '這是輸出的內(nèi)容';?>

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

服務(wù)返回數(shù)據(jù)格式處理

類型

Text（又稱HTML格式）

XML格式

JSON格式

Text類型處理

<script type="text/javascript">
      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);
    </script>[php代碼]echo '<h3>完了,就要完了!</h3>';

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

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

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

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

 <script type="text/javascript">
      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);</script>[PHP代碼]<?phpheader('content-type:text/xml;charset=utf-8');echo '<?xml version="1.0" encoding="utf-8" ?>
      <response>
      <status>1</status>
      <msg>返回的的消息</msg>
       </response>';

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

概念

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

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

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

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

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

promise使用

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

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

特點

Promise對象代表一個異步操作，有三種狀態(tài)：pending（進(jìn)行中）、fulfilled（已成功）和rejected（已失?。Ｖ挥挟惒讲僮鞯慕Y(jié)果，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無法改變這個狀態(tài).

語法:

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

使用

基本使用

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

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

.catch(callback的用法(失敗時調(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的第二個參數(shù)里面一樣。它將大于10的情況下的失敗回調(diào)的原因輸出

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

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

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

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

使用promise檢測ajax的請求狀態(tài)，利用promise的成功狀態(tài)函數(shù)，返回ajax請求到的數(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){
          
      });

擴展:

Promise.all()

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

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

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

Promise.race()

Promse.race就是賽跑的意思，意思就是說，Promise.race([p1, p2, p3])里面哪個結(jié)果獲得的快，就返回那個結(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)  // 打開的是 'failed'})

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手