原生JS實現Ajax及Ajax的跨域請求

  前  言

        

　現在，從事前端方面的程序猿們，若是，不懂一些先後臺的數據交互方面的知識的話，估計都不太好意思說本身是程序猿。固然，現在有着許多的框架，都有相對應的先後臺數據交互的方法。

而，其中，用得最多的應該蘇算是JQuery的Ajax了。可是，今天，影子向你們介紹的是原生js的Ajax，及跨域請求。

 

1、 JQuery的Ajax

首先，先回憶下JQuery的Ajax寫法：

$.ajax({
    url: ,
    type: '',
    dataType: '',
    data: {
          
    },
    success: function(){
         
    },
    error: function(){
          
    }
 })

 

2、原生JS實現Ajax

// 第一步： 得到XMLHttpRequest對象
            var ajax = new XMLHttpRequest();
            // 第二步： 設置狀態監聽函數
            ajax.onreadystatechange = function(){
                console.log(ajax.readyState);
                console.log(ajax.status);
                // 第五步：在監聽函數中，判斷readyState=4 && status=200表示請求成功
                if(ajax.readyState==4 && ajax.status==200){
                    // 第六步： 使用responseText、responseXML接受響應數據，並使用原生JS操做DOM進行顯示
                    console.log(ajax.responseText);
                    console.log(ajax.responseXML);// 返回不是XML，顯示null
                    console.log(JSON.parse(ajax.responseText));
                    console.log(eval("("+ajax.responseText+")"));
                }
            }
            // 第三步： open一個連接
            ajax.open("GET","h51701.json",false);//true異步請求，false同步
            
            // 第四步： send一個請求。 能夠發送對象和字符串，不須要傳遞數據發送null
            ajax.send(null);

註釋：

1. open(method, url, async) 方法須要三個參數:

　 method：發送請求所使用的方法（GET或POST）；與POST相比，GET更簡單也更快，而且在大部分狀況下都能用；然而，在如下狀況中，請使用POST請求：

• 沒法使用緩存文件（更新服務器上的文件或數據庫）
• 向服務器發送大量數據（POST 沒有數據量限制）
• 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

　url：規定服務器端腳本的 URL(該文件能夠是任何類型的文件，好比 .txt 和 .xml，或者服務器腳本文件，好比 .asp 和 .php （在傳回響應以前，可以在服務器上執行任務）)；

　async：規定應當對請求進行異步（true）或同步（false）處理；true是在等待服務器響應時執行其餘腳本，當響應就緒後對響應進行處理；false是等待服務器響應再執行。

2. send() 方法可將請求送往服務器。

3. onreadystatechange：存有處理服務器響應的函數，每當 readyState 改變時，onreadystatechange 函數就會被執行。

4. readyState：存有服務器響應的狀態信息。

• 0: 請求未初始化
• 1: 服務器鏈接已創建
• 2: 請求已接收
• 3: 請求處理中
• 4: 請求已完成，且響應已就緒

5. responseText：得到字符串形式的響應數據。

 

 eval() 和JSON.parse() 

另外，給你們介紹兩種解析字符串的方法：

eval() :

　　  eval函數用於將字符串中的JS代碼解析出來並執行！！     
   　  當使用eval函數解析JSON字符串時，需 要在函數內部將JSON字符串用()拼接
   　　   例如：  eval("("+json1+")")
  　　　　  表示eval函數中的字符串不是用於執行，而是要進行字符串解析
  　　   即：
   　　　　 eval("("+json1+")") = JSON.parse(json1；

 

JOSN.parse() :

　　純粹的將JSON字符串解析爲數組或對象；

4、 Ajax的跨域請求

 
首先，咱們得知道 爲何會有跨域請求這回事，以及什麼狀況下會有跨域請求？

 

1  同源策略

同源策略限制從一個源加載的文檔或腳本如何與來自另外一個源的資源進行交互。這是一個用於隔離潛在惡意文件的關鍵的安全機制。

它的定義是：

　　一段腳本向後臺請求數據，只能讀取屬於同一協議名、同一主機名、同一端口號下的數據；

　　因此，請求不一樣協議名、不一樣端口號、不一樣主機名下面的文件時，
       將會違背同源策略，沒法請求成功，須要進行跨越處理!!

2解決跨域請求的方法

 

方法一：後臺PHP進行設置

 

前臺無需任何設置，在後臺被請求的PHP文件中，寫入一條header。

   header("Access-Control-Allow-Origin:*");

   --- 表示容許哪些域名請求這個PHP文件，*表示全部域名都容許

JS代碼：

 

　　　　　　　　　　

註釋：

　　其中，url爲PHP文件的路徑;

PHP代碼：

　　　　　　　　　　

結果：

　　

 

方法二 ：使用SRC屬性 + jsonp實現跨域

實現步驟：　　　

　　　　一、原有src屬性的標籤子帶跨域功能；因此可使用script標籤的src屬性請求後臺數據

 　　　　　　 <script src="http://127.0.0.1/json.php">< /script>

  　　　 二、用於src在加載數據成功後，會直接將加載的內容放到script標籤中；

　　　　　　   因此，後臺直接返回JSON字符串將不能在script標籤中解析。

  　　　　　　 所以，後臺應該返回給前臺一個回調函數名，並將JSON字符串做爲參數傳入。

  　　　　　　　　後臺PHP文件中返回： echo "callback({$json})";

  　　   三、前臺接收到返回的回調函數，將直接在script標籤中調用。所以，須要聲明這樣一個回調函數，做爲請求成功的回調

  function callback(data){

  alert("請求成功!!");

  console.log(data);

  }

 

JS代碼：

　　　　　　　　　　　　

　　　　　　　　　　　　

 

 

PHP文件：

　　　　　　　　　　　　

結果：

　　　　　　　　　　　　

 

方法三 ：JQuery的Ajax實現jsonp

 

　　一、在ajax請求時，設置dataType爲"jsonp"；

       二、後臺返回時，依然須要返回回調函數名，可是，ajax在發送請求時，會默認使用get請求將回調函數名發給後臺，

  　　　　 後臺$_GET['callback'] 取出函數名：

   　　　　　　---   echo "{$_GET['callback']}({$str})";

       三、後臺返回之後，前臺就可使用ajax的success函數做爲成功的回調

 　　　　　　  ---    success : function(data){}

 

 js代碼：

　　　　　　　　

 

PHP文件：　　　　　　　　　

 

　　　　　　　　　　

結果：

　　

固然，後臺也能夠隨便返回一個函數名，前臺只要請求成功，就會自動調用這個函數。相似第二條的②、③步，而不須要本方法的第③步

 PHP返回： echo "callback({$str})";

  JS代碼：  function callback(data){

　　　　　　　　console.log(data);

　　　　　　}

js代碼：

　　　　　　　　

 

PHP文件：

　　　　　　　　　　

結果：

　　　　　　　　

雖然，影子是一名web前端工程師，可是，影子中的以爲關於數據交互這一塊，對咱們這一羣人來講，要用的地方仍是，比較多的；何況，就算是用不到，多一技傍身也是，不錯的；

好了，今天，影子的分享，就到這裏結束了，感謝你們的支持!!!!