JavaScript?-|?1????????1?JS???AJAX?o???¨

??????1???AJAX ??????

??????AJAX(é?3èˉ???o???é??è′??????ˉ) = Asynchronous JavaScript and XML???????-￥??? JavaScript ??? XML????????ˉ???????§??????o?o¤?o???????é?μ?o???¨??????é?μ???????????ˉ????1??°±??ˉ??¨???é??é????°???è????′??a???é?μ????????μ??????è???¤???′??°é?¨??????é?μ????????ˉ???AJAX ?????ˉ??°???????¨?èˉ-è¨????è????ˉ????§??????¨??°??????????????°??1?3??????ˉ????§???¨?o??????o???é????¨??????é?μ????????ˉ???é??è????¨?????°???????????¨è??è???°?é????°????o¤??￠???AJAX ??ˉ??￥??????é?μ?????°????-￥??′??°???è???????3?????ˉ??￥??¨???é????°???è????′??a???é?μ????????μ???????ˉ1???é?μ??????é?¨???è??è????′??°???????????????é?μ???????????¨ AJAX????|????é??è|???′??°?????1???è????¨??·?3¨????????ˉ???????o¤è?¨????-???????é??é????°???è????′??a???é?μé?μé?￠????????￥èˉ′ AJAX ??ˉ????§????????????¨?o¤??￠??°????1???′??°é?¨??????é?μ???è?o??ˉ???????-¤?????????é???????? AJAX è???§??????ˉ???

??????AJAX ??ˉ??o?o???°?????? Internet ??????????1????è??????????¨?????????

????????????a?????XMLHttpRequest ?ˉ1è±? (????-￥??????????????¨?o¤??￠??°???)

????????????a?????JavaScript/DOM (?????ˉ????¤o/?o¤?o?)

????????????a?￠???CSS (?????°???????1???·???)

????????????a?￡???XML (?????oè????￠??°????????????)

??????AJAX ???????????ˉ JavaScript ?ˉ1è±? XMLHttpRequest????????ˉ????§???ˉ???????-￥èˉ·?±?????????ˉ????1??°±??ˉ XMLHttpRequest èμ??o??o?????????ˉ??￥?????¨ JS ???????????¨?????oèˉ·?±??1??¤????????o????è????????è?????é???????¨??·???é??è??è????a?ˉ1è±????JS ??ˉ??¨???é??è??é?μé?￠????????μ?????? Web ????????¨?o¤??￠??°??????AJAX ??¨?μ?è§???¨??? Web ????????¨?1?é?′?????¨????-￥??°??????è?????HTTP èˉ·?±???????è????·?°±??ˉ??????é?μ???????????¨èˉ·?±??°?é??????????ˉ???è???????ˉ??′??aé?μé?￠???AJAX ??ˉ????§????????o? Web ????????¨è?ˉ???????μ?è§???¨?????ˉ????1??°±??ˉ AJAX ?o???¨?¨??o????????o??μ?è§???¨????13??°?????ˉ??¨?o????é????¨?????§??′??o????o???¨?¨??o?

??????é?￡?1??????????èˉ′???AJAX ?°±??ˉ??ˉ??￥è?? JS ???èˉ????????????¨????????°???????????????è????ˉ??ˉ??￥??¨???é????·??°é?μé?￠??????????????????????????¨èˉ???????è?????é????°????????ˉ??¨??￥??? JSON ??????è??è???o¤?o????é?????????1???ˉ??¨??￥?????°????o?è??è????¨???é????????è????ˉ??¨?o????é????¨?????§??′??o????o???¨?¨??o??????????è§?????o???¨?°±??ˉ??¨??·???????????¨????????????????°±??ˉ??￥??¤??-??¨??·è????￥??ˉ??|?-￡???????|????è????￥?-￡???????°±??′??￥????¤o??¨??·?????ˉ????|????è????￥é??èˉˉ???????¤oé??èˉˉ?????ˉ????1????é??è|???·??°é?μé?￠???

??????2???é?????????????¨

??????AJAX ?o???¨??ˉ????-￥??′??°???èˉ????????????¨????????°??????é?￡??°?o?????????¨??ˉ????1????è￥???￠?????????????????¨?°±???????o? PC ???????????¨?13????μ?è§????é?μ????????aé??è|???¨??°??????è????￥????o??????????????°±??ˉ??￥?μ?è§??ˉ1?o????é?μé?￠???è???o?é?μé?￠?????ˉè???-???¨??¨??a?oo??μè????-???é?￡???é??è|??¤??¤§?????????????1????è?????????????±???????′?????????￥è???o????é?μ?°±?-???¨??¨?ˉ1?o????????????¨???????ˉ??|?????o|???????????¨?????°?μa???????????¨?????????????????¨è·????????13?????¨?????μè???2????????1??¤??¤§?????o????????a?ooè???????o?1???ˉ??￥?????o????????¨??????è?3??ˉ?????o?1??±???????è￥??1???ˉ??￥?????o????????¨????ˉ??|?????????¨?????o?????μè???????§????????ˉ??￥???é??è????°????o?????????¨ WIFI ???è??è??è?ˉ????????????è??????°±??ˉ??￥???è?????????????????è??è???¨????è?????????????o?°±???????o?????????¨???è§?è?2?????a???è????§è???ˉ?è???·????????ˉ1è???????°??o??¨????????????è???·2???é?￡?1? Web ????????¨?°±??ˉ??ˉ??￥???????ˉ1????¤??oo?????????????????§è????′??o?¤§???

