使用原生JavaScript實現AJAX、JSONP

阿新 • • 發佈：2019-01-01

一、AJAX AJAX的核心是XMLHttpRequest。一個完整的AJAX請求一般包括以下步驟：

例項化XMLHttpRequest物件
連線伺服器
傳送請求
接收響應資料

我將AJAX請求封裝成ajax()方法，它接受一個配置物件params。

function ajax(params) {   

  params = params || {};   

  params.data = params.data || {};   

  // 判斷是ajax請求還是jsonp請求

  var json = params.jsonp ? jsonp(params) : json(params);   

  // ajax請求   

  function json(params) {   

    //  請求方式，預設是GET

    params.type = (params.type || 'GET').toUpperCase(); 

    // 避免有特殊字元，必須格式化傳輸資料  

    params.data = formatParams(params.data);   

    var xhr = null;    



    // 例項化XMLHttpRequest物件   

    if(window.XMLHttpRequest) {   

      xhr = new XMLHttpRequest();   

    } else {   

      // IE6及其以下版本   

      xhr = new ActiveXObjcet('Microsoft.XMLHTTP');   

    }; 



    // 監聽事件，只要 readyState 的值變化，就會呼叫 readystatechange 事件 

    xhr.onreadystatechange = function() {  

      //  readyState屬性表示請求/響應過程的當前活動階段，4為完成，已經接收到全部響應資料

      if(xhr.readyState == 4) {   

        var status = xhr.status;  

        //  status：響應的HTTP狀態碼，以2開頭的都是成功

        if(status >= 200 && status < 300) {   

          var response = ''; 

          // 判斷接受資料的內容型別  

          var type = xhr.getResponseHeader('Content-type');   

          if(type.indexOf('xml') !== -1 && xhr.responseXML) {   

            response = xhr.responseXML; //Document物件響應   

          } else if(type === 'application/json') {   

            response = JSON.parse(xhr.responseText); //JSON響應   

          } else {   

            response = xhr.responseText; //字串響應   

          };  

          // 成功回撥函式 

          params.success && params.success(response);   

       } else {   

          params.error && params.error(status);   

       }   

      };   

    };  

  

    // 連線和傳輸資料   

    if(params.type == 'GET') {

      // 三個引數：請求方式、請求地址(get方式時，傳輸資料是加在地址後的)、是否非同步請求(同步請求的情況極少)；

      xhr.open(params.type, params.url + '?' + params.data, true);   

      xhr.send(null);   

    } else {   

      xhr.open(params.type, params.url, true);   

      //必須，設定提交時的內容型別   

      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); 

      // 傳輸資料  

      xhr.send(params.data);   

    }   

  }  

 

  //格式化引數   

  function formatParams(data) {   

    var arr = [];   

    for(var name in data) { 

      //   encodeURIComponent() ：用於對 URI 中的某一部分進行編碼

      arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));   

    };   

    // 新增一個隨機數引數，防止快取   

    arr.push('v=' + random());   

    return arr.join('&');   

  }



  // 獲取隨機數   

  function random() {   

    return Math.floor(Math.random() * 10000 + 500);   

  }

}

使用例項：

ajax({   

  url: 'test.php',   // 請求地址

  type: 'POST',   // 請求型別，預設"GET"，還可以是"POST"

  data: {'b': '非同步請求'},   // 傳輸資料

  success: function(res){   // 請求成功的回撥函式

    console.log(JSON.parse(res));   

  },

  error: function(error) {}   // 請求失敗的回撥函式

});

二、JSONP 同源策略 AJAX之所以需要“跨域”，罪魁禍首就是瀏覽器的同源策略

。即，一個頁面的AJAX只能獲取這個頁面相同源或者相同域的資料。如何叫“同源”或者“同域”呢？——協議、域名、埠號都必須相同。例如：

http://example.com 和 https://example.com 不同，因為協議不同；

http://localhost:8080 和 http://localhost:1000 不同，因為埠不同；

http://localhost:8080 和 https://example.com 不同，協議、域名、埠號都不同，根本不是一家的。

當跨域請求時，一般都會看到這個錯誤：

XMLHttpRequest cannot load http://ghmagical.com/article/?intro=jsonp%E8%AF%B7%E6%B1%82&v=5520. No 'Access-Control-Allow-Origin'
 header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

那如何跨域請求呢？這時，JSONP就登場了！ JSONP(JSON with Padding) 是一種跨域請求方式。主要原理是利用了script 標籤可以跨域請求的特性，由其 src 屬性發送請求到伺服器，伺服器返回 JavaScript 程式碼，瀏覽器接受響應，然後就直接執行了，這和通過 script 標籤引用外部檔案的原理是一樣的。
JSONP由兩部分組成：回撥函式和資料，回撥函式一般是在瀏覽器控制，作為引數發往伺服器端（當然，你也可以固定回撥函式的名字，但客戶端和伺服器端的名稱一定要一致）。當伺服器響應時，伺服器端就會把該函式和資料拼成字串返回。
JSONP的請求過程：

