前言

ajax 即“Asynchronous JavaScript and XML”(異步的JavaScript和XML)。現在這個詞的覆蓋面有所擴展，把允許瀏覽器與服務器通信而無需刷新當前頁面的技術都涵蓋在內。

傳統的Web應用遵循一種請求/響應模式。如果沒有Ajax，對于每個請求都會重新加載整個頁面（或者利用IFRAME，則是部分頁面）。原來查看的頁面會放到瀏覽器的歷史棧中，而用XHR對象做出的請求則不會記錄在瀏覽器的歷史中。

XMLHttpRequest對象

XMLHttpRequest 對象用于在后臺與服務器交換數據。所有現代的瀏覽器都支持XMLHttpRequest 對象。使用它可以不加載頁面的情況下更新網頁，并且可以在加載后從服務器請求或者獲取數據等等。

創建XmlHttpRequest對象的方法很簡單：

xmlhttp=new XMLHttpRequest();

老版本的Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

創建完成之后，可以使用XMLHttpRequest的若干方法來處理http請求：

• open(method,url,async,username,password) 初始化一個XMLHttpRequest對象

　　　　method代表發送請求的HTTP方法(GET，POST，PUT，DELETE或HEAD);

　　　　uri參數用于指定XMLHttpRequest對象把請求發送到的服務器相應的URI;

　　　　async參數指定是否請求是異步的-缺省值為true;

　　　　對于要求認證的服務器，可以提供可選的用戶名和口令參數。

• send([content]) 把請求發送到服務器。

　　　　content代表一個可選的參數，該參數可以包含可變類型的數據，是要發送到服務器的內容，通常在POST方法的時候使用。

• setRequestHeader(DOMString header，DOMString value) 設置請求的頭部信息。
• getResponseHeader(DOMString header，value)檢索響應的頭部值。
• getAllResponseHeaders()以一個字符串形式返回所有的響應頭部。

大概常用的就這么幾個。它們之間是有調用順序的，依據就是XMLHttpRequest對象的狀態屬性readyState，它共有5個狀態：

0	已經創建一個XMLHttpRequest對象，但是還沒有初始化。
1	已經調用了open()方法并且XMLHttpRequest已經準備好把一個請求發送到服務器。
2	已經通過send()方法把一個請求發送到服務器端，但是還沒有收到一個響應。
3	已經接收到HTTP響應頭部信息，但是消息體部分還沒有完全接收結束。
4	響應已經被完全接收。

因此順序是 0--open--1--setRequestHeader--send--2--響應--3--完成--4。

readyState值的改變將會激發一個readystatechange事件，可以使用onreadystatechange屬性來注冊該回調事件處理器。

還有幾個常用的屬性：

• responseText? 接收到的http響應的文本內容；
• responseXML? 接收到的http響應的XML內容，它是一個文檔接口類型的對象，用來描述被分析的文檔。如果文檔不能被分析，那么responseXML的值將為null。
• status? 描述了HTTP狀態代碼
• statusText? 描述了HTTP狀態代碼文本

下面是一個小例子：

function createRequest() {try {request = new XMLHttpRequest();} catch (tryMS) {try {request = new ActiveXObject("Msxml2.XMLHTTP");} catch (otherMS) {try {request = new ActiveXObject("Microsoft.XMLHTTP");} catch (failed) {request = null;}}} return request; } function showTab(){var request=createRequest();if(request==null){alert("Unable to create request");return;}request.onreadystatechange=showSchedule;request.open("GET",selectedTab+".html",true);request.send(null);}function showSchedule(){if(request.readyState==4 && request.status==200){var content=document.getElementById("content");content.innerHTML=request.responseText;}}

JQuery Ajax

基本的內容都在這里了：http://api.jquery.com/category/ajax/?

可以看出，總共有四個類別：全局ajax事件處理器，有用的幫助函數，相對底層的接口，通用的方法。

?

通用方法

首先最常用的就是第四種，這些函數的調用層次更高，更加通用。有以下幾個函數：

jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

參數很簡單了：請求的url，攜帶的參數，請求成功的回調函數，期望得到的數據類型(xml, json, script, or html)

函數的返回值是一個jqXHR，也就是jquery的XMLHttpRequest，是jquery對XMLHttpRequest對象的封裝，它實現了Promise接口，可以鏈式的綁定諸如done()、fail()、always()方法。

jQuery.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

除了使用HTTP POST方法發送請求之外，和jQuery.get方法大致一樣。