????????¨?-|?1? AJAX ???????°±???é??é???????a?oo????????¨????1??°±??ˉè|???¨?????o??-??o????????¨?¨??o??????1?????????è°?èˉ???￡??????é?????é??????????¨ WAMP ??￥??-??o????????¨????????°????????¨??-??o?¨??o????????¤??§?????¤§?????ˉ??￥é??????§?è?a?·±?????￠?????￥??-??o???è??é???°±??￥ WAMP ??o??????WAMP ??3 Windows ?????? Apache + Mysql + PHP é????????è￡???ˉ?￠?????1??°±??ˉ Win ?13??°??????????????¨?¨??o????è??é?????é???????¨ WampServer è?????????????¨è?ˉ?????????è??é?????è￡??????ˉ WampServer 2.5????¤§?????ˉ??￥????o|????′￠ wamp ?????°2.5?????????è?????è￡??????oè???°??¨??o?è￡???¨ D ?????????è￡????????1??????????????¨??o??????¨???é?￠??3???è§?????????a W ????????????é?????é????o???è?2?????ˉ??¨???????????1?????3é?????é??????????°????o???aé??é?1?????￠??o??-???????????￠???????1?????????￥?????￥?°±??ˉé??????o???????é?￠??ˉ?????¨???????????°???é???????1?3?????1?????????¨?2????é??é￠?????????¨è??é???1??????????????o??????°??¨ WampServer ?·2?????′??°??°3.0???????o??????1??????è￡??????????????????¨????o|????′￠é???????1?3????é????ˉ???????????????

??????é|?????????¨???è????¨?????????è￡??????????D:wampbinapacheapache2.4.9confhttpd.conf ??????

????????¨516è?????è??????′￠??3é??èˉ??????°???

#Include conf/extra/httpd-manual.conf

???????°????é?￠????o???·?????????

???????????????????????????D:wampbinapacheapache2.4.9confextrahttpd-vhosts.conf ??????

????????¨??￡??????????·?????|?????????1???

??????www.abc.com ??o??a?oo?????1??°????????ˉ??￥è?aè??????1????

????????????????????????C:WindowsSystem32driversetchosts ??????

???????·???????127.0.0.1 www.abc.com

??????é????°??ˉ??¨WAMP???

????????¨é??è|?????μ?èˉ????????°?é?μé?￠????-???¨ D:/wamp/www è·ˉ??????????????????????-???o index.html???????????¨?μ?è§???¨??°??????è????￥ abc.com ?°±??ˉ??￥????????????????-????é?μé?￠???

???????|????????????????????????ˉ????o|????′￠è§￡??3????3??????ˉè????ˉ80??ˉ??￡è￠??????¨?o????

??????è??é??é??è|??3¨?????????????????¨????????¨???????????????è????¨??-????????????

??????3???AJAX ??o???

??????é|??????????????????￥????????a AJAX ?o???¨????????????èˉ·?±??1?????¤oé????? TXT ??????

????????????é??è|????é?μé?￠????-???¨ WAMP ???è￡?????????? www ??1????????-????1??????°??o?????a???????¤1????????o ajax?????¨?o??-???¨ TXT ?????????????????o demo.txt???????????-??ˉ??￥é?????è????￥??1????-??????¨???????¤o?????????é??è????????è?a????1??????a?oo?????1?????¨?μ?è§???¨??-??????é?μé?￠????????1???èˉ???????é??????????1??o TXT ????????-????????1???

??????é??è?????é?￠???????????????????°±??ˉ??￥?????°??????é????? AJAX ????????¨?°±??ˉ???????????¨???èˉ?????????a??????????1???????è????a???????????1è?????????????????è?????????¤???????

??????è??é??é??è|??3¨????????ˉ?-???|é????????é??é￠??????¨?????¨ AJAX ?????????????????????é?????é????ˉ?????????????????????????????? HTML ???JS ?????????è￠?èˉ??????????????ˉ??|?é????ˉ UTF-8 ???è??é????ˉ GB2312??????é?￠????????-??¨?o?????¤o??? TXT ?????????é??è?¤è????￥è?±????????¨????-????é??è?¤????????o ANSI????|??????????è????￥?????ˉ?±??-??????¨????-?????????1??o???é?μé?￠????????????????????? UTF-8???é?￡?1???¨??1??????é???????????é?μ????°±????¤o????1±???????????￥??¨????-?????????????è|??3¨????????￠????????????????????????

