【Ajax】
Ajax技術(shù)能夠向服務(wù)器請(qǐng)求額外的數(shù)據(jù)而無(wú)須卸載頁(yè)面能帶來(lái)更好的用戶體驗(yàn).
Ajax技術(shù)的核心是XMLHttpRequest對(duì)象（簡(jiǎn)稱XHR），XHR向服務(wù)器發(fā)送請(qǐng)求和解析拂去其響應(yīng)提供了流暢的接口。能夠以異步方式從服務(wù)器取得更多信息，意味著用戶單擊后，可以不刷新頁(yè)面也能取得新數(shù)據(jù)。也就是說(shuō)，可以使用XHR對(duì)象取得新數(shù)據(jù)，然后再通過(guò)DOM將新數(shù)據(jù)插入到頁(yè)面中。（這種技術(shù)就是無(wú)需刷新頁(yè)面即可從服務(wù)器取得數(shù)據(jù)，被稱為瀏覽器與服務(wù)器的通信）

在Ajax技術(shù)之前，網(wǎng)絡(luò)世界是同步進(jìn)行的，造成了很多不方便，有了Ajax技術(shù)后，網(wǎng)絡(luò)變成了異步的世界。Ajax通過(guò)XMLHttpRequest對(duì)象完成異步。

XMLHttpRequest對(duì)象：
1、XMLHttpRequest對(duì)象創(chuàng)建（創(chuàng)建完XMLHttpRequest對(duì)象，就可以對(duì)服務(wù)器進(jìn)行請(qǐng)求了）

//使用XMLHttpRequest構(gòu)造函數(shù)var request = new XMLHttpRequest();//在大多數(shù)瀏覽器中，在ie5、6中不支持這個(gè)方式//在ie5、6中兼容，只需要定義下面這個(gè)函數(shù)var request;if(window.XMLHttpRequest){request = new XMLHttpRequest();}else{request = new ActiveXObject("MicrosOft.XMLHTTP");}

2、http請(qǐng)求：
http:是一套計(jì)算機(jī)通過(guò)網(wǎng)絡(luò)進(jìn)行通信的規(guī)則，http主要用于客服端（瀏覽器）向服務(wù)器請(qǐng)求信息和服務(wù)。http是一種無(wú)狀態(tài)協(xié)議：不建立持久的連接，即服務(wù)端不保留連接的相關(guān)信息；無(wú)記憶，即每次請(qǐng)求都會(huì)打開(kāi)一個(gè)tcp連接，當(dāng)請(qǐng)求完畢就關(guān)閉tcp連接。第二次又重新建立tcp連接。
一個(gè)完整的http請(qǐng)求過(guò)程的7個(gè)步驟：
??? ——建立TCP連接；
??? ——web瀏覽器向web服務(wù)器發(fā)送請(qǐng)求命令；
??? ——web瀏覽器發(fā)送請(qǐng)求頭信息；
??? ——web服務(wù)器應(yīng)答；
??? ——web服務(wù)器發(fā)送應(yīng)答頭信息；
??? ——web服務(wù)器向?yàn)g覽器發(fā)送數(shù)據(jù)；
??? ——web服務(wù)器關(guān)閉TCP連接。
一個(gè)http請(qǐng)求一般包含四個(gè)部分：
??? http請(qǐng)求的方法或動(dòng)作，例如get和post請(qǐng)求；
??? 正在請(qǐng)求的URL；
??? 請(qǐng)求頭，包含一次客戶端信息和身份驗(yàn)證信息等；
??? 請(qǐng)求體，就是請(qǐng)求正文，請(qǐng)求體包含一些客服請(qǐng)求的查詢字符串信息和表單信息等

