ajax配置要求,AJAX浅谈
ajax的含義
ajax是異步JavaScript和xml(asynchronous JavaScript and xml)：
利用XMLHttpRequest發請求
服務器返回XML格式的字符串，但后面一般使用JSON
JS解析XML，并更新局部頁面
代碼：
let httpRequest = new XMLHttpRequest() //聲明一個xmlhttprequest對象
httpRequest.open('GET', '/xxx') // 配置request
httpRequest.setRequestHeader('Content-Type', 'x-www-form-urlencoded') // 設置請求頭第二部分
httpRequest.onreadystatechange = ( => { //隨便放在哪個位置，監聽狀態的變化
if(httpRequest.readyState === 4) {
console.log("請求響應完畢")
console.log(httpRequest.status)
console.log(httpRequest.statusText)
if(httpRequest.status >= 200 && httpRequest.status < 300>) {
console.log("請求成功")
console.log(httpRequest.getAllResponseHeaders())
console.log(httpRequest.responseText)
let string = httpRequest.responseText //取得響應體
let object = window.JSON.parse(string) //把符合JSON語法的字符串轉換為JS對象
//JSON.parse是瀏覽器提供的
} else if(httpRequest.status >= 400) {
console.log('說明請求失敗')
}
}
})
httpRequest.send("設置request第四部分") //GET請求不會設置第四部分
用AJAX設置請求頭
第一部分GET /XXX HTTP/1.1 : httpRequest.open("get", "/XXX")
第一部分HOST: jack.com:8002 : httpRequest.open('get', "http://jack.com:8002/")
第二部分Content-Type : application/x-www-url-encoded : httpRequest.setRequestHeader("Content-Type", "application/x-www-url-encoded")
第四部分a = 1&b = 2 : httpRequest.send('a = 1&b = 2')
用AJAX獲取響應頭
第一部分HTTP/1.1 200 OK : httpReuqest.status & httpRequest.statusText
第二部分Content-Type : application/x-www-url-encoded : httpRequest.getResponseHeader("Content-Type")
所有的第二部分 : httpRequest.getAllResponseHeaders()
第四部分 : httpRequest.responseText
現在一般不使用XML,而使用JSON，JSON是道格拉斯寫的一本輕量型的文本語言
自己封裝jQuery的ajax函數
//傳入一個對象，該對象具有url,method等方法和回調函數。
window.jQuery.ajax = function({url, method, body, successFn, failFn, headers}) {
let request = new XMLHttpRequest()
request.open(method, url)
for(let key in headers) {
let value = headers[key]
request.setRequestHeader(key, value)
}
request.onreadystatechange = () => {
if(request.readystate === 4) {
if(request.status >= 200 && request.status < 300) {
successFn.call(undefined, request.responseText)
} else if(request.status >= 400) {
failFn.call(undefined, request)
}
}
}
request.send(body)
}
用promise規范重新封裝該函數：
window.jQuery.ajax = function({url, method, body, headers}) {
return new Promise(function(resolve, reject) {
let request = new XMLHttpRequest()
request.open(method, url)
for(let key in headers) {
let value = headers[key]
request.setRequestHeader(key, value)
}
request.onreadystatechange = () => {
if(request.readystate === 4) {
if(request.status >= 200 && request.status < 300) {
resolve.call(undefined, request.responseText)
} else if(request.status >= 400) {
reject.call(undefined, request)
}
}
}
request.send(body)
})
}
window.jQuery.ajax({
url: '/baidu.com',
method: 'GET',
headers: {
'Content-Type' : 'application/x-www-form-urlencoded'
}
}).then(
(responseText) => {
console.log(responseText)
},
(request) => {
console.log(request)
}
)
什么是同源策略？
協議+域名+端口一摸一樣
cors跨域 (Cross-Origin Resource Sharing)
就是告訴后端哪個域名可以訪問，后端node中寫入
response.setHeader('Access-Control-Allow-Origin', '你請求的網站所在')
一般現在跨域用cors跨域比較多
總結
以上是生活随笔為你收集整理的ajax配置要求,AJAX浅谈的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css箭头超链接,css超链接
- 下一篇： 剑三服务器文件在哪里,剑三服务器同步设置