如题所述
ç¨ajaxçå±é¨å·æ°æ¥ç»ç½ç«æåç¨æ·ä½éªæ们已ç»ç¨è¿å¾å¤äºï¼ajaxå·²ç¶æ为äºå端å¼åæéè¦çâå·¥å
·âä¹ä¸ã
ä½æ¯ï¼ææ³åºè¯¥ä¼æä¸å°äººå¨ä½¿ç¨ajaxçæ¶åé½å¨ä¾èµäºjQueryæè prototypeæè å ¶ä»jsåºãä½ç°å®æ¯ï¼å设æä¸å¤©ä¸ä¸ªé¡¹ç®ä¸è½å¼å ¥ä»»ä½ä¸ä¸ªjsåºï¼åªè½ç¨åçjså代ç ï¼é£ä½ æä¹åï¼åæè æ¯ä¸ä¸ªé常ç®åç页é¢ï¼ä½æ¯è¦ç¨å°ajaxï¼é¾é就为äºä¸è¿ä¹ä¸ä¸ªajax请æ±è¦å¼ç¨ä¸ä¸ªjqè¿ä¹å¤§çjsåºï¼ææ³è¿æ¯ä¸å¼å¾çï¼æ以æ们åºè¯¥å¦ä¼ç¨åççjsæ¥åajaxï¼å¹¶ä¸æå®å°è£ 好以便äºä»¥å使ç¨ã
ç±äºä¹å使ç¨è¿jqçajaxèä¸è§å¾ä»ä½¿ç¨èµ·æ¥æºèæçï¼æ以æå¨å°è£ ajaxçæ¶åä¸æ¹é¢èå»äºå¾å¤ä¸å¸¸ç¨çåæ°åªçä¸äºæ常ç¨çå 个åè½ï¼å¦ä¸æ¹é¢å°½éä¿æå®åæç使ç¨é£æ ¼ã
æä¸å ±åªçäºäºä¸ªåæ°ï¼ä»ä»¬åå«æ¯åéæ¹å¼ï¼typeï¼ãå请æ±çurlï¼urlï¼ãæ¯å¦ä¸ºå¼æ¥è¯·æ±ï¼asyncï¼ãåéçåæ°ï¼dataï¼ãä¼ è¾æåçåè°å½æ°ï¼successï¼ï¼å½æ°ä»£ç å¦ä¸:
/* å°è£ ajaxå½æ°
* @param {string}opt.type httpè¿æ¥çæ¹å¼ï¼å æ¬POSTåGET两ç§æ¹å¼ï¼é»è®¤ä½¿ç¨GET
* @param {string}opt.url åé请æ±çurl
* @param {boolean}opt.async æ¯å¦ä¸ºå¼æ¥è¯·æ±ï¼true为å¼æ¥çï¼false为åæ¥ç
* @param {object}opt.data åéçåæ°ï¼æ ¼å¼ä¸ºå¯¹è±¡ç±»å
* @param {function}opt.success ajaxåé并æ¥æ¶æåè°ç¨çåè°å½æ° */
function ajax(opt) {
opt = opt || {};
var type = opt.type || 'GET';
type = type.toUpperCase() || 'GET';
var url = opt.url || '';
var async = opt.async || true;
var data = opt.data || null;
var success = opt.success || function () {};
var xmlHttp = null;
if (XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
var params = [];
for (var key in data){
params.push(key + '=' + data[key]);
}
var dataStr = params.join('&');
if (type === 'POST') {
xmlHttp.open(type, url, async);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
xmlHttp.send(dataStr);
}
else {
xmlHttp.open(type, url + '?' + dataStr, async);
xmlHttp.send(null);
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
success(xmlHttp.responseText);
}
};
}
以对象çå½¢å¼åå½æ°çåæ°è¿æ¯æ¯è¾çµæ´»çï¼ä¸ç¨ææ³¥äºåæ°ä¸ªæ°çé®é¢ãä½è¿å®¹æåºç°ä¸ä¸ªé®é¢ï¼å°±æ¯ä½¿ç¨åæ°çæ¶åå¾æå¯è½åæ°æ²¡ç»å´å¨å½æ°å é¨ä½¿ç¨äºï¼æ¯å¦å¨è°ç¨å½æ°æ¶å¿äºåsuccessåè°å½æ°ï¼èå®ä¹çæ¶åå´ç¨å°äºä»ï¼è¿å°±ä¼æ¥éäºï¼å 为successæ¯undefinedäºãæ以为äºé¿å è¿ç§æ åµæè§å¾æ好å¨å°è£ å½æ°çæ¶åå°½éç»æ¯ä¸ä¸ªåæ°ä¸ä¸ªé»è®¤å¼ï¼å¦æè°ç¨çæ¶åæªç»åºæ个åæ°é£ä¹ä»å°±ä½¿ç¨é»è®¤å¼ä»£æ¿ï¼è¿æ ·å°±ä¸ä¼åºç°ä¸è¿°æ åµäºã
æ¥ä¸æ¥ä¸é¢æ¯å建XMLHttpRequest对象ï¼åäºä¸¤ç§å建æ¹å¼æ¯ä¸ºäºå ¼å®¹IEææçåæ³ï¼æ§çæ¬çIEæµè§å¨ä¸æ¯æXMLHttpRequestæé å½æ°ï¼IEæä»èªå·±ç¬ç¹çæé å½æ°æ¥æ¯æajaxé£å°±æ¯ActiveXObjectæé å½æ°ã
å建好äºXMLHttpRequest对象ï¼æ¥ä¸æ¥åçæ¯å¯¹åéåæ°dataç转æ¢ï¼å¨ä½¿ç¨ajaxå½æ°çæ¶ådataä¹ç¨jsonçæ°æ®æ ¼å¼ä¼æä¸ç§äº²åæï¼å 为大é¨åajaxä¼ è¾çæ¶åè¿åæ°æ®é½ä½¿ç¨jsonæ ¼å¼ï¼æ以åéçæ¶åä¹ä½¿ç¨jsonæ ¼å¼æ¾å¾å¾å好ãè¿ééè¦å°{a: b, c: d}çæ ¼å¼è½¬æ¢ä¸ºa=b&c=dçæ ¼å¼ã
ç¶åæ¯å¯¹"POST"å"GET"两ç§ä¸åçåéæ¹å¼åå¤çãGETæ¹æ³æ¯è¾ç®åï¼ç´æ¥ææ´ç好çæ°æ®æ¥å¨openæ¹æ³çurlåæ°çåé¢å°±è¡äºï¼è¦è®°å¾å¨urlåé¢å ä¸"?"ï¼ï¼sendæ¹æ³ä¹ä¸ç¨å¸¦åæ°äºï¼å 为åæ°å·²ç»å¨urlåé¢å¸¦çåè¿å»äºï¼æ以sendæ¹æ³çåæ°ç´æ¥ç»ä¸ªnullï¼POSTæ¹æ³è¿éæ个åï¼å¦æä¸æ³¨æå¯è½ä¼å¾ç¦æ¼ä¸ºä»ä¹ä¼å¾ä¸å°æ³è¦çç»æï¼é£å°±æ¯éè¦è®¾å®Content-Type头信æ¯ï¼æ¨¡æHTTPçPOSTæ¹æ³åéä¸ä¸ªè¡¨åï¼è¿æ ·æå¡å¨æä¼ç¥éå¦ä½å¤çä¸ä¼ çå 容ãsendæ¹æ³ä¸åæ°çæäº¤æ ¼å¼åGETæ¹æ³ä¸urlçåæ³ä¸æ ·ï¼ä¹æ¯a=b&c=dæ ¼å¼ã注æopenæ¹æ³å¿ é¡»æ¾å¨è®¾å®å¤´ä¿¡æ¯çåé¢ï¼å¦åä¹ä¼æ¥éãasyncåæ°å¯ä»¥æ¯trueä¹å¯ä»¥æ¯falseï¼true代表使ç¨å¼æ¥æ¹å¼è°ç¨ï¼false代表使ç¨åæ¥æ¹å¼è°ç¨ï¼çæå½ç¶ä½¿ç¨ajaxæ¯ä¸å®ç¨å¼æ¥çï¼è¿éåªæ¯æä¾ä¸ä¸ªéæ©ï¼èä¸ä»çé»è®¤å¼ä¹æ¯trueã
æåéè¦æ³¨åä¸ä¸ªonreadystatechangeäºä»¶ï¼å½XMLHttpRequest对象çreadyStateå±æ§çäº4äºï¼ä»£è¡¨æ¶å°å®æ´çæå¡å¨ååºäºï¼ï¼åæ¶statuså±æ§çäº200ï¼ä»£è¡¨æå¡å¨ååºçç¶æå¼ä¸ºOKï¼ç¶ææ£å¸¸ï¼å°±å¯ä»¥å¤å®è¿æ¬¡ajaxä»åéè¿ç¨å°ååºè¿ç¨å ¨ç¨ä¼ è¾æåäºï¼æ们å¯ä»¥å¯¹è¿åçæ°æ®åä¸äºå¤çï¼æè¦å¤çç代ç åå¨successå½æ°ä¸ï¼ajaxæåå°±ä¼è°ç¨ä¹ã
// 使ç¨ç¤ºä¾
ajax({
method: 'POST',
url: 'test.php',
data: {
name1: 'value1',
name2: 'value2'
},
success: function (response) {
// codes here
}
});
è¿ä¸ªajaxå½æ°å¾ç®å代ç éä¹å¾å°ï¼å·²ç»åºæ¬æ»¡è¶³æçæ¥å¸¸ä½¿ç¨éæ±äºï¼ä»¥å使ç¨ä¹ä¸ç¨ä¾èµjsåºæè æ¯æ¬¡åä¸éäºãå¦æ以åè¿ææ´å¤å ¶ä»åè½è¦ä½¿ç¨ï¼åå¾éé¢å ã
ä½æ¯ï¼ææ³åºè¯¥ä¼æä¸å°äººå¨ä½¿ç¨ajaxçæ¶åé½å¨ä¾èµäºjQueryæè prototypeæè å ¶ä»jsåºãä½ç°å®æ¯ï¼å设æä¸å¤©ä¸ä¸ªé¡¹ç®ä¸è½å¼å ¥ä»»ä½ä¸ä¸ªjsåºï¼åªè½ç¨åçjså代ç ï¼é£ä½ æä¹åï¼åæè æ¯ä¸ä¸ªé常ç®åç页é¢ï¼ä½æ¯è¦ç¨å°ajaxï¼é¾é就为äºä¸è¿ä¹ä¸ä¸ªajax请æ±è¦å¼ç¨ä¸ä¸ªjqè¿ä¹å¤§çjsåºï¼ææ³è¿æ¯ä¸å¼å¾çï¼æ以æ们åºè¯¥å¦ä¼ç¨åççjsæ¥åajaxï¼å¹¶ä¸æå®å°è£ 好以便äºä»¥å使ç¨ã
ç±äºä¹å使ç¨è¿jqçajaxèä¸è§å¾ä»ä½¿ç¨èµ·æ¥æºèæçï¼æ以æå¨å°è£ ajaxçæ¶åä¸æ¹é¢èå»äºå¾å¤ä¸å¸¸ç¨çåæ°åªçä¸äºæ常ç¨çå 个åè½ï¼å¦ä¸æ¹é¢å°½éä¿æå®åæç使ç¨é£æ ¼ã
æä¸å ±åªçäºäºä¸ªåæ°ï¼ä»ä»¬åå«æ¯åéæ¹å¼ï¼typeï¼ãå请æ±çurlï¼urlï¼ãæ¯å¦ä¸ºå¼æ¥è¯·æ±ï¼asyncï¼ãåéçåæ°ï¼dataï¼ãä¼ è¾æåçåè°å½æ°ï¼successï¼ï¼å½æ°ä»£ç å¦ä¸:
/* å°è£ ajaxå½æ°
* @param {string}opt.type httpè¿æ¥çæ¹å¼ï¼å æ¬POSTåGET两ç§æ¹å¼ï¼é»è®¤ä½¿ç¨GET
* @param {string}opt.url åé请æ±çurl
* @param {boolean}opt.async æ¯å¦ä¸ºå¼æ¥è¯·æ±ï¼true为å¼æ¥çï¼false为åæ¥ç
* @param {object}opt.data åéçåæ°ï¼æ ¼å¼ä¸ºå¯¹è±¡ç±»å
* @param {function}opt.success ajaxåé并æ¥æ¶æåè°ç¨çåè°å½æ° */
function ajax(opt) {
opt = opt || {};
var type = opt.type || 'GET';
type = type.toUpperCase() || 'GET';
var url = opt.url || '';
var async = opt.async || true;
var data = opt.data || null;
var success = opt.success || function () {};
var xmlHttp = null;
if (XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
var params = [];
for (var key in data){
params.push(key + '=' + data[key]);
}
var dataStr = params.join('&');
if (type === 'POST') {
xmlHttp.open(type, url, async);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
xmlHttp.send(dataStr);
}
else {
xmlHttp.open(type, url + '?' + dataStr, async);
xmlHttp.send(null);
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
success(xmlHttp.responseText);
}
};
}
以对象çå½¢å¼åå½æ°çåæ°è¿æ¯æ¯è¾çµæ´»çï¼ä¸ç¨ææ³¥äºåæ°ä¸ªæ°çé®é¢ãä½è¿å®¹æåºç°ä¸ä¸ªé®é¢ï¼å°±æ¯ä½¿ç¨åæ°çæ¶åå¾æå¯è½åæ°æ²¡ç»å´å¨å½æ°å é¨ä½¿ç¨äºï¼æ¯å¦å¨è°ç¨å½æ°æ¶å¿äºåsuccessåè°å½æ°ï¼èå®ä¹çæ¶åå´ç¨å°äºä»ï¼è¿å°±ä¼æ¥éäºï¼å 为successæ¯undefinedäºãæ以为äºé¿å è¿ç§æ åµæè§å¾æ好å¨å°è£ å½æ°çæ¶åå°½éç»æ¯ä¸ä¸ªåæ°ä¸ä¸ªé»è®¤å¼ï¼å¦æè°ç¨çæ¶åæªç»åºæ个åæ°é£ä¹ä»å°±ä½¿ç¨é»è®¤å¼ä»£æ¿ï¼è¿æ ·å°±ä¸ä¼åºç°ä¸è¿°æ åµäºã
æ¥ä¸æ¥ä¸é¢æ¯å建XMLHttpRequest对象ï¼åäºä¸¤ç§å建æ¹å¼æ¯ä¸ºäºå ¼å®¹IEææçåæ³ï¼æ§çæ¬çIEæµè§å¨ä¸æ¯æXMLHttpRequestæé å½æ°ï¼IEæä»èªå·±ç¬ç¹çæé å½æ°æ¥æ¯æajaxé£å°±æ¯ActiveXObjectæé å½æ°ã
å建好äºXMLHttpRequest对象ï¼æ¥ä¸æ¥åçæ¯å¯¹åéåæ°dataç转æ¢ï¼å¨ä½¿ç¨ajaxå½æ°çæ¶ådataä¹ç¨jsonçæ°æ®æ ¼å¼ä¼æä¸ç§äº²åæï¼å 为大é¨åajaxä¼ è¾çæ¶åè¿åæ°æ®é½ä½¿ç¨jsonæ ¼å¼ï¼æ以åéçæ¶åä¹ä½¿ç¨jsonæ ¼å¼æ¾å¾å¾å好ãè¿ééè¦å°{a: b, c: d}çæ ¼å¼è½¬æ¢ä¸ºa=b&c=dçæ ¼å¼ã
ç¶åæ¯å¯¹"POST"å"GET"两ç§ä¸åçåéæ¹å¼åå¤çãGETæ¹æ³æ¯è¾ç®åï¼ç´æ¥ææ´ç好çæ°æ®æ¥å¨openæ¹æ³çurlåæ°çåé¢å°±è¡äºï¼è¦è®°å¾å¨urlåé¢å ä¸"?"ï¼ï¼sendæ¹æ³ä¹ä¸ç¨å¸¦åæ°äºï¼å 为åæ°å·²ç»å¨urlåé¢å¸¦çåè¿å»äºï¼æ以sendæ¹æ³çåæ°ç´æ¥ç»ä¸ªnullï¼POSTæ¹æ³è¿éæ个åï¼å¦æä¸æ³¨æå¯è½ä¼å¾ç¦æ¼ä¸ºä»ä¹ä¼å¾ä¸å°æ³è¦çç»æï¼é£å°±æ¯éè¦è®¾å®Content-Type头信æ¯ï¼æ¨¡æHTTPçPOSTæ¹æ³åéä¸ä¸ªè¡¨åï¼è¿æ ·æå¡å¨æä¼ç¥éå¦ä½å¤çä¸ä¼ çå 容ãsendæ¹æ³ä¸åæ°çæäº¤æ ¼å¼åGETæ¹æ³ä¸urlçåæ³ä¸æ ·ï¼ä¹æ¯a=b&c=dæ ¼å¼ã注æopenæ¹æ³å¿ é¡»æ¾å¨è®¾å®å¤´ä¿¡æ¯çåé¢ï¼å¦åä¹ä¼æ¥éãasyncåæ°å¯ä»¥æ¯trueä¹å¯ä»¥æ¯falseï¼true代表使ç¨å¼æ¥æ¹å¼è°ç¨ï¼false代表使ç¨åæ¥æ¹å¼è°ç¨ï¼çæå½ç¶ä½¿ç¨ajaxæ¯ä¸å®ç¨å¼æ¥çï¼è¿éåªæ¯æä¾ä¸ä¸ªéæ©ï¼èä¸ä»çé»è®¤å¼ä¹æ¯trueã
æåéè¦æ³¨åä¸ä¸ªonreadystatechangeäºä»¶ï¼å½XMLHttpRequest对象çreadyStateå±æ§çäº4äºï¼ä»£è¡¨æ¶å°å®æ´çæå¡å¨ååºäºï¼ï¼åæ¶statuså±æ§çäº200ï¼ä»£è¡¨æå¡å¨ååºçç¶æå¼ä¸ºOKï¼ç¶ææ£å¸¸ï¼å°±å¯ä»¥å¤å®è¿æ¬¡ajaxä»åéè¿ç¨å°ååºè¿ç¨å ¨ç¨ä¼ è¾æåäºï¼æ们å¯ä»¥å¯¹è¿åçæ°æ®åä¸äºå¤çï¼æè¦å¤çç代ç åå¨successå½æ°ä¸ï¼ajaxæåå°±ä¼è°ç¨ä¹ã
// 使ç¨ç¤ºä¾
ajax({
method: 'POST',
url: 'test.php',
data: {
name1: 'value1',
name2: 'value2'
},
success: function (response) {
// codes here
}
});
è¿ä¸ªajaxå½æ°å¾ç®å代ç éä¹å¾å°ï¼å·²ç»åºæ¬æ»¡è¶³æçæ¥å¸¸ä½¿ç¨éæ±äºï¼ä»¥å使ç¨ä¹ä¸ç¨ä¾èµjsåºæè æ¯æ¬¡åä¸éäºãå¦æ以åè¿ææ´å¤å ¶ä»åè½è¦ä½¿ç¨ï¼åå¾éé¢å ã
温馨提示:答案为网友推荐,仅供参考