?????????é?￠????????￥???????????? AJAX ????·￥????????????

??????4???XHR ?????o?ˉ1è±?

??????XHR ??ˉ XMLHttpRequest ??????????????ˉ AJAX ?????o????????¨?o???¨?????°???????????¨?o¤??￠??°??????

??????????????°??￡?μ?è§???¨???IE7+???Firefox???Chrome???Safari ??￥??? Opera???????????o XMLHttpRequest ?ˉ1è±????è??????????? IE ?μ?è§???¨(IE6)????????¨ ActiveXObject?????o?o??????1????§??μ?è§???¨?????ˉ??￥????????a??¤??-????|??????ˉ??? XMLHttpRequest ?ˉ1è±????????????oèˉ￥?ˉ1è±?????|?????????ˉ??????????????o ActiveXObject ???

???????????o????????°??￡?μ?è§???¨??? IE é?????????μ?è§???¨é????ˉ??? XMLHttpRequest ?ˉ1è±?????????￥??¨?????o?ˉ1è±????????1??°±?????¨????????1??§?¤?????o????è??é????a??ˉ?o?è§￡???????????¨ IE ?μ?è§???¨??- ActiveX ??ˉ???????????????????1??°±??ˉèˉ′ IE6 ??-??? AJAX ??ˉé??è???????a????????￥????????????è??èˉ′??ˉ??????????????ˉ??¨ IE6 ?μ?è§???¨??-?·2???é??è?¤???è￡??o????

????????¨???é?￠?????￡?????-?????¨?????¤??-????????¨?o? window.XMLHttpRequest ?????????é????￥é????¨?±????é????ˉ window ???????????a?±???§?????¨ JS ??-????|?????????¨?2????????1???????é??????????￥é??????ˉ??|????alert(a)???è???|?????????¨?2????????1?????±???§??????????????￥é?????è????ˉ undefined????ˉ??|????alert(window.a)???IE6 ?????ˉ??? XMLHttpRequest????????￥?|??????′??￥?????¨????°±?????￥é?????è???|??????????????1???o window ????±???§???é?￡?1??????ˉ undefined ?????a????1???¨ if ??¤??-èˉ-??￥??-??￡è?¨???????1??°±??ˉ fasle???è??è???-￡??ˉ??????é??è|???????

??????5???è????￥????????¨

???????°?èˉ·?±????é????°????????¨??????????????¨ XMLHttpRequest ?ˉ1è±???? open() ??? send() ??1?3????

oAjax.open('GET',true); oAjax.send();

??????open(method,url,async) è§????èˉ·?±?????±???????URL ??￥?????ˉ??|????-￥?¤????èˉ·?±????????????a?????° method?????¨?o?è§????èˉ·?±?????±???????GET ???

POST ???????o???a?????° URL?????¨?o?è?????????????¨????????¨????????°??????èˉ￥????????ˉ??￥??ˉ???????±?????????????????ˉ??|? .txt ??? .xml ??? .json??????è??????????¨è???????????????ˉ??|? .php (??¨??????????o??1???????è???¤???¨????????¨?????§è????????)???????????a?????° async?????¨?o?????1???ˉ??|????-￥???è?????true???????-￥?????? false???????-￥??????

??????send(string) ??¨?o??°?èˉ·?±????é????°????????¨????????° string ?????¨?o? POST èˉ·?±????

?????????é?￠??￥?????¤??aé??é￠????

??????(1)???GET è????ˉ POST???

??????GET ??? POST ?????¨?o?????o¤è?¨?????????????1??1????é????????è?¨??????????o¤é??è?¤??ˉ?????¨ GET ??1??????

????????? POST ????ˉ????GET ??′???????1???′???????1??????¨?¤§é?¨????????μ???é??è????¨???

???????????ˉ?????¨??￥????????μ??-???èˉ·?????¨ POST èˉ·?±????

????????????a?????????3??????¨????-????????????′??°????????¨?????????????????°????o???????

????????????a????????????????¨???é???¤§é????°??????POST ?2??????°???é??é???????????

????????????a?￠??????é??????????a??￥?-???|?????¨??·è????￥??????POST ?ˉ? GET ??′?¨3????1???′??ˉé?????

??????????????¨?????¤??-??1?3????GET ??¨?o?è?·?????°???????ˉ??|??μ?è§?è′′?-????POST ??¨?o?????????°???????1??°±??ˉ???????????¨???é????°???????ˉ??|???¨??·?3¨??????

??????GET ??? POST ?????o??????

??????GET?????¨ URL ??-???è????°???????????¨??§??±?????1é???°???????è?? URL ???é???o|????¤§??o 4K ??° 10K???é???o|??ˉ???é???????????

??????POST????????¨ URL ??-???è????°??????????ˉ1?????¨??§??o?????1é???¤§?????1é????ˉè????°2G???????¤§?°±??ˉ??￥?????¨??§??????????-￡????????¨?°±??a??? https ???è?????

