Ajax和跨域問(wèn)題深入解析

什么是ajax

Ajax(Asynchronous JavaScript and XML),是一種可以向服務(wù)器請(qǐng)求額外的數(shù)據(jù)并且無(wú)需刷新頁(yè)面的技術(shù),ajax的出現(xiàn)帶來(lái)了更好的用戶體驗(yàn).

Ajax的核心就是XMLHttpRequest(XHR)對(duì)象.XHR為向服務(wù)器發(fā)送請(qǐng)求和解析服務(wù)器響應(yīng)提供了流暢的接口.可以使用XHR對(duì)象獲取新數(shù)據(jù),通過(guò)DOM將新數(shù)據(jù)插入到頁(yè)面.雖然名字中包含XML,但是ajax通信和數(shù)據(jù)格式無(wú)關(guān);這種技術(shù)就是可以不用刷新就從服務(wù)器獲取數(shù)據(jù),但是不一定是XML數(shù)據(jù),也可以是json.

XMLHttpRequest對(duì)象

XHR的用法

1.創(chuàng)建一個(gè)XMLHttpRequest對(duì)象

2.發(fā)送請(qǐng)求

1）.設(shè)置請(qǐng)求行 xhr.open()
2）.POST請(qǐng)求需要設(shè)置請(qǐng)求頭 xhr.setRequestHeader() POST請(qǐng)求頭Content-Type的值: application/x-www-form-urlencoded
3）.設(shè)置請(qǐng)求體 xhr.send() get請(qǐng)求傳null,post根據(jù)情況

3.處理服務(wù)器響應(yīng)

先判斷響應(yīng)狀態(tài)碼和異步對(duì)象是否解析完畢.

服務(wù)器返回的狀態(tài)碼 status

1xx:消息
2xx:成功
3xx:重定向
4xx:請(qǐng)求錯(cuò)誤
5xx:服務(wù)器錯(cuò)誤

異步對(duì)象的狀態(tài)碼 readystate

0:異步對(duì)象已經(jīng)創(chuàng)建
1:異步對(duì)象初始化完成,發(fā)送請(qǐng)求
2:接收服務(wù)器返回的原始數(shù)據(jù)
3:數(shù)據(jù)正在解析,解析需要時(shí)間
4:數(shù)據(jù)解析完成,數(shù)據(jù)可以使用了

XML

XML的特點(diǎn)，出身名門(mén)，W3C制定，微軟和IBM曾經(jīng)共同大力推薦過(guò)的數(shù)據(jù)格式.XML 指可擴(kuò)展標(biāo)記語(yǔ)言（Extensible Markup Language）,被設(shè)計(jì)用來(lái)傳輸和存儲(chǔ)數(shù)據(jù),HTML 是設(shè)計(jì)用來(lái)表示頁(yè)面的.

語(yǔ)法規(guī)則:和HTML差不多,都是通過(guò)標(biāo)記來(lái)表示的

特殊符號(hào):比如<>要使用實(shí)體-轉(zhuǎn)移字符

xml的解析需要前后臺(tái)配合:
1.后臺(tái)在返回的時(shí)候,在響應(yīng)頭中設(shè)置Content-Type的值為 application/xml
2.前臺(tái)異步對(duì)象在接收后臺(tái)數(shù)據(jù)時(shí),記得按照xml的方式來(lái)接收,xhr.responseXML,并且它返回的是一個(gè)object對(duì)象,內(nèi)容是#document

JSON

JSON(JavaScript Object Notation),出身草根，是 Javascript 的子集，專(zhuān)門(mén)負(fù)責(zé)描述數(shù)據(jù)格式.JSON本身是一個(gè)特殊格式的字符串,可以轉(zhuǎn)換成js對(duì)象,是網(wǎng)絡(luò)上用來(lái)傳輸數(shù)據(jù)使用最廣泛的數(shù)據(jù)格式，沒(méi)有之一.

