## 原生js發送ajax請求原理 ### AJAX是什么? 　　AJAX的全稱是Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。 　　ajax不是新的編程語言，而是一種使用現有標準的新方法。ajax是與服務器交換數據并更新部分網頁的藝術，在不重新加載整個頁面的情況下。 　　ajax是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。 　　ajax是一種用于創建快速動態網頁的技術。通過在后臺與服務器進行少量數據交換。ajax可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。而傳統的網頁（不使用ajax）如果需要更新內容，必須重載整個網頁面。 　　ajax的應用使用支持以上技術web瀏覽器作為運行平臺。這些瀏覽器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式對象，也不支持XSLT。 　　ajax前景非常樂觀，可以提高系統性能，優化用戶界面。AJAX現有直接框架AjaxPro，可以引入AjaxPro.2,可以直接在前臺頁面JS調用后臺頁面的方法。但此框架與FORM驗證有沖突。另微軟也引入了AJAX組建，需要添加AjaxControlToolkit.dll文件，可以在控件列表中出現相關控件。 　　ajax的優點： 　　1、最大的一點是頁面無刷新，用戶的體驗非常好。 　　2、使用異步方式與服務器通信，具有更加迅速的響應能力。。 　　3、可以把以前一些服務器負擔的工作轉嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務器和帶寬的負擔，節約空間和寬帶租用成本。并且減輕服務器的負擔，ajax的原則是“按需取數據”，可以最大程度的減少冗余請求，和響應對服務器造成的負擔。 　　4、基于標準化的并被廣泛支持的技術，不需要下載插件或者小程序。 　　5、ajax可使因特網應用程序更小、更快，更友好。 　　ajax的缺點： 　　1、ajax不支持瀏覽器back按鈕。 　　2、安全問題 AJAX暴露了與服務器交互的細節。 　　3、對搜索引擎的支持比較弱。 　　4、破壞了程序的異常機制。 　　5、不容易調試。 ### 原生ajax的實現方式 **1,實例化AJAX對象** ``` // XMLHttpRequest對象用于在后臺與服務器交換數據, //IE瀏覽器:new ActiveXObject("Microsoft.XMLHttp"); //其他：new XMLHttpRequest(); var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp"); ``` **2,定義post/get請求 ** 拿到XMLHttpRequest之后，使用open()方法去請求鏈接 ``` open語法：open(method, url, async, username, password); method: 請求類型（GET | POST | HEAD） url： 請求主體，大多數瀏覽器實施了一個同源安全策略，并且要求這個 URL 與包含腳本的文本具有相同的主機名和端口。 async: 是否發送異步請求( false | true ) username,password: 參數是可選的，為 url 所需的授權提供認證資格。如果指定了，它們會覆蓋 url 自己指定的任何資格。 ``` ``` var Ajax = { get: function (url, fn) { // XMLHttpRequest對象用于在后臺與服務器交換數據 var xhr = new XMLHttpRequest(); //每當readyState改變時就會觸發onreadystatechange函數 //0: 請求未初始化 //1: 服務器連接已建立 //2: 請求已接收 //3: 請求處理中 //4: 請求已完成，且響應已就緒 xhr.open('GET', url, true) xhr.onreadystatechange = function () { //readyStatus == 4說明請求已經完成 if(xhr.readyState == 4 && xhr.status ==200) { //從服務器獲得數據 fn.call(this, xhr.responseText); } }; //發送數據 xhr.send(); }, // datat應為'a=a1&b=b1'這種字符串格式，在jq里如果data為對象會自動將對象轉成這種字符串格式 post: function (url, data, fn) { var xhr = new XMLHttpRequest(); xhr.open("POST", url, true); // 添加http頭，發送信息至服務器時內容編碼類型 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) { fn.call(this, xhr.responseText); } }; //發送數據 xhr.send(data); } } ``` **3，用法** ``` url:請求路徑 data:參數 Ajax.get('url','data‘,function(data){ console.info(data) }) post請求，把get換成post ```