??????????-????GET ???????-????POST ?2????????-????

???????????￥???AJAX ???è??é????o GET ??1????????????é?¤?o? GET ??? POST ??1?3??1??¤?è?????????¤??§???1?3????????????¨???è????ˉè????¤?§????

????????¨ AJAX ??o??????????????-????????o???????????¨?o? GET èˉ·?±????é?￡?1?è??????????aé??é￠??°±??ˉ????-????é??é￠???????è°?????-?????°±?￥??ˉ??????a???????????????????1???????????????????èˉ????é???o|?°±??????????o????è???°±???????o?????-????é?￡?1?????-????é??????°±??ˉ?????a???????????¨????????????????????????????????ˉ????-￡??????????????¨???èˉ·?±?????1????é????ˉ????????°èˉ??????????????????-èˉ??????°???è?ˉ???è|????????o????è?3?°??ˉ???????è|????????¤????é?￡?????§è????·èˉ′???????-??2??????ˉ??a?￥????è￥????è?????????1?é??é￠???￠???????????￥????????? AJAX ??-????????????????????????è?????????o?????1??°±??ˉèˉ′?·2???????o??????°????-????é?￡?1??|????è??????????? TXT ??????????????￥????o?????-????????|??????￠???????????°??1??????é?????????·????è????????????-????????¤o???è???????????????¤o???è???°±??ˉ????-????é??é￠????Chrome ??? FF ????-?è???????￥é?????IE ?μ?è§???¨???????-??ˉ?è????￥é?????è????aé??é￠???¨????¤?????????????????????|??￥????o???°??°????ˉ??|???ˉ?????aè???￥¨?????????é??è|?????????′??°?????°???è???￥¨??·??????è????a??·????????′??¨???????|???????é???-￠????-????é?￡?1?è????a??·????°±???é???????°????????′??°????????￥?|??????ˉ????????¨????????°???????°±é??è|????????-?é???-￠??????????-?????·￥???????????ˉ??1??? URL ??￥????-???????????????a??°???èˉ?????????????????-¤è|?é???-￠????-??????aè|?è?? URL ?????′??¨???????1??°±??ˉ??? URL ?·?????????a??ˉ?????? ID ???

?????????????13?????¨?μ?è§????é?μ??????é??è§?è??è???§???·?-?????ˉ??|???¨?????¨????o|????′￠??????????o|?????????è?1è·??o???aé????·???????????ˉ??????????1??-??o?????1????https://www.baidu.com/s?wd=?????ˉ&rsv_spt=1&rsv_iqid=0xe9146bd400052360&issp=1&???è????aé????·???è?1?????°????°±è￠??§°??o GET ??°???????|????????????? TXT ?????????è?1?1??????￥ GET ??°??????http://abc.com/ajax/demo.txt?a=2??????è????ˉ??￥è?a????1?????1??-??o?????1????è????·?ˉ1?????????????¤o?????1??ˉ?2????????????±?????????é?￡?1??ˉ1?o?????-????é??é￠???????????°±??ˉ??￥?ˉ1 oAjax.open('GET','/ajax/demo.txt',true) ????o???a?????° URL ???????o??????1???'ajax/demo.txt?t=' + Math.random()???Math.random() ??1?3?è??????????a 0-1 ?1?é?′???é????o?°???°???é?￡?1??ˉ????è????????é????????????1???ˉ??￥?·???? 'ajax/demo.txt?t=' + new Date().getTime()???getTime()??¨?o?è?·???????????????é?′??3????1??°±??ˉ1970?1′?????|??°??????????ˉ??§???°???é?￡?1??????¨ get Time() è??????????°????ˉ???????é??????????·????????o??ˉ?ˉ??§???°????????￥1?§??1?????°±???????¤??§???ˉè???????????????????′??¨??????è????·?°±è??????￥????è§￡??3????-?é??é￠????

??????è??é??è|??3¨????????ˉ?????¨?????¨ GET èˉ·?±?????????o?o?é???????a??ˉ?????°????-?????????????é??è|???? URL ?·?????????a??ˉ?????? ID?????? URL ?ˉ????é??????????·???

???????|????é??è|?é??è?? GET ??1?3????é???????ˉ?????ˉ??￥????????ˉ?·??????¨ URL ??-???

???????|????é??è|???? HTML è?¨???é?￡??·???è?? POST ??°????????ˉ??￥?????¨ setRequestHeader() ??￥?·???? HTTP ?¤′???????????¨ send() ??1?3???-è§???????é???????°??????

??????setRequestHeader(header,value) ??¨?o????èˉ·?±??·???? HTTP ?¤′???????????a?????° header è§?????¤′???????§°????ˉ??|? Content-type???????o???a?????°è§?????¤′?????????

??????(2)???true è????ˉ false???

