淺談ajax請(qǐng)求技術(shù)
1.寫在前面:
閱讀要求:
具有一定的HTML、CSS、JavaScript、Json基礎(chǔ)
2.什么是ajax
Ajax:即”Asynchronous Javascript And XML”(異步JavaScript和XML),是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開發(fā)技術(shù)。
3.為什么使用ajax
在動(dòng)態(tài)網(wǎng)頁(yè)開發(fā)技術(shù)中,客戶端(通常是瀏覽器)與服務(wù)端進(jìn)行數(shù)據(jù)交互是十分頻繁的,如何節(jié)省網(wǎng)絡(luò)資源,提供良好的用戶體驗(yàn)是十分關(guān)鍵的。Ajax采用異步請(qǐng)求方式,使得不用刷新整個(gè)頁(yè)面就可以和后臺(tái)實(shí)現(xiàn)數(shù)據(jù)交互,從而更新內(nèi)容...
4.如何使用原生的ajax
使用ajax技術(shù)的關(guān)鍵點(diǎn)落在了XMLHttpRequest(注:ie5、ie6使用ActiveXObject)對(duì)象上,因此利用好該對(duì)象是關(guān)鍵
注意:
function loadData() { //創(chuàng)建XMLHttpRequest對(duì)象 var xmlHttpRequestObj = {}; //創(chuàng)建json對(duì)象,傳送json格式數(shù)據(jù)到服務(wù)端 Var jsonObj = {}; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari xmlHttpRequestObj =new XMLHttpRequest(); } else { // IE6, IE5 xmlHttpRequestObj =new ActiveXObject("Microsoft.XMLHTTP"); } //當(dāng)請(qǐng)求狀態(tài)改變時(shí)會(huì)調(diào)用xmlHttpRequestObj .onreadystatechange方法 xmlHttpRequestObj .onreadystatechange = function() { if (xmlHttpRequestObj .readyState == 0 ) { Alert(“open()函數(shù)未執(zhí)行”); } else if(xmlHttpRequestObj.readyState == 1) { Alert(“open()函數(shù)已執(zhí)行,send()函數(shù)未執(zhí)行”); } else if(xmlHttpRequestObj.readyState == 2) { Alert(“send()函數(shù)已執(zhí)行,頭部和狀態(tài)碼可以獲取”) } else if(xmlHttpRequestObj.readyState == 3) { Alert(“頭部已收到,解析響應(yīng)體”); } else if(xmlHttpRequestObj.readyState == 4) { Alert(“請(qǐng)求完成”); If (xmlHttpRequestObj.status == 200) { Alert(“響應(yīng)就緒,反序列化json對(duì)象填充數(shù)據(jù)到頁(yè)面”); } else if (xmlHttpRequestObj.status == 400) { Alert(“頁(yè)面丟失”); } else { Alert(“服務(wù)異常”); } } } //method:請(qǐng)求方式:GET、POST、PUT、DELETE... Url:請(qǐng)求的地址 asnyc:是否采用異步 xmlHttpRequestObj.open("method", "url", async); //設(shè)置請(qǐng)求頭,POST請(qǐng)求格式需要載入,其他不需要 xmlHttpRequestObj.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //請(qǐng)求數(shù)據(jù),參數(shù)為jsonObj json對(duì)象 xmlHttpRequestObj.send(jsonObj); }
以上這篇淺談ajax請(qǐng)求技術(shù)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
ajax中用josnp接收josn數(shù)據(jù)的實(shí)現(xiàn)方法
下面小編就為大家分享一篇ajax中用josnp接收josn數(shù)據(jù)的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12Ajax 提交表單數(shù)據(jù)到入庫(kù)的全盤操作流程分享
以下是Ajax 提交表單數(shù)據(jù)到入庫(kù)的全盤操作流程,希望本文對(duì)廣大php開發(fā)者有所幫助,感謝閱讀本文2014-01-01實(shí)現(xiàn)AJAX異步調(diào)用和局部刷新的基本步驟
AJAX?可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下,與服務(wù)器交換數(shù)據(jù),并且更新部分網(wǎng)頁(yè),下面這篇文章主要給大家介紹了關(guān)于實(shí)現(xiàn)AJAX異步調(diào)用和局部刷新的基本步驟,需要的朋友可以參考下2022-03-03Jquery具體實(shí)例介紹AJAX何時(shí)用,AJAX應(yīng)該在什么地方用
ajax是一個(gè)非常方便的工具,具有和表單相同的功能完成前端和后臺(tái)之間的交互,起到局部刷新的作用,那么,大家知道ajax該何時(shí)用,用在哪些地方嗎?下面小編給大家分享Jquery具體實(shí)例介紹AJAX何時(shí)用,AJAX應(yīng)該在什么地方用,需要的朋友可以參考下2015-10-10淺析IE針對(duì)Ajax請(qǐng)求結(jié)果的緩存問(wèn)題
我們通過(guò)一個(gè)ASP.NET MVC應(yīng)用來(lái)重現(xiàn)IE針對(duì)Ajax請(qǐng)求結(jié)果的緩存。在一個(gè)空ASP.NET MVC應(yīng)用中我們定義了如下一個(gè)默認(rèn)的HomeController,其中包含一個(gè)返回當(dāng)前時(shí)間的Action方法GetCurrentTime。2015-09-09ajax快速解決參數(shù)過(guò)長(zhǎng)無(wú)法提交成功的問(wèn)題
下面小編就為大家?guī)?lái)一篇ajax快速解決參數(shù)過(guò)長(zhǎng)無(wú)法提交成功的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12ajax 實(shí)現(xiàn)微信網(wǎng)頁(yè)授權(quán)登錄的方法
這篇文章主要介紹了ajax 實(shí)現(xiàn)微信網(wǎng)頁(yè)授權(quán)登錄的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03ajax實(shí)現(xiàn)標(biāo)簽導(dǎo)航
ajax實(shí)現(xiàn)標(biāo)簽導(dǎo)航...2006-11-11Ajax 向數(shù)據(jù)庫(kù)修改和添加功能(較簡(jiǎn)答)
這篇文章主要介紹了Ajax 向數(shù)據(jù)庫(kù)修改和添加功能(較簡(jiǎn)答),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03