原生AJAX請求教程

ajax 即 Asynchronous Javascript And XML，AJAX 不是一門的新的語言，而是對現有持術的綜合利用。本質是在 HTTP 協議的基礎上以異步的方式與服務器進行通訊.

異步：指某段程序執行時不會阻塞其它程序執行，其表現形式爲程序的執行順序不依賴程序自己的書寫順序，相反則爲同步。

XMLHttpRequest 對象

瀏覽器內建對象，用於在後臺與服務器通訊(交換數據) ，由此咱們即可實現對網頁的部分更新，而不是刷新整個頁面。

全部現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。

var xhr = new XMLHttpRequest(); 

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：
var xhr=new ActiveXObject("Microsoft.XMLHTTP");

如需將請求發送到服務器，咱們使用 XMLHttpRequest 對象的 open() 和 send() 方法：

var xhr = new XMLHttpRequest(); xhr.open('GET', 'ajax_info.json', true); xhr.send(); 

方法	描述
open(method,url,async)	規定請求的類型、URL 以及是否異步處理請求。 method：請求的類型；GET 或 POST  url：文件在服務器上的位置  async：true（異步）或 false（同步）
send(string)	將請求發送到服務器。string：僅用於 POST 請求

get請求

get請求參數須要放在url地址的參數中。並經過urlencode的方式傳參，也就是?隔開url和參數，而後多個參數用&鏈接，參數格式爲：key=val。

var xhr = new XMLHttpRequest(); xhr.open("GET","/ajax.php?fname=Henry&lname=Ford",true); xhr.send(); 

post請求

post請求須要添加一個請求頭，讓後臺知道咱們請求的參數的格式，這樣後臺才能解析咱們的數據。另外，傳輸的數據須要格式化到send方法中。

var xhr = new XMLHttpRequest(); xhr.open("POST","/try/ajax/demo_post2.php",true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send("fname=Henry&lname=Ford"); 

接受數據並處理數據

XMLHttpRequest對象的相關屬性和事件

屬性	說明
status	200: "OK"
responseText	得到字符串形式的響應數據。
responseXML	得到 XML 形式的響應數據。
readyState	存有 XMLHttpRequest 的狀態。請求發送到後臺後，狀態會從 0 到 4 發生變化。 0: 請求未初始化  1: 服務器鏈接已創建  2: 請求已接收  3: 請求處理中  4: 請求已完成，且響應已就緒
onreadystatechange	每當 readyState 屬性改變時，就會調用該函數。

開發人員，能夠經過監聽XMLHttpRequest對象的onreadystatechange事件，在事件的回調函數中判斷readyState的狀態，能夠幫助咱們進行對象請求結果的判斷處理。

完整實例

• 完整的GET請求例子

// get請求 var xhr = new XMLHttpRequest(); xhr.open('GET', '/api/user?id=333', true); xhr.send(); xhr.onreadystatechange = function (e) { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } }; 

• 完整的POST請求例子

var xhr = new XMLHttpRequest(); xhr.open('POST', '/api/user', true); // POST請求須要設置此參數 xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded') xhr.send('name=33&ks=334'); xhr.onreadystatechange = function (e) { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } }; 

封裝原生Ajax請求

封裝get請求

/** * Ajax的Get請求輔助方法 * @param {String} url 請求後臺的地址 * @param {Function} callback 請求成以後，返回數據成功，而且調用此方法，這個方法接受一個參數就是後臺返回的數據。 * @return undefined */ function ajaxGet(url, callback) { var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.send(); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { callback(xhr.responseText); } } } // 調用 ajaxGet('/user.json', function (data) { console.log(data); }); 

封裝post請求

function ajaxPost(url, data, callback) { var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.send(data); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { callback(xhr.responseText); } } } // 調用 ajaxPost('/api/user', 'id=9&com=aicoder', function (data) { // 後臺返回的數據就是 字符串類型。要轉成json，必須本身手動轉換。 var user = JSON.parse(data); console.log(user.id); console.log(user.com); });