??????????-￥???????-￥?????¨??°???????′???-???????-￥???????????o?¤?????o????èμ·??????è??????-￥??o???????????￥????1??°±??ˉ???????-￥????????ˉ??¨ JS ??-????-￥???????-￥????|???μ?????°???????′???-??°??°??ˉ????????????????-￥???????????o?o???????????????￥???????12??????????o?????12??|???????o????è??????-￥?????o?¤???a?o??????ˉ??￥???èμ·??????è?? AJAX ?¤?????°±??ˉ??¨??￥???????-￥?????????????|???? AJAX ?·￥?????¨????-￥?????1??????????1??°±??ˉ?o?????????????????????￥???????????o?????aèˉ·?±????????????o???é???????1??￠???è????aèˉ·?±???¨1???é?????????????°????o????é?￡?1???¨è????aèˉ·?±????????1???????é?μé?￠??-????????????é?????é????￥???????-??-???¨é??è·??-??o??????·????°±?????¨?2??3????????o????è???|??????ˉ????-￥???èˉ?????°±?2?é??é￠??o?????ˉ??|?????????????????????o????1?????????o???é????￠?2??????′??°è????￥???é?￡?1???¨?????′??°?1???????è????ˉ??￥??????????????????

??????AJAX ????????ˉ????-￥ JavaScript ??? XML???Asynchronous JavaScript and XML??????XMLHttpRequest ?ˉ1è±??|????è|???¨?o? AJAX ???èˉ??????? open() ??1?3???? async ?????°???é??è???????o true????????￥ AJAX ???è??é????o????-￥???è??????ˉ1?o? Web ??????è????￥èˉ′??????é??????-￥èˉ·?±???ˉ?????a?·¨?¤§???è???-￥???????¤???¨????????¨??§è???????????é????????è′1????????¨ AJAX ??o??°?1???????è????ˉè????????èμ·?o???¨?¨??o????èμ·???è??????-￠???

??????è??é??è?? AJAX???JS ???é???-????????????¨???????o????è????ˉ??¨?-????????????¨????o??????§è????????è???-￥??????????o??°±??a????ˉ1????o?è??è???¤???????

??????????????¨????-￥???????1??°±??ˉ async = true ?????????é??è§??????¨????o??¤??o? onreadystatechange ?o??????-????°±??a???????????§è??????????°???

??????6???????????¨????o?

??????XMLHttpRequest ?ˉ1è±???? responseText ??? responseXML ?±???§??¨?o?è?·?????￥è?a????????¨???????o?????1??°±??ˉè?·??????????????¨è?????????????ˉ???

???????|??????￥è?a????????¨???????o???ˉ XML???è?????é??è|??????o XML ?ˉ1è±?è??è??è§￡???????°±?????¨ responseXML ?±???§???

???????|??????￥è?a????????¨???????o??1?é?? XML????°±?????¨ responseText ?±???§???èˉ￥?±???§è??????-???|??2??￠??????????o????????-¤??ˉ??￥??′??￥?????¨???

document.getElementById('div1').innerHTML = oAjax.responseText;

??????è??é??èˉ′??° XML ??????????°±?????????????????? AJAX ??°???????1??°±??ˉ??°????±?????????°????±??????ˉ??￥?????o????¤??§?????ˉ??|???-??????è?±????????°?-??-?????????????????????¨??? JSON???????°±??ˉ????§?è??é???o§?????°????o¤??￠?????????XML ????ˉ1??￥èˉ′é?￡?°±??ˉ?????a??¤è??????-???¨?????o??????é????ˉ??¨????o?è?????????¨??o???-?????¨???é???????? XML ??-èˉ??????°????????°??¨??ˉ??￥èˉ′??ˉè|?è￠??·??±°?o??????°??¨????¨??o?????1?é????ˉ?????¨ JSON????????o????-???°???é??????????μ??????XML è|??ˉ? JSON ?¤§????¤????è????·????μaè′1??|???????μaè′1????????¨èμ??o?????????￥??¨?????¨ AJAX è?·??????????????¨è?????????????ˉ?????????è??é???????¨ responseText è????a?±???§???

??????7???èˉ·?±????????????§

??????XMLHttpRequest ?ˉ1è±???? readyState ?±???§è?????èˉ·?±??????????????????????èˉ·?±?è￠????é????°????????¨????????????é??è|???§è??????o???o?o?????o??????????????ˉ???? readyState ??1??????????°±???è§|??? onreadystatechange ?o???????readyState ?±???§?-???? XMLHttpRequest ??????????????ˉ???

??????

XMLHttpRequest ?ˉ1è±?????????aé??è|?????±???§???

????????????onreadystatechange????-???¨?????°(????????°???)????ˉ???? readyState ?±???§??1??????????°±???è°???¨èˉ￥?????°???

?????????readyState????-???? XMLHttpRequest ??????????????? 0 ??° 4 ???????????????

??????????????????0???èˉ·?±???a????§???????è???2????è°???¨ open() ??1?3????