請求階段：瀏覽器建立一個 script標籤，並給其src 賦值(類似 http://example.com/api/?callback=jsonpCallback）。
傳送請求：當給script的src賦值時，瀏覽器就會發起一個請求。
資料響應：服務端將要返回的資料作為引數和函式名稱拼接在一起(格式類似”jsonpCallback({name: 'abc'})”)返回。當瀏覽器接收到了響應資料，由於發起請求的是 script，所以相當於直接呼叫 jsonpCallback 方法，並且傳入了一個引數。

在這裡講解一下用原生JavaScript如何實現。依舊是ajax()方法裡新增JSONP，後面會將兩者整合在一起，JSONP的配置引數主要多了一個jsonp引數，它就是你的回撥函式名。

function ajax(params) {   

  params = params || {};   

  params.data = params.data || {};   

  var json = params.jsonp ? jsonp(params) : json(params);      



  // jsonp請求   

  function jsonp(params) {   

    //建立script標籤並加入到頁面中   

    var callbackName = params.jsonp;   

    var head = document.getElementsByTagName('head')[0];   

    // 設定傳遞給後臺的回撥引數名   

    params.data['callback'] = callbackName;   

    var data = formatParams(params.data);   

    var script = document.createElement('script');   

    head.appendChild(script);    

 

    //建立jsonp回撥函式   

    window[callbackName] = function(json) {   

      head.removeChild(script);   

      clearTimeout(script.timer);   

      window[callbackName] = null;   

      params.success && params.success(json);   

    };    



    //傳送請求   

    script.src = params.url + '?' + data;    



    //為了得知此次請求是否成功，設定超時處理   

    if(params.time) {   

     script.timer = setTimeout(function() {   

       window[callbackName] = null;   

       head.removeChild(script);   

       params.error && params.error({   

         message: '超時'   

       });   

     }, time);   

    }   

  };    



  //格式化引數   

  function formatParams(data) {   

    var arr = [];   

    for(var name in data) {   

      arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));   

    };   



    // 新增一個隨機數，防止快取   

    arr.push('v=' + random());   

    return arr.join('&');   

  }   



  // 獲取隨機數   

  function random() {   

    return Math.floor(Math.random() * 10000 + 500);   

  }
}

注意：因為 script 標籤的 src 屬性只在第一次設定的時候起作用，導致 script 標籤沒法重用，所以每次完成操作之後要移除；使用例項：

ajax({   

  url: 'test.php',    // 請求地址

  jsonp: 'jsonpCallback',  // 採用jsonp請求，且回撥函式名為"jsonpCallbak"，可以設定為合法的字串

  data: {'b': '非同步請求'},   // 傳輸資料

  success:function(res){   // 請求成功的回撥函式

    console.log(res);   

  },

  error: function(error) {}   // 請求失敗的回撥函式

});

在這裡後臺使用PHP處理：

<?php

   $data = array('type'=>'jsonp');

   $callback = isset($_GET['callback']) ? trim($_GET['callback']) : '';  

   echo $callback.'('.json_encode($data).')';

注意：別漏了用函式名與資料拼接返回。當然，前面也說過，你可以給定固定回撥函式名：

function jsonpCallback() {}



<?php 

  echo 'jsonpCallback('.$data.')';

著作權歸作者所有。

商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。http://ghmagical.com/

使用原生JavaScript實現AJAX、JSONP

使用原生JavaScript實現AJAX、JSONP

用原生js實現ajax、jsonp

原生JS實現AJAX、JSONP及DOM載入完成事件

原生JS實現AJAX、JSONP及DOM載入完成事件，並提供對應方法

原生javascript實現ajax 傳送post請求

原生JavaScript實現ajax非同步請求程式碼

原生JavaScript實現Ajax（二）：同步，非同步，GET，POST

原生JavaScript實現Ajax的使用

javascript原生程式碼實現ajax請求

使用原生JavaScript實現對select增加option標簽並附加value屬性

原生JavaScript實現無縫輪播圖

原生JavaScript寫AJAX

原生javascript實現文件異步上傳

原生JS實現ajax省市區三聯

原生javaScript完成Ajax請求

原生js實現Ajax請求

原生js實現Ajax

原生JavaScript實現JSON合並（遞歸深度合並）

原生javascript實現 hasClass addClass removeClass

原生 JavaScript 實現 state 狀態管理系統

使用原生JavaScript實現AJAX、JSONP

相關推薦