核心:xmlhttprequest物件(xhr)
xhr.timeout = 1000 //設定超時時間(ms)
xhr.ontimeout = function(){}
xhr.setrequestheader(header, value) //設定http頭部資訊
//get:
xhr.open("get", url, isasync)
xhr.send(null)
//post:
xhr.open("post", url, isasync)
xhr.send(serialize(form)) //請求資料
//使用formdata則不必明確的setrequestheader:
var data = newformdata();
xhr.send(data)
xhr.abort() //取消非同步請求
狀態碼 xhr.readystate
(0)---open---(1)--->send---(2)--->收到部分響應資料(3)--->接收並解析完成,可以在客戶端呼叫(4)
2xx:成功處理
3xx:重定向,304:not modified,可用本地快取
4xx:客戶端請求錯誤
5xx:服務端處理錯誤
跨域
網域名稱、協議、埠,其中之一不同就算跨域;瀏覽器有同源策略,預設禁止ajax跨域訪問;
可以跨域載入資源的:
跨域源資源共享:
一、 cors草案(cross-origin resource sharing)
用自定義的http頭部讓瀏覽器於伺服器進行溝通。需附加額外的origin頭部,包含請求頁面的源資訊。
需伺服器端配合,根據頭部資訊決定是否給予響應。
二、
jsonp
(json with padding)
被包含在函式呼叫中的json,利用跨域載入資料;
functionhandleresponse(response)//var script = document.createelement("script")
script.src = src
}
原生ajax原理
不需要外掛程式的支援,原生 js 就可以使用 使用者體驗好 不需要重新整理頁面就可以更新資料 減輕服務端和頻寬的負擔 缺點 搜尋引擎的支援度不夠,因為資料都不在頁面上,搜尋引擎搜尋不到 ie9及以上 ie9以下 xhr 物件中的 open 方法是來配置請求資訊的 第乙個引數是本次請求的請求方式 ge...
原生ajax實現
方法 描述open method,url,async 規定請求的型別 url 以及是否非同步處理請求。method 請求的型別 get 或 post。url 檔案在伺服器上的位置。async true 非同步 或 false 同步 如果不寫預設非同步 send string 將請求傳送到伺服器。st...
原生態ajax和jquery實現ajax
js原生版實現 1 建立xmlhttprequest物件 2 然後用這個物件操作open 方法 即 xmlhttprequest.open post url,true 3 用這個物件操作onreadystatechange這個屬性 即xmlhttprequest.onreadystatechange...