??????????????????1???????????¨è????￥?·2??o???????1??°±??ˉè????￥????·2è°???¨ open() ??1?3?????-￡??¨???é??èˉ·?±????

??????????????????2???èˉ·?±??·2??￥??????è????￥?????????open() ??1?3???????????·2?????°??¨é?¨????o??????1???

??????????????????3???èˉ·?±??¤??????-????1????è§￡???????-￡??¨è§￡???????o??????1???

??????????????????4??? èˉ·?±??·2????????????????o??·2?°±??a???????o??????1è§￡??????????????ˉ??￥??¨??￠??·??ˉè°???¨?o????

????????????status???èˉ·?±???????????1??°±??ˉ HTTP ????????????200???OK???404?????a?????°é?μé?￠???

????????¨ onreadystatechange ?o??????-?????????è§???????????????¨????o??·2????￥?è￠??¤???????????¤?????????§è??????????????

????????? readyState ?-??o? 4 ???????????o 200 ??????è?¨?¤o????o??·2?°±??a???

??????è??é??è|??3¨?????? onreadystatechange ?o????è￠?è§|??? 5 ??????0 - 4???????ˉ1?o???? readyState ????ˉ???a?????????

???????|????????????-?-???¨?¤???a AJAX ?????????é?￡?1??°±??ˉ??￥?????¨???è°??????°??????è°??????°??ˉ????§???￥?????°??￠??????é???????|?????a?????°????????°????o?èˉ￥??o?????o XMLHttpRequest ?ˉ1è±????????????a??????????????°????1???o?ˉ???a AJAX ??????è°???¨èˉ￥?????°???

??????èˉ￥?????°è°???¨?o?èˉ￥?????? URL ??￥????????? onreadystatechange ?o?????????§è???????????????ˉ????è°???¨??ˉè??????°?????????????

??????8???AJAX ??????

??????AJAX ??????????°±è·???°???????′???-??????????????μèˉ???ˉ?????·?????·??????é|??????????????????a?????o????????????????1????????1??°±??ˉè|?????????aè???¤????????????°??¨é?￡é????ˉ?oo??????é?¨???è?????????-￥?°±??ˉ??￥?????￥?o???????????°±??ˉ??¨??·??????è°??????¨??·????°±??ˉ???????-¤????????oè????￥èμ·??￥?????o?????????é??é??????????????è??é?????????|??????￥é???o?????°±??ˉ??￥è??è?????????-￥?o????é?￡?°±??ˉèˉ′????????????????oo?????μèˉ????è?ˉ?????ˉè|????èˉ′????????????????ˉ1??1èˉ′???é?￡?1????????°±??ˉ????ˉ1??1èˉ′????????ˉè????ˉè?a?·±èˉ′?????a????o????è?3?°????????ˉ1??1èˉ′??1??￥????1??°±??ˉ?????a????o????

???????????μèˉ?é??è|?4??a?-￥éa¤???????????????????????¨?????? AJAX ???????1???ˉé??è|?4??a?-￥éa¤???é|????????°±????????o AJAX ?ˉ1è±????????o?è????a?ˉ1è±??1??????????è??è??è?????é?￠????????????é?￡?1???￥?????￥è|????????°±??ˉè????￥??°????????¨????°±???????o??????μèˉ???¨??·???è????￥??°????????¨?1???????????°±????????¨???èˉ?????????¨???é??è|?????1???????????????ˉè????ˉ????????¨??￠???????????a????????????è?a?·±é?????è|??????ˉ?o????????????￠?????1????????ˉè??è????·??????èˉ′é?￡????????¨é????ˉ????????????????oo????????????????????ˉè?????è·??????¨é?￡????????????????????????????????￥???????°±???????????????èˉ?????????¨??????è|???a??a?????????é?￡?1????????-￥?°±??ˉ???é??èˉ·?±??????????????-￥?°±??ˉ??￥???è???????????è?·???????????¨???????o?????1??°±??ˉ?????????é??è|????é?￡??a???????????????????????￥???

?????????????13???é??èˉ′ AJAX?????????è????a??ˉ?????a?ˉ1?¤?????§°??????????-￡??¨?μ?è§???¨???é?¨??ˉé??è?? XMLHttpRequest ?ˉ1è±???￥?????? AJAX èˉ·?±???????è???????ˉ AJAX ????-￡????ˉ1è±????

?????????é?￠????????????????????1???è??4??a?-￥éa¤???AJAX ??￡????????·?????????è???¨????