語(yǔ)法規(guī)則:數(shù)據(jù)以 key/value 值對(duì)表示,數(shù)據(jù)由逗號(hào)分隔,大括號(hào)保存對(duì)象,中括號(hào)保存數(shù)組,名稱(chēng)和值都需要使用雙引號(hào)包含(這個(gè)是和js的一點(diǎn)小區(qū)別).
js中解析/操作JSON:
1.JSON.parse(json字符串); 將一個(gè)json格式的字符串解析成js對(duì)象
2.JSON.stringify(js對(duì)象); 將一個(gè)js對(duì)象轉(zhuǎn)成一個(gè)json格式的字符串

自己封裝一個(gè)ajax

function pinjieData(obj) {
 //obj 就相當(dāng)于 {key:value,key:value}
 //最終拼接成鍵值對(duì)的字符串 "key:value,key:value"
 var finalData = "";
 for(key in obj){
 finalData+=key+"="+obj[key]+"&"; //key:value,key:value&
 }
 return finalData.slice(0,-1);//key:value,key:value
}

function ajax(obj) {
 var url = obj.url;
 var method = obj.method.toLowerCase();
 var success = obj.success;
 var finalData = pinjieData(obj.data);
 //finalData最終的效果key:value,key:value

 //1.創(chuàng)建xhr對(duì)象
 var xhr = new XMLHttpRequest();
 //get方法拼接地址,xhr.send(null)
 if (method=='get'){
 url = url + "?"+finalData;
 finalData = null;
 }

 //2.設(shè)置請(qǐng)求行
 xhr.open(method,url);

 // 如果是post請(qǐng)求,要設(shè)置請(qǐng)求頭
 if (method=='post'){
 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
 }

 //3.發(fā)送
 xhr.send(finalData);

 //4.監(jiān)聽(tīng)服務(wù)器返回的數(shù)據(jù)
 xhr.onreadystatechange = function () {
 if (xhr.status==200 && xhr.readyState==4){
 var result = null;
 //獲取返回的數(shù)據(jù)類(lèi)型
 var rType = xhr.getResponseHeader("Content-Type");
 if (rType.indexOf('xml')!=-1){
 result = xhr.responseXML;
 }else if(rType.indexOf('json')!=-1){
 // JSON.parse 的意思是 將 json格式的字符串
 //比如 [{ "src":"./images/nav0.png","content":"商品分類(lèi)1"}]
 //轉(zhuǎn)成js對(duì)象
 result = JSON.parse(xhr.responseText);
 }else{//當(dāng)成普通的字符串去處理
 result = xhr.responseText;
 }

 //將這里解析好的數(shù)據(jù)交給頁(yè)面去渲染
 success(result);
 }
 }
}

jQuery中使用ajaxAPI jQuery ajax

jQuery為我們提供了更便利的ajax封裝使用.

$.ajax({}) 可以配置方式發(fā)起ajax請(qǐng)求
$.get() 以get方式發(fā)起ajax請(qǐng)求
$.post() 以post方式發(fā)起ajax請(qǐng)求
$('form').serialize() 序列化表單(格式化key=val$key=val)

參數(shù)說(shuō)明

url :接口地址
type :請(qǐng)求方式(get/post)
timeout : 要求為Number類(lèi)型的參數(shù)，設(shè)置請(qǐng)求超時(shí)時(shí)間（毫秒）
dataType: 應(yīng)該是客戶端傳遞給服務(wù)器一個(gè)值，告訴服務(wù)器如何進(jìn)行處理:
data: 發(fā)送請(qǐng)求數(shù)據(jù)
beforeSend: 要求為Function類(lèi)型的參數(shù)，發(fā)送請(qǐng)求前可以修改XMLHttpRequest對(duì)象的函數(shù)，例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請(qǐng)求.
success: 成功響應(yīng)后調(diào)用
error: 錯(cuò)誤響應(yīng)時(shí)調(diào)用
complete: 響應(yīng)完成時(shí)調(diào)用（包括成功和失?。?br />

 //ajax===get
 $.ajax({
 url:'',
 data:'key=value&key=value',
 type:'get',
 success:function (result) {
 console.log(result);
 }
 });

