æé纳
ä¸ãAjaxåçæ¯ä»ä¹
AJAXå
¨ç§°(Async Javascript and XML)ï¼å³å¼æ¥çJavaScript åXML
æ¯ä¸ç§å建交äºå¼ç½é¡µåºç¨çç½é¡µå¼åææ¯ï¼å¯ä»¥å¨ä¸éæ°å è½½æ´ä¸ªç½é¡µçæ
åµä¸ï¼ä¸æå¡å¨äº¤æ¢æ°æ®ï¼å¹¶ä¸æ´æ°é¨åç½é¡µ
Ajaxçåçç®åæ¥è¯´éè¿XmlHttpRequest对象æ¥åæå¡å¨åå¼æ¥è¯·æ±ï¼ä»æå¡å¨è·å¾æ°æ®ï¼ç¶åç¨JavaScriptæ¥æä½DOMèæ´æ°é¡µé¢
æµç¨å¾å¦ä¸ï¼
æ ¡é¿æ³æ¾ç主任æ±æ¥å·¥ä½ï¼å°±å§æç§ä¹¦å»å«ç主任èªå·±å°±æ¥çåå
¶ä»äºæ
ï¼ç´å°ç§ä¹¦åè¯ä»ç主任已ç»å°äºï¼æåç主任è·é¢å¯¼æ±æ¥å·¥ä½
Ajax请æ±æ°æ®æµç¨ä¸âæ ¡é¿æ³æ¾ç主任æ±æ¥ä¸ä¸å·¥ä½â类似ï¼ä¸è¿°ç§ä¹¦å°±ç¸å½äºXMLHttpRequest对象ï¼æ ¡é¿ç¸å½äºæµè§å¨ï¼ååºæ°æ®ç¸å½äºç主任
æµè§å¨å¯ä»¥åéHTTP请æ±åï¼æ¥çåå
¶ä»äºæ
ï¼çæ¶å°XHRè¿åæ¥çæ°æ®åè¿è¡æä½
äºãå®ç°è¿ç¨
å®ç°Ajaxå¼æ¥äº¤äºéè¦æå¡å¨é»è¾è¿è¡é
åï¼éè¦å®æ以ä¸æ¥éª¤ï¼
建 Ajaxçæ ¸å¿å¯¹è±¡ XMLHttpRequest对象
éè¿ XMLHttpRequest 对象ç open() æ¹æ³ä¸æå¡ç«¯å»ºç«è¿æ¥
æ建请æ±æéçæ°æ®å
容ï¼å¹¶éè¿XMLHttpRequest对象ç send() æ¹æ³åéç»æå¡å¨ç«¯
XMLHttpRequest 对象æä¾ç onreadystatechange äºä»¶çå¬æå¡å¨ç«¯ä½ çéä¿¡ç¶æ
æ¥å并å¤çæå¡ç«¯å客æ·ç«¯ååºçæ°æ®ç»æ å°å¤çç»ææ´æ°å° HTML页é¢ä¸
2.1å建XMLHttpRequest对象
éè¿XMLHttpRequest() æé å½æ°ç¨äºåå§åä¸ä¸ª XMLHttpRequest å®ä¾å¯¹è±¡
const xhr = new XMLHttpRequest();
1
2.2ä¸æå¡å¨å»ºç«è¿æ¥
éè¿ XMLHttpRequest 对象ç open() æ¹æ³ä¸æå¡å¨å»ºç«è¿æ¥
xhr.open(method, url, [async][, user][, password])
1
åæ°è¯´æï¼
methodï¼è¡¨ç¤ºå½åç请æ±æ¹å¼ï¼å¸¸è§çæGETãPOST
urlï¼æå¡ç«¯å°å
asyncï¼å¸å°å¼ï¼è¡¨ç¤ºæ¯å¦å¼æ¥æ§è¡æä½ï¼é»è®¤ä¸ºtrue
user: å¯éçç¨æ·åç¨äºè®¤è¯ç¨éï¼é»è®¤ä¸ºnull
password: å¯éçå¯ç ç¨äºè®¤è¯ç¨éï¼é»è®¤ä¸ºnull
2.3ç»æå¡ç«¯åéæ°æ®
éè¿ XMLHttpRequest 对象ç send() æ¹æ³ï¼å°å®¢æ·ç«¯é¡µé¢çæ°æ®åéç»æå¡ç«¯
xhr.send([body])
1
body: å¨ XHR 请æ±ä¸è¦åéçæ°æ®ä½ï¼å¦æä¸ä¼ éæ°æ®å为 null å¦æ使ç¨GET请æ±åéæ°æ®çæ¶åï¼éè¦æ³¨æå¦ä¸ï¼
å°è¯·æ±æ°æ®æ·»å å°open()æ¹æ³ä¸çurlå°åä¸
åé请æ±æ°æ®ä¸çsend()æ¹æ³ä¸åæ°è®¾ç½®ä¸ºnull
2.4ç»å®onreadystatechangeäºä»¶
onreadystatechange äºä»¶ç¨äºçå¬æå¡å¨ç«¯çéä¿¡ç¶æï¼ä¸»è¦çå¬çå±æ§ä¸ºXMLHttpRequest.readyState ,
å
³äºXMLHttpRequest.readyStateå±æ§æäºä¸ªç¶æï¼å¦ä¸å¾æ¾ç¤ºï¼
åªè¦readyStateå±æ§å¼ä¸ååï¼å°±ä¼è§¦åä¸æ¬¡readystatechangeäºä»¶
XMLHttpRequest.responseTextå±æ§ç¨äºæ¥æ¶æå¡å¨ç«¯çååºç»æ
举个ä¾åï¼
const request = new XMLHttpRequest()
request.onreadystatechange = function(e){
if(request.readyState === 4){ // æ´ä¸ªè¯·æ±è¿ç¨å®æ¯
if(request.status >= 200 && request.status <= 300){
console.log(request.responseText) // æå¡ç«¯è¿åçç»æ
}else if(request.status >=400){
console.log("é误信æ¯ï¼" + request.status)
}
}
}
request.open('POST','
request.send()
ä¸ãå°è£
éè¿ä¸é¢å¯¹XMLHttpRequest对象çäºè§£ï¼ä¸é¢æ¥å°è£
ä¸ä¸ªç®åçajax请æ±
//å°è£
ä¸ä¸ªajax请æ±
function ajax(options) {
//å建XMLHttpRequest对象
const xhr = new XMLHttpRequest()
//åå§ååæ°çå
容
options = options || {}
options.type = (options.type || 'GET').toUpperCase()
options.dataType = options.dataType || 'json'
const params = options.data
//åé请æ±
if (options.type === 'GET') {
xhr.open('GET', options.url + '?' + params, true)
xhr.send(null)
} else if (options.type === 'POST') {
xhr.open('POST', options.url, true)
xhr.send(params)
//æ¥æ¶è¯·æ±
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
let status = xhr.status
if (status >= 200 && status < 300) {
options.success && options.success(xhr.responseText, xhr.responseXML)
} else {
options.fail && options.fail(status)
}
}
}
}
使ç¨æ¹å¼å¦ä¸ï¼
ajax({
type: 'post',
dataType: 'json',
data: {},
url: '
success: function(text,xml){//请æ±æååçåè°å½æ°
console.log(text)
},
fail: function(status){请æ±å¤±è´¥åçåè°å½æ°
console.log(status)
}
})
温馨提示:答案为网友推荐,仅供参考