GET請(qǐng)求和POST請(qǐng)求
GET請(qǐng)求：一般用于信息獲取，使用URL傳遞參數(shù)，最常用于向服務(wù)器查詢某些信息。
POST請(qǐng)求：一般用于修改服務(wù)器上的資源，通常用于向服務(wù)器發(fā)送應(yīng)該被保存的數(shù)據(jù)，格式不限。
一個(gè)http響應(yīng)一般由三部分組成：
??? 一個(gè)數(shù)字和文字組成的狀態(tài)碼，用于實(shí)現(xiàn)請(qǐng)求是成功還是失敗；
??? 響應(yīng)頭；
??? 響應(yīng)體，響應(yīng)的正文。
3、XMLHttpRequest發(fā)送請(qǐng)求的方法：
open(method,url,async)
參數(shù)說(shuō)明：method指的是要發(fā)送的請(qǐng)求的類型（get和post），請(qǐng)求的url和請(qǐng)求是否異步進(jìn)行的布爾值。
send(string)
該方法接收一個(gè)參數(shù)，既要作為請(qǐng)求主體發(fā)送的數(shù)據(jù)，如果不需要請(qǐng)求主體發(fā)送數(shù)據(jù)，則傳入null。
在這里我們有時(shí)候會(huì)用到一個(gè)setRequestHeader()方法來(lái)設(shè)置自定義的請(qǐng)求頭部信息，這個(gè)方法接受兩個(gè)參數(shù)：頭部字段的名稱和頭部字段的值。這個(gè)方法必須在open(方法之后在send（）方法之前調(diào)用。

request.open("get", "url",false); request.send(null);

request.open("post", "url",true);request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");request.send("name=王二狗&sex=男");

4、XMLHttpRequest取得響應(yīng)
XMLHttpRequest取得響應(yīng)值得方法：
responseText：獲得字符串形式的響應(yīng)數(shù)據(jù)；
responseXML：獲得XML形式的響應(yīng)值；
status和statusText：以數(shù)字或文本形式返回http狀態(tài)碼；
getAllResponseHeader()：獲的所以的響應(yīng)報(bào)頭；
getResponseHeader()：查詢報(bào)頭中某個(gè)字段的值。

要想獲得響應(yīng)過(guò)程的當(dāng)前活動(dòng)階段或監(jiān)聽(tīng)響應(yīng)狀態(tài)，就可以通過(guò)readyState屬性的變化來(lái)檢查，值可取為：
0：請(qǐng)求未初始化，open()還未調(diào)用；
1：服務(wù)器已經(jīng)連接，open（）已經(jīng)被調(diào)用，啟動(dòng)；
2：請(qǐng)求已經(jīng)接收，就是已經(jīng)接收到頭部信息了，send()方法已經(jīng)調(diào)用，但還沒(méi)有接收到響應(yīng)；
3：接收，請(qǐng)求處理中，也就是已經(jīng)接收到部分響應(yīng)數(shù)據(jù)了（響應(yīng)主體）；
4：完成，請(qǐng)求和響應(yīng)都已經(jīng)完成。
通過(guò)監(jiān)聽(tīng)一個(gè)readyState屬性的一個(gè)事件來(lái)完成：

var request = new XMLHttpRequest();request.open("GET", "url",true);request.send();request.onreadystatechange = function(){if(request.readyState === 4 && request.readyState === 200){//做一些事情 request.responseText} }

XMLHttpRequest2級(jí)
是對(duì)XHR的發(fā)展，他有一些所有瀏覽器都實(shí)現(xiàn)的內(nèi)容：
1、FormDate：為序列化表單以及創(chuàng)建與表單格式相同的數(shù)據(jù)提供了便利。下面創(chuàng)建一個(gè)FormDate對(duì)象：

//創(chuàng)建FormDate對(duì)象var data = new FormDate();data.append("name","bob");//append()方法接收兩個(gè)參數(shù)：鍵和值

2、超時(shí)設(shè)定：IE8為XHR對(duì)象添加了一個(gè)屬性timeout，表示請(qǐng)求在等待響應(yīng)多少毫秒之后就終止。在給timeout設(shè)置一個(gè)值后，如果在規(guī)定的時(shí)間內(nèi)瀏覽器還沒(méi)有接受響應(yīng)，那么就會(huì)觸發(fā)timeout事件，進(jìn)而調(diào)用ontimeouts事件處理程序。
3、overrideMimeType()方法：用于重寫xhr響應(yīng)的MIME類型。調(diào)用overrideMimeType()方法，可以保證把響應(yīng)當(dāng)作XML而非純文本來(lái)處理。調(diào)用overrideMimeType()必須在send()方法之前，才能保重寫成功。

【跨域】
一個(gè)域名地址的組成：

當(dāng)協(xié)議、子域名、主域名、端口號(hào)中的任意一項(xiàng)不同時(shí)，都算作不同域，不同域之間相互請(qǐng)求資源據(jù)算作“跨域”。

【跨域資源共享CORS】
javascript出于對(duì)安全的考慮，不允許跨域調(diào)用其他頁(yè)面的對(duì)象。但是，合理的跨域也是很重要的。
CORS：跨域資源共享，定義了在必須訪問(wèn)跨域資源時(shí)，瀏覽器與服務(wù)器應(yīng)該如何溝通。CORS的基本思想就是使用自定義的http頭部讓瀏覽器與服務(wù)器進(jìn)行溝通，從而解決請(qǐng)求是應(yīng)該成功還是失敗。

與其他瀏覽器不同的是IE是通過(guò)XDR（XDomainRequest）對(duì)象實(shí)現(xiàn)CORS的，XDR對(duì)象的使用方法與XHR對(duì)象很相似，但XDR對(duì)象的open()方法只接收兩個(gè)參數(shù)：請(qǐng)求的類型和統(tǒng)一資源定位器（url）。所有的XDR都是異步執(zhí)行的，響應(yīng)的數(shù)據(jù)會(huì)保存在responseText屬性中。如：

var xdr = new XDomainRequest();
???????? xdr.onload = function(){
??????????? alert(xdr.responseText);
???????? };
???????? xdr.open("get", "url");
???????? xdr.send(null);

處理跨域的方法：代理：通過(guò)同域名的服務(wù)器端創(chuàng)建一個(gè)代理。
處理跨域的技術(shù)：
1、JSONP
JSONP：是JSON with padding（填充式JSON或參數(shù)式JSON）的簡(jiǎn)寫，是應(yīng)用JSON的一種新方式，JSONP看起來(lái)與JSON差不多，只不過(guò)是被包含在函數(shù)調(diào)用中的JSON，例如：

callack({"name":"bob"});

JSONP有兩個(gè)部分組成：回調(diào)函數(shù)和數(shù)據(jù)。回調(diào)函數(shù)是當(dāng)響應(yīng)到來(lái)時(shí)應(yīng)該在頁(yè)面中調(diào)用的函數(shù)，數(shù)據(jù)就是傳入回調(diào)函數(shù)中的JSON數(shù)據(jù)。下面是一個(gè)典型的JSONP請(qǐng)求：

http://freegeoip.net/json/?callback=handleResponse

2、圖像Ping
他的方式是動(dòng)態(tài)創(chuàng)建圖像，圖像Ping是與服務(wù)器進(jìn)行簡(jiǎn)單、單向的跨域通信的一種方式。圖像Ping最常用于跟蹤用戶點(diǎn)擊頁(yè)面或動(dòng)態(tài)廣告曝光次數(shù)。

【小結(jié)】

Ajax是無(wú)需刷新頁(yè)面就可以從服務(wù)器取得數(shù)據(jù)的一種方法，負(fù)責(zé)Ajax運(yùn)作的核心對(duì)象是XMLHttpResquest(XHR)對(duì)象。

同源策略是對(duì)XHR的一個(gè)主要約束，他為通信設(shè)置了“相同的域，相同的端口，相同的協(xié)議”這一限制。試圖訪問(wèn)上述限制之外的資源，都會(huì)引發(fā)錯(cuò)誤，除非采用被認(rèn)可的跨域解決方案：CORS(Cross -Origin Resource Sharing,跨域資源共享)，ie8通過(guò)XDomainRequest對(duì)象支持CORS，其他瀏覽器通過(guò)XMLHttpRequest對(duì)象支持。圖像Ping和JSONP是另外兩種跨域通信的技術(shù)，但是沒(méi)有CORS穩(wěn)妥。

另外還有一個(gè)Comet，上面沒(méi)有對(duì)他進(jìn)行詳細(xì)說(shuō)明，Comet是對(duì)Ajax的進(jìn)一步擴(kuò)展，讓服務(wù)器幾乎實(shí)時(shí)的向客服端推送信息，實(shí)現(xiàn)Comet的手段主要有兩種：長(zhǎng)輪詢和http流。

轉(zhuǎn)載于:https://www.cnblogs.com/yehui-mmd/p/5864288.html

與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的Ajax接触及对跨域的简单理解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。