封裝一個本身的通用Ajax

時間 2021-03-16

標籤 php html ajax json 跨域服務器 app 函數 post url 欄目軟件設計简体版

原文原文鏈接

一個簡單的Ajax請求

首先在封裝一個本身的ajax函數以前，咱們須要先知道怎麼實現一個簡單的ajax請求。php

這裏我建了兩個文件，ajax01.html和ajax01.phphtml

ajax01.html代碼：ajax

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Ajax</title>
</head>
<body>
   <input type="button" id="getContent" value="點我獲取內容" />
   <div id="container">點擊上面的按鈕，我會變哦</div>
</body>

<script>
/*********************************ajax**********************************/
    //獲取元素
   var getContent = document.getElementById("getContent");
   var container = document.getElementById("container");
   var user_info = document.getElementById("user_info");
   

   //給元素添加單擊事件處理函數
   getContent.onclick = function (){
       //1.建立XHR對象
       var xhr = new XMLHttpRequest();
       
       //4.給請求添加狀態變化事件處理函數
       xhr.onreadystatechange = function (){
           //判斷狀態碼
           if(xhr.status==200 && xhr.readyState==4){
               //將返回的json數據解析後保存在變量res中
               var res = JSON.parse(xhr.responseText);
               container.innerHTML = res.name;
           }
       };

       //2.初始化請求
       xhr.open('get','ajax01.php?name=張三&age=16',true);
       //若是是post請求，須要設置這個請求頭
       //xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
       

       //3.發送請求
       xhr.send(null);
   
   };
</script>
</html>

能夠看到使用ajax發請求並獲取響應數據只須要簡單的4步json

參數說明：跨域

xhr.status------------------------status ：響應的 HTTP 狀態，200表示響應成功服務器

xhr.readyState-----------------readyState該屬性表示請求/響應過程的當前活動階段，這個屬性可取的值以下：app

0 ：未初始化。還沒有調用 open() 方法。
1 ：啓動。已經調用 open() 方法，但還沒有調用 send() 方法。
2 ：發送。已經調用 send() 方法，但還沒有接收到響應。
3 ：接收。已經接收到部分響應數據。
4 ：完成。已經接收到所有響應數據，並且已經能夠在客戶端使用了。函數

xhr.onreadystatechange----------------------readyState屬性狀態變化事件，只要 readyState 屬性的值由一個值變成另外一個值，都會觸發一次 readystatechange 事件。能夠利用這個事件來檢測每次狀態變化後 readyState 的值。post

xhr.responseText---------------------------------responseText ：做爲響應主體被返回的文本。url

xhr.responseXML -------------------------------responseXML ：若是響應的內容類型是 "text/xml" 或 "application/xml" ，這個屬性中將保存包含着響應數據的 XML DOM 文檔

這裏須要注意的是，使用ajax發送post請求時要先將 Content-Type 頭部信息設置爲 application/x-www-form-urlencoded以下：

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

頭部信息設置的設置必定要在open()方法以後，send方法以前，代碼以下：

//初始化請求
xhr.open('post','ajax01.php',true);

//若是是post請求，須要設置這個請求頭
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
       
//發送請求,若是還要發送數據,將數據傳入send方法中
xhr.send('name=張三&age=16');

若是還要發送數據，把數據傳入send()中

ajax01.php中的代碼以下：

<?php

if(empty($_POST)){
   //接收get請求參數，並將數據格式化爲json字符串返回給ajax
   echo json_encode($_GET);
}else{
   //接收post請求參數，並將數據格式化爲json字符串返回給ajax
   echo json_encode($_POST);
}


?>

好了，在知道了如何使用ajax發起一個簡單的請求後，咱們如今能夠來動手封裝一個本身的通用ajax函數了

封裝本身的通用Ajax函數
閒話少說，咱們直接上代碼吧

/*
*封裝一個本身的ajax函數
*有5個參數，最後一個參數可選
*
* @param method(必選)    請求類型  get 和 post
* @param url(必選)       請求的url地址   相同域名下的頁面（此函數不支持跨域請求）
* @param data(必選)      請求協帶的數據  以js對象的形式定義，如：{name:'張三'}
* @param callback(必選)  回調函數,可接收一個參數，這個參數就是服務器響應的數據
* @param type(可選)      指定服務器響應的數據類型（可選值：json,xml,text），若是是json模式，則使用json解析數據，默認爲text普通字符串
*/
function myAjax(method,url,data,callback,type){
   //建立兼容 XMLHttpRequest 對象
   var xhr;
   if (window.XMLHttpRequest){//IE7+, Firefox, Chrome, Opera, Safari
     xhr=new XMLHttpRequest();
   }else{// code for IE6, IE5
     xhr=new ActiveXObject("Microsoft.XMLHTTP");
   }

   //給請求添加狀態變化事件處理函數
   xhr.onreadystatechange = function (){
       //判斷狀態碼
       if(xhr.status==200 && xhr.readyState==4){
           //根據type參數，判斷返回的內容須要進行怎樣的處理
           if(type=='json'){
               //得到 json 形式的響應數據，並使用parse方法解析
               var res = JSON.parse(xhr.responseText);
           }else if(type=='xml'){
               //得到 XML 形式的響應數據
               var res = responseXML;
           }else{
               //得到字符串形式的響應數據
               var res = xhr.responseText;
           }
           //調用回調函數,並將響應數據傳入回調函數
           callback(res);
       }
   };
   
   //判斷data是否有數據
   var param = '';
   //這裏使用stringify方法將js對象格式化爲json字符串
   if(JSON.stringify(data) != '{}'){
       url += '?';
       for(var i in data){
           param += i+'='+data[i]+'&';   //將js對象重組，拼接成url參數存入param變量中
       }
       //使用slice函數提取一部分字符串，這裏主要是爲了去除拼接的最後一個&字符
       //slice函數：返回一個新的字符串。包括字符串從 start 開始（包括 start）到 end 結束（不包括 end）爲止的全部字符。
       param = param.slice(0,param.length-1);  
   }

   //判斷method是否爲get
   if(method == "get"){
       //是則將數據拼接在url後面
       url = url+param;
   }


   //初始化請求
   xhr.open(method,url,true);

   //若是method == post
   if(method == "post"){
       xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
       //發送請求
       xhr.send(param);
   }else{
       //發送請求
       xhr.send(null);
   }
   
}

封裝好了咱們本身的ajax函數後，咱們就來使用這個函數發起一個請求吧

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Ajax</title>
</head>
<body>
   <input type="button" id="getContent" value="點我獲取內容" />
   <div id="container">點擊上面的按鈕，我會變哦</div>
</body>


<script>
    //獲取元素
   var getContent = document.getElementById("getContent");
   var container = document.getElementById("container");
   var user_info = document.getElementById("user_info");
   
   //給元素添加單擊事件處理函數
   getContent.onclick = function (){
       //使用本身封裝的ajax函數發送一個post請求
       myAjax('post','ajax01.php',{name:'張三',age:16},function(res){
           console.log(res);
           container.innerHTML = res.name;
       },'json');
   };
</script>
</html>

效果以下圖：

這裏咱們封裝好的ajax函數就能正常使用了，比使用原生js要寫那麼多代碼方便多了，如今咱們只要簡單的調用這個ajax函數就能夠方便的發送請求了。