?????????é?￠?????￡????????¨è??è????????????-￥????????¤??-?μ?è§???¨???????????¨è??è????°??a????-￥?o??????? readyState ?±???§????????o4???????°±??ˉèˉ·?±????????o?????????ˉèˉ·?±????????1??????￡è?¨èˉ·?±???????????|????èˉ??????oé???o????è????????????-???¨?-??????μ?ˉ?è?′??oé???o????é?￡?1??1??????ˉèˉ·?±????????o?????1??°±??ˉ??????èˉ??????????è????ˉ?¤±è′￥???é???????ˉèˉ·?±????????o?????????￥é??è|?è??????-￥?????¨ status ?±???§??¤??-???è?￥??o200????°±??ˉ???????o?????????¨è?a????1??????a?oo?????1?????????é?￠??? demo?????1??????é??????????1??o?????????????????-????????1???????????ˉ??￥èˉ??????1????????? URL????°±??ˉ???????????????é?????????????1??????é?????????????1??o?¤±è′￥???404????1??°±??ˉ??a?????°é?μé?￠???

???????|?????ˉ???????????????§è??4??a?-￥éa¤?????? AJAX ?¨??o??????ˉé???????1??????????1???1??????è§￡????????ˉ?????¨èμ·??￥?ˉ?è??éo???|????????￥????????ˉ??￥???????°?è￡???o?????a?????°?????¨?????¨???è°???¨?°±?￥?????¤??o????

?????????é?￠?°?è￡???? ajax ?????°????????a?????°???????????a?????° url?????ˉ??????è·ˉ??????????o???a?????° fnSucc???????ˉ???????????????????è°???¨?????°???????????a?????° fnFaild???????¤±è′￥???è°???¨????????°???è??é???1??????ˉ???????????μ???é??é??è|??¤±è′￥?????§è???????a?????°????????￥é??è|?????????a??¤??-?????a?????? fnFaild è????a?????°?????￥è????￥????1??°±??ˉ????1??o??¤±è′￥?????§è??????????°???é?￡?1?è??????????????è°???¨??????

????????ˉ??￥??¨ www ??1????????-??°??o?????a???????¤1????????o js???????????????è?1?????￡????¤??????|?-???o ajax.js??????é?￠??ˉ?°?è￡??￥??1????????o???¨???

????????????è|????????????¨èˉ???? demo.txt è????a?????????????????ˉ??o?o?è?·???è????a????????-????????1???é?￡?1??|????è?·???è????????????????￠???????????????èˉ?????????ˉ??????è|?è°???¨ fnSucc è????a?????°????1??°±??ˉ???????????§è????????è°??????°??????????????ˉ????????a?????°??? str???è????a?????°??ˉ??￥è?a????1????str ????????¨?°±??ˉ???????????¨è??????????????????????1?????￥è????￥???è????a str ?????°?°±??ˉ fnSucc(oAjax.responseText) ??-???è????￥??????

??????????¤±è′￥????????????è°???¨ fnFaild è????a?????°????1??°±??ˉ?¤±è′￥?????§è????????è°??????°???é?￡?1?è????a?¤±è′￥???è°???¨?????°?1???ˉ????????a?????°??????fnFaild(oAjax.status)?????o?o???1???è°?èˉ???????????1???ˉ??￥???????????￥?????a?????°è????￥?????¨??￥????¤oèˉ·?±??¤±è′￥??????????????¨????-￡???????????-?????? AJAX èˉ·?±??¤±è′￥???????1??????ˉè????1?????a alert???è????·????¤a????￥?????????￥??ˉ??￥è?a????1?????o???′???????￥??????1?????￥????¤o??¨??·???è??é????oè???¤§????13?????¨è°?èˉ? AJAX ?¨??o?????????????è|????????¤±è′￥?????§è????????è°??????°?????|????|?????¤±è′￥???èˉ????é?￡?1???ˉè???2??????????????o????

??????9???AJAX ?o???¨

??????èˉ·?±??????aé???????? TXT ???????????¨?o?è§￡?o? AJAX ????????????????????1???????°±??ˉ??￥?????°????????ˉ??¨????-￡???????????-???è????·??????????¤a?¤§??????é????¨é????????è?1??????èˉ′ AJAX ??ˉ????§????????????¨?o¤??￠??°????1???′??°é?¨??????é?μ???è?o??ˉ???é?￡?1???￠????§°?1???oè?o??ˉ???????-¤??????é??è|??????¨ AJAX ???èˉ·?±?????o???′?????¨?????′?¤??????????è￥????è????·???è????????????????°????-???¨?????·???????ˉ??|?èˉ′????????ˉ??￥???èˉ·?±???¨?????°??????????|????èˉ·?±??????aè￡??????°?????? JSON ?????????

??????(1)???èˉ??????°???

??????é|?????????°??o?????a TXT ??????????????o arr.txt???é??????-??????a??°???????ˉ??|?[1,2,3,4,5,6]????????¨?1??????? ajax ???????¤1?????????????°±??ˉ??￥????§????????¨??o??o????

