
1.ʲôAJAX?
AJAXȫΪAsynchronous JavaScript and XML첽JavaScriptXMLһִʽҳӦõҳʹã
ʹXHTML+CSS֣
ʹXMLXSLTݽز
ʹXMLHttpRequestWeb첽ͨţ
ʹJavascriptDocument Object Modelж̬ʾ
ʹJavaScriptʹݡ
2.봫ͳwebӦñȽ
ͳWebӦýû һHTTP,дٷһµHTHLҳͻ, ÿͻύʱ,ͻֻܿеȴ,ֻһκСĽֻӷ˵õܼһ,ҪһHTML ҳ,ûÿζҪ˷ʱʹȥ¶ȡҳ档˷ÿӦõĽҪӦõӦʱڷ Ӧʱ䡣ûӦȱӦöࡣ
˲ͬAJAXӦÿԽͲȡرݣʹSOAPһЩ XMLWeb Serviceӿڣڿͻ˲JavaScriptԷӦΪڷ֮佻ݴ٣ǾܿӦ ӦáͬʱܶĴڷĿͻ˻ɣWebĴʱҲˡ
3.AJAXĹԭ
AjaxĹԭ൱ûͷ ֮ˡм(AJAX),ʹûӦ첽еûύ,Щ֤ݴȶ AjaxԼ, ֻȷҪӷȡʱAjaxΪύ
Ajax JavaScriptXMLHTTPRequestDOMɣͨXmlHttpRequest첽ӷݣ ȻJavaScriptDOMҳ档ؼһǴӷݡ˽⼸
(1).XMLHTTPRequest
Ajaxһصˢҳд(ֳˢ¸ҳ),һصҪXMLHTTPXMLHTTPRequest
XMLHttpRequest
| abort() | ֹͣǰ |
| getAllResponseHeaders() | HTTPӦײΪ/ֵԷ |
| getResponseHeader("header") | ָײĴֵ |
| open("method","URL",[asyncFlag],["userName"],["password"]) | ԷĵámethodGETPOSTPUTurlURLURL3ѡIJǷ첽û |
| send(content) | |
| setRequestHeader("header", "value") | ָײΪṩֵκײ֮ǰȵopen()headerһ ('post'һҪ ) |
XMLHttpRequest
| onreadystatechange | ״̬ı¼ÿ״̬ıʱᴥ¼ͨһJavaScript |
| readyState | ״̬5ȡֵ0 = δʼ1 = ڼأ2 = Ѽأ3 = У4 = |
| responseText | Ӧݵı |
| responseXML | ӦݵļDOMXMLĵ ԽΪһDOM |
| responseBody | ص⣨ıʽ |
| responseStream | ص |
| status | HTTP״̬루磺404 = "ļĩҵ" 200 ="ɹ" ȵȣ |
| statusText | ص״̬ıϢ HTTP״̬ӦıOKNot Foundδҵȵȣ |
(2).JavaScript
JavaScriptһдʹõıԡ
(3).DOM Document Object Model
DOM ǸHTMLXMLļʹõһAPIṩļĽṹԸıеăݼɼ䱾ǽҳScriptԹͨ WEBԱɲļԡ¼Զչ֣磬documentʹļtable HTMLıȵȣЩɵScriptȡáһHTMLXHTMLҳҲԿһṹ ݣЩݱDOMDocument Object ModelУDOMṩҳиĶд֧֡
(4).XML
չıԣExtensible Markup LanguageһֿŵġչġԽṹѾΪݺĵı,Ӧó
(5).ۺ
Ajax棬ʵһȽϸӵ JavaScriptӦóûдDOMݡJavaScriptAjaxȡϢһдDOM ʹҳ컯عҲҳѾϺıҳݣһֱͨJavaScriptDOMڹ㷺ʹõķҪʹҳ̬ ҪڲĻҪⲿȡݣǰûݲͨDOMıҳݵģڣXMLHTTPRequest ڲҳ¶дϵݣʹûﵽ١
AjaxʹWEBеĽӦ÷루Ҳ˵ַ룩ǰûĽģַķ룬ڷֹ ǼԱҳɵWEBӦóЧʡҲڵķϵͳҲǰһЩĹתͻˣڿͻ õĴ
4.AJAXȱ
(1).AJAXŵ
<1>.ˢ¸ݡ
AJAXŵڲˢҳǰͨάݡʹWebӦóΪѸݵӦûϷЩûиıϢûȴʱ䣬dzõû顣
<2>.첽ͨš
AJAXʹ첽ʽͨţҪûIJиѸٵӦŻBrowserServer֮ĹͨٲҪݴ䡢ʱ估
<3>.ǰ˺ͺ˸ƽ⡣
AJAXǰһЩĹתͻˣÿͻõʹĸԼռͿóɱҼĸAJAXԭǡȡݡ̶ȵļӦԷɵĸվܡ
<4>.ڱ㷺֧֡
AJAX ڱIJ㷺ֵ֧ļҪСҪͻJavaScriptִСAjaxij죬һЩ Ajaxʹ÷ijҲͬҲһָƵļΪЩ֧JavaScriptûṩܡ
<5>.Ӧ÷롣
AjaxʹWEBеĽӦ÷루Ҳ˵ַ룩ڷֹٷǼԱҳɵWEBӦóЧʡҲڵķϵͳ
(2).AJAXȱ
<1>.AJAXɵBackHistoryܣƵƻ
ڶ̬ҳ£ûصǰһҳ״̬Ϊܼʷ¼еľ̬ҳ档һҳһѾ̬Ĺҳ֮IJdzûͨϣ˰ťܹȡǵǰһβAjaxӦóУ⽫ʵ֡
˰ťһwebվҪܣûjsкܺõĺAjaxһȽص⣬Ϊûϣܹͨ ȡǰһβġôûа취ǿ϶ģùGmail֪GmailõAjax⣬Gmail ǿԺ˵ģǣҲܸıAjaxĻƣֻDzõһȽϱЧİ취û˰ťʷ¼ʱͨʹһ صIFRAMEҳϵı磬ûGoogle MapsеʱһصIFRAMEнȻӳAjaxԪϣԱ㽫Ӧó״ָ̬ʱ״̬
ǣȻ˵ǿԽģĿɱǷdzߵģAjaxҪĿٿġAjaxһdzص⡣
һ صĹ۵Ϊʹö̬ҳʹûڽijض״̬浽ղؼСĽҲѳֶ֣ʹURLƬϱʶͨΪ ê㣬URL#IJָ֣٣ûصָijӦó״̬JavaScript̬ê㣬ʹAjaxӦ óܹڸʾݵͬʱê㡣ЩҲͬʱڲֺ֧˰ťۡ
<2>.AJAXİȫ⡣
AJAX ûܺõûͬʱҲITҵµİȫвAjaxͬҵݽһֱͨʹÿڲᱩ¶ ǰݺͷAjaxԶԿͻ˵İȫɨ輼ڿʹԶ˷ϽµĹAjaxҲԱһЩ֪ İȫ㣬վŲSQLע빥ͻCredentialsİȫ©ȵȡ
<3>.ֽ֧
ֱ֧ȽʹòAJAXݵӶϵͳܡ
<4>.ƻ쳣ơ
ٴĿǰAjax.dllAjaxpro.dllЩAjaxǻƻ쳣Ƶġ⣬ڿDzһ ϼûصĽܡһ飬ֱAjaxʹͳformύģʽɾһݡǵĵԴ˺ܴѡ
<5>.ΥURLԴλijԡ
磬ҸһURLַAjaxҲڸURLַ濴ĺURLַ¿DzͬġԴλijġ
<6>.AJAX֧ܺܺƶ豸
һЩֳ豸ֻPDAȣڻܺܺõ֧Ajax˵ֻϴAjaxվʱĿǰDzֵ֧ġ
<7>.ͻ˹ʣ̫ͻ˴ɿϵijɱ
дӡ׳ Ƚ϶ࣨjsļAJAXͨټĺܶ˴ڷŵ˿ͻˣƻWebԭб
5.AJAXע㼰úͲó
(1).ע
Ajax ʱӳ١ûӦ֮ļҪؿǡûȷĻӦûǡԤݣ߶ XMLHttpRequestIJǡʹûеӳ٣ûϣģҲġͨĽǣʹһӻ ûϵͳڽк̨ڶȡݺݡ
(2).Ajaxó
<1>.Ľ
<2>.εĵ
<3>.ٵûûĽӦ
<4>.ͶƱyes/noʹij
<5>.ݽй˺Ͳݵij
<6>.ͨıʾԶɵij
(3).Ajaxó
<1>.ּı
<2>.
<3>.ĵ
<4>.滻ı
<5>.ԳֵIJ