參考資料
JavaScript權(quán)威指南(第6版)
內(nèi)容總覽
腳本化HTTP:用JavaScript操控HTTP
一谒主、HTTP
HTTP穗泵,即超文本傳輸協(xié)議吁峻,是一種無(wú)狀態(tài)協(xié)議(無(wú)記憶)卖漫。一個(gè)完整的HTTP請(qǐng)求過(guò)程宣旱,通常有下面7個(gè)步驟:
i.建立TCP連接
ii.Web瀏覽器向Web服務(wù)器發(fā)送請(qǐng)求命令
iii.Web瀏覽器發(fā)送請(qǐng)求頭信息
iv.Web服務(wù)器器應(yīng)答
v.Web服務(wù)器發(fā)送應(yīng)答頭信息
vi.Web服務(wù)器向?yàn)g覽器發(fā)送數(shù)據(jù)
vii.Web服務(wù)器關(guān)閉TCP連接
二仅父、Ajax
Ajax描述了一種主要使用腳本操縱HTTP的Web應(yīng)用架構(gòu)。Ajax應(yīng)用的主要特點(diǎn)是使用腳本操縱HTTP和Web服務(wù)器進(jìn)行數(shù)據(jù)交換浑吟,不會(huì)導(dǎo)致頁(yè)面重載贺纲。Web應(yīng)用可以使用Ajax技術(shù)把用戶的交互數(shù)據(jù)記錄到服務(wù)器中星瘾;也可以只顯示簡(jiǎn)單頁(yè)面昆著,之后按需加載額外的數(shù)據(jù)和頁(yè)面組件來(lái)提升應(yīng)用的啟動(dòng)時(shí)間冬三。
三、XMLHttpRequest
使用XHR發(fā)送HTTP請(qǐng)求的步驟:
1.實(shí)例化XMLHttpRequest對(duì)象
2.調(diào)用request.open(method,url)指定方法和url
3.使用request.setRequestHeader()設(shè)置請(qǐng)求頭(非必要)
4.利用request.onreadystatechange監(jiān)聽(tīng)響應(yīng)
5.通過(guò)判斷request.readystate==4&&request.status==200判斷請(qǐng)求是否完成且成功
6.解析響應(yīng)
7.request.send()發(fā)送請(qǐng)求
代碼示例如下:
function getText(url,callback){
var request = new XMLHttpRequest(); //創(chuàng)建新請(qǐng)求 request.open("GET",url); //指定待獲取URL request.onreadystatechange = function(){ //定義事件處理程序
//如果請(qǐng)求完成燎字,則它是成功的
if(request.readyState === 4 && request.status === 200){
//獲取響應(yīng)的類型
var type = request.getResponseHeader("Content-type");
//確保響應(yīng)是文本
if(type.match(/^text/))
callback(request.responseText); //把響應(yīng)主體傳遞給回調(diào)函數(shù)
};
request.send(null); //立即發(fā)送請(qǐng)求
}
四腥椒、jquery中的Ajax
jquery內(nèi)部封裝了Ajax的工具函數(shù),方便開(kāi)發(fā)者的使用候衍。這些常用的工具函數(shù)都基于一個(gè)底層函數(shù):jQuery.ajax
1.$( ).load( url [,data] [,complete] )
2.$.get( url [, data ] [, success ] [, dataType ] )
3.$.post( url [, data ] [, success ] [, dataType ] )
4.$.ajax( url [, settings ] )
5.$.getJSON( url [, data ] [, success ] )
注:可跨域
6.$.getScript( url [, success ] )
注:可跨域
五笼蛛、跨域請(qǐng)求的方法
1.XHR2
XHR2通過(guò)在HTTP響應(yīng)中選擇發(fā)送合適的CORS(Cross-Origin Resource Sharing,跨域資源共享)允許跨域訪問(wèn)網(wǎng)站蛉鹿。
2.JSONP
使用<script>元素作為Ajax傳輸?shù)募夹g(shù)稱為JSONP伐弹。
注:jQuery.ajax()支持get方式的跨域,本質(zhì)是采用jsonp的方式來(lái)完成的
3.jQuery中的$.getJSON()或$.getScript()
注:jQuery不支持POST方式跨域