?????????é?￠???????????-???str ??ˉ????????¨è??????????????????????1?????1??o??￥?1?????????ˉ??????????1??????°???????2????é??é￠????é?￡?1???1??o??°??????é???o|?????′è????? 13?????°??????é???o|????o?èˉ￥??ˉ 6 ??????????1??????ˉ 13 ??￠??????????????1??oè????a?ˉ1è±?????±?????????????è????? string????°???????é?????????????°????????????????????ˉ?????a?-???|??2???è????ˉ??o????1???￠?????????é??è?? AJAX ?????1???èˉ??????????????ˉ1è±?é????ˉ??￥?-???|??2??￠????-???¨??????é?￡?1?è????a?-???|??2???é???o|?°±?o?èˉ￥??ˉ13?????1?????·???????????1????|????è|?????????a?-???|??2??-?-??????°???????????o??￥????°±è|??????¨ eval(string) ?????°???èˉ￥?????°??ˉè??????????a?-???|??2????1????????????o JavaScript ??￡?????￥??§è??????1??°±??ˉ??ˉ??￥????????aèˉ-??￥??-????????1è§￡?????o JS ??ˉ??￥èˉ???????èˉ-??￥???èˉ￥??1?3???a??￥???????§??-???|??2?????o?????°????|???? string ?????°?????ˉ????§??-???|??2???é?￡?1?èˉ￥??1?3??°???????????????1?????°è????????é?￡?1??????¨èˉ￥??1?3??1??????????è???????°???????????1???é???o|????°±?2????é??é￠??o???????????1???ˉ??￥???è????a?????°????-???¨?????a???é????-?????￥??￥????ˉ?é?1?????????è????? eval() ??????è??é???????o?¤§????????¨???é???????¨??-??¨??°???????????μ?1?????¤????

??????(2)???èˉ???? JSON ??°???

??????é|???????è????ˉé??è|???°??o?????a JSON ???????????ˉ??￥????????o json.json?????ˉ??￥é??????-???￥?????a??°????ˉ1è±?????ˉ??|?[{a:9,b:6,c:15},{a:5,b:7,c:12}]??????????????¨ ajax ???????¤1????????????????§????????¨??o????

?????????é?￠?????????????????¨ eval() ?????°è§￡?????o??￥?1???????è????ˉ?????a??°??????è???????°?????????0??a????′?????1??°±??ˉ{a:9,c:15}??????è????ˉ?????a JSON ??°???????????￥è????? obj???é?￡?1????è????????0??a????′???- a ???????????ˉ??￥?????°????????¨??1?3????èˉ??????°????????1?3???ˉ?????·??????é?￡?|???? JSON ??-????-??????°?????′?¤????????o?????ˉ??|???ˉ????????¨??·?????ˉ???è|??|???????èˉ??????????????1???￥???è?¨??￠???????¤o??¨???é?μ??-??￠???

?????????é?￠??ˉ JSON ??¨??·?????ˉ??°????????ˉ??￥?¤?????????￠?????????è??é????¨????-? JSON ???é??è|??3¨???????????????????????|????????-??o??°??-????o?????°±???é??????-???o UTF-8 ??????????????o?o???1?????o??????????????ˉ??￥???è????a??????????????o date.json ???

??????(3)????????o DOM ????′?????¤o JSON ??°???

?????????é?￠?????￡?????????èμ·??￥?1??2?????1?é???o|???é????ˉ????o???o????????￥èˉ??????¨?μ?è§???¨??????è?a????1??????a?oo?????1?????1???èˉ???????é???1???????JSON ????????-?-??????°???????°±?????￥??o???è?¨?????￠???????¤o??¨é?μé?￠??????è??é????a??ˉ?????????????o??????a???????????????è????ˉ??￥??????????1???·?????????è????ˉ??￥?????o?????aè?¨??????è???????′????￥????????¤o???

??????è??é????¨???????????°?o??????a??1?3??????¨?¤???? AJAX èˉ·?±??????° JSON ??°???????o????????1??°±??ˉ????????¨è???????? JSON ?-???|??2???é??è|???????????ˉ1è±?????¤?????????ˉ??￥????????¨ eval() ??1?3????è????ˉ?????¨ new Function() ??￡????????°??? Function() ???é???°±?±?????o? eval()??????è???????¨ jQuery ????????? $.getJSON() ??1?3?è?·???????????¨è????????é?￡?1??°±??ˉ??￥????????¨ eval() ??1?3??o??????·??????????|???????

???????-¤?????? arr ?°±???è￠?è§￡???????????a JSON ?ˉ1è±??o??????????????????¨??a??ˉé?????????°???°????????￥??°??°??o??? li ????′???-???

??????10???AJAX ??????

??????????????a??ˉé????1è?2?o?????o? AJAX ?????o????????￥èˉ??????°è??é??????°±??ˉ??￥?????¨ AJAX ???????o???o???????o???¨?o?????????ˉ AJAX ???????????¨?o??-¤?????????????¤?é?????é???o§è???????????é??????o???¨????ˉ??|?????o??¤§????3?????|?????????¨ AJAX ??-??o????|??????????????￥??????′??? AJAX ?o¤?o??¨??o????è?????è·¨??????è?????JSONP?-????è|???3????-￡????????? AJAX è??é?¨è?o??ˉ????????????è·ˉè?????é?????

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!