//ajax===post
$.ajax({
 url:'',
 data:'key=value&key=value',
 type:'post',
 success:function (result) {
 console.log(result);
 }
 });

//$.get
$.get({
 url:'',
 data:'key=value&key=value',
 success:function (result) {
 console.log(result);
 }
});

//$.post
$.post({
 url:'',
 data:'key=value&key=value',
 success:function (result) {
 console.log(result);
 }
});
//在使用jQuery中ajax發(fā)送請(qǐng)求的時(shí)候,只需要在 dataType中寫(xiě)上jsonp即可實(shí)現(xiàn)ajax的跨域請(qǐng)求
 dataType:'jsonp' 

跨域

通過(guò)XHR實(shí)現(xiàn)ajax通信的一個(gè)主要限制(相同域,相同端口,相同協(xié)議),來(lái)源于跨服安全策略,默認(rèn)情況下,XHR只能請(qǐng)求同一域的資源,這是為了防止某些惡意的行為.

CORS跨域

CORS(cross-origin resource sharing,跨域源資源共享)定義了在跨域時(shí),瀏覽器和服務(wù)器應(yīng)該如何溝通.CORS允許一個(gè)域上的網(wǎng)絡(luò)應(yīng)用向另一個(gè)域提交跨域 AJAX 請(qǐng)求。實(shí)現(xiàn)此功能非常簡(jiǎn)單，只需由服務(wù)器發(fā)送一個(gè)響應(yīng)標(biāo)頭即可。
CORS支持所有類(lèi)型的HTTP請(qǐng)求.
服務(wù)器端對(duì)于CORS的支持，主要就是通過(guò)設(shè)置Access-Control-Allow-Origin來(lái)進(jìn)行的。

JSONP

JSONP由回調(diào)函數(shù)和數(shù)據(jù)組成.JSONP只支持GET請(qǐng)求.JSONP的優(yōu)勢(shì)在于支持老式瀏覽器，以及可以向不支持CORS的網(wǎng)站請(qǐng)求數(shù)據(jù).
JSONP通過(guò)動(dòng)態(tài)<script>元素來(lái)使用,src屬性知道一個(gè)跨域URL,JSONP是有效的JavaScript代碼,瀏覽器可以跨域請(qǐng)求JS文件.
優(yōu)點(diǎn):簡(jiǎn)單易用,可以直接訪問(wèn)響應(yīng)文本,支持在瀏覽器和服務(wù)器之間雙向通信.
缺點(diǎn):1.JSONP是從其他域加載代碼執(zhí)行,存在不安全風(fēng)險(xiǎn).2.不好確定JSONP請(qǐng)求是否成敗.

通過(guò)修改document.domain來(lái)跨子域

使用window.name來(lái)進(jìn)行跨域

HTML5中新引進(jìn) window.postMessage方法來(lái)跨域傳送數(shù)據(jù)

flash

iframe

服務(wù)器設(shè)置代理頁(yè)面

圖像Ping

通過(guò)使用標(biāo)簽,利用網(wǎng)頁(yè)可以從任何網(wǎng)頁(yè)加載圖像原理.
圖像Ping常用于跟蹤用戶點(diǎn)擊頁(yè)面或動(dòng)態(tài)廣告曝光次數(shù).

2個(gè)缺點(diǎn):1.只支持GET請(qǐng)求.2.無(wú)法訪問(wèn)服務(wù)器的響應(yīng)文本.只能用于瀏覽器與服務(wù)器間的單項(xiàng)通信.

var img = new Image();
img.onload = img.onerror = function (){
alert("Done!");
};
img.src = "";

comet

一種更高級(jí)的ajax技術(shù).ajax是頁(yè)面向服務(wù)器請(qǐng)求數(shù)據(jù)的技術(shù).comet是服務(wù)器向頁(yè)面推送數(shù)據(jù)的技術(shù).

SSE (Server-Sent Events) 服務(wù)器發(fā)送事件

Web Sockets

Web Sockets的目標(biāo)是在一個(gè)單獨(dú)的持久鏈接上提供全雙工,雙向通信.

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com