.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )

首先這里的調用者不是"JQuery”或者$了，而是jquery對象。之所以這樣做就是將返回的HTML放到函數調用者的元素中。

回調函數complete是在獲取到響應并把它插入到相應的元素中之后才開始執行的。

值得注意的是，可以通過url參數獲取服務器上某個文檔的某一個部分，例如：

$('#result').load('ajax/test.html #container');

jquery首先獲取到服務器上的網頁ajax/test.html，然后解析這個文檔得到id為container的元素，然后將它插入到本地頁面id為result的元素中，剩余的部分就棄之不用了。

還有一點，如果返回的是一段javascript腳本代碼，那么若參數url不帶選擇表達式后綴，那么就會執行，如果帶了后綴，則不會被執行。

load方法默認使用 GET 方式來傳遞的，如果data參數有傳遞數據進去，就會自動轉換為POST方式。

jQuery.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )

相當于將dataType設置為了json而已。如果url中包含了類似于字符串callback=?，那么請求將會作為jsonp對待，jsonp是為了解決js跨域請求的問題。什么是跨域呢，說白了就是域名a下的js不能操作域名b下的對象。

跨域這個問題我也想了很久，我覺得主要有兩點：1.發送http請求獲取文件當然可以，比如在瀏覽器中輸入域名b下的url，這當然無可厚非，如果不能訪問那放到web服務器中還有什么用。但是你要用javascript操作，比如ajax請求域名b下的url，這就不行了，這是出于安全性的考慮。2.為什么不安全呢，比如你在用戶X的主頁上使用某種方法嵌入了一段js，這段js獲取了cookie以及其他一些用戶信息。然后當用戶X登陸后，你的js采用ajax將cookie對象發送給了你的服務器。如果沒有跨域限制，那么你的服務器就有了X的cookie了，然后你就可以模仿他登錄了。但是有了跨域，js就不能發送cookie到你的服務器了。關于跨域的問題這里有兩篇寫的非常好的博客：http://zciii.com/blogwp/crossdomain/和http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html。

但是有時候非得跨域不可，就可以使用jsonp解決。js雖然不能直接訪問其他域下的數據，但是script，img，iframe標簽都可以引用不同域名下的文件。那么我們首先定義一個本地的回調函數callback好了，然后將上面某個標簽的src設置為服務器的js，回調函數的名字作為其中的參數，接著服務器獲取了數據data，然后調用callback(data)。這樣就實現了跨域。哎，又找到一篇相當好的介紹jsonp博客，http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html，它怎么解釋的那么透徹呢？

jQuery.getScript( url [, success(script, textStatus, jqXHR) ] )

相當于把dataType設置為了script。

?

Event Handler

主要有這么幾個：

.ajaxComplete()，.ajaxError()，.ajaxSend()，.ajaxStart()，.ajaxStop()，.ajaxSuccess()

看名字就知道是什么事件了，也就不多說了。

?

Helper Function

serialize() : 序列化表單內容為字符串。

序列化之后的字符串大概就是這個樣子：single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1

serializeArray() : 序列化表單元素返回 JSON 數組。

即返回一個[{name:”single”,value:”Single”},…]的形式。

jQuery.param( obj ) 將obj進行序列化

obj可以是一個json數組或者對象。

var myObject={ a: { b:1,c:2 }, d: [3,4,{ e:5 }] }; var recursiveEncoded = $.param(myObject); //"a%5Bb%5D=1&a%5Bc%5D=2&d%5B%5D=3&d%5B%5D=4&d%5B2%5D%5Be%5D=5" var recursiveDecoded = decodeURIComponent($.param(myObject)); //"a[b]=1&a[c]=2&d[]=3&d[]=4&d[2][e]=5"

?

Low-Level Interface

jQuery.ajax( url [, settings ] ) 和 jQuery.ajax( [settings ] )

settings這個參數的內容太多了，包括accepts，async，beforeSend，cache，complete，contents，contentType，context，converters，crossDomain，data，dataFilter，dataType，error，global，headers，ifModified，isLocal，jsonp，jsonpCallback，mimeType，password，processData，scriptCharset，statusCode，success，tiemout，traditional，type，url，username，xhr，xhrFields。

太多了，實際用的時候根本不可能同時用這么多，所以用的時候再查吧。

轉載于:https://www.cnblogs.com/cubika/p/3188183.html

總結

以上是生活随笔為你收集整理的Javascript Step by Step - 03的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。