Ajax中文手册

原作者介绍---和可扩展标记语言(XML)，在网络浏览器和服务器之间传送或接受数据的技术。2.AJAX实例AJAX可以用来创建更多交互式的网络应用程序。3.AJAX源代码简要分析上一章节效果的代码原理4.AJAX与数据库AJAX可以用来和数据端进行数据的交互联通。5.使用AJAX制作留言本使用已有的AJAX教程，制作一个属于自己的留言本吧....Ajax实例---可以用来创建更多交互式的网络应用程序。AJAXExampleAJAX实例IntheAJAXexamplebelowwewilldemonstratehowawebpagecancommunicatewithawebserveronlineasauserentersdataintoawebform.在以下的AJAX范例中，我们将了解到当用户以网页格式输入数据时一个网页是如何与网络服务器连接的。TypeaNameintheBoxBelow在下面的框中输入姓名*实际操作请前往W3SchoolsFirstName:错误!未找到引用源。Suggestions:ExampleExplained-TheHTMLForm实例解析-超文本标记语言模式TheformabovehasthefollowingHTMLcode:以上的范例所含超文本标记语言代码如下：formFirstName:inputtype=textid=txt1onkeyup=showHint(this.value)/formpSuggestions:spanid=txtHint/span/pAsyoucanseeitisjustasimpleHTMLformwithasimpleinputfieldcalledtxt1.就如你看到的，它只是一个普通的表单，里面有一称为txt1的输入框TheparagraphbelowtheformcontainsaspancalledtxtHint.Thespanisusedasaplaceholderforhintsretrievedfromthewebserver.下一段包括了一个称做“txtHint”的SPAN。这个SPAN是用来存储从服务器重新获得的信息的。Whentheuserinputsdata,afunctioncalledshowHint()isexecuted.Theexecutionofthefunctionistriggeredbytheonkeyupevent.Inotherwords:Eachtimetheusermoveshisfingerawayfromakeyboardkeyinsidethetxt1field,thefunctionshowHintiscalled.当用户输入数据，名为“showHint()”的函数将被执行。这个函数的执行是由“onkeyup”事件触发的。换种说法：每当用户在txt1区域内触动键盘按钮，showHint的功能就被执行。ExampleExplained-TheshowHint()Function实例解析-showHint()函数TheshowHint()functionisaverysimpleJavaScriptfunctionplacedintheheadsectionoftheHTMLpage.showHint()函数是一种位于HTML顶端的简单的JS函数。Thefunctioncontainsthefollowingcode:函数包含以下代码：functionshowHint(str){if(str.length0){varurl=gethint.asp?sid=+Math.random()+&q=+strxmlHttp=GetXmlHttpObject(stateChanged)xmlHttp.open(GET,url,true)xmlHttp.send(null)}else{document.getElementById(txtHint).innerHTML=}}Thefunctionexecuteseverytimeacharacterisenteredintheinputfield.每当有字符被键入输入区内就会执行这个函数Ifthereissomeinputinthetextfield(str.length0)thefunctionexecutesthefollowing:如有字符被输入文字输入区(str.length0)函数就执行：CreatesanXMLHTTPobject建立一个XMLHTTP对象SendsanHTTPrequesttothefilegethint.aspontheserver发送一个HTTP请求到服务器上的gethint.asp上TellstheXMLHTTPobjecttoexecutethestateChanged()functionwhentheHTTPtriggersachange.当HTTP触发一次变动则XMLHTTP对象就会执行stateChanged()函数ExampleExplained-ThestateChanged()Function实例解析-stateChanged()函数ThestateChanged()functioncontainsthefollowingcode:stateChanged()函数包含以下代码：functionstateChanged(){if(xmlHttp.readyState==4||xmlHttp.readyState==complete){document.getElementById(txtHint).innerHTML=xmlHttp.responseText}}ThestateChanged()functionexecuteseverytimethestateoftheXMLHTTPobjectchanges.每当XMLHTTP对象的状态发生改变stateChanged()函数就会被执行Whenthestatechangesto4(ortocomplete),thecontentofthetxtHintspanisfilledwiththeresponsetext.当状态改变为4(或为完成),txtHintspan里就会显示反馈的文字Ajax源代码---下面的源代码是前一个页面的。Youcancopyandpasteit,andtryityourself.你可以将它复制并粘贴，自己来尝试。TheAJAXHTMLPageAJAXHTML页面ThisistheHTMLpage.ItcontainsasimpleHTMLformandalinktoaJavaScript.这是一个HTML网页。它包括了一个简单的HTML表单和关联JS的linkhtmlheadscriptsrc=clienthint.js/script/headbodyformFirstName:inputtype=textid=txt1onkeyup=showHint(this.value)/formpSuggestions:spanid=txtHint/span/p/body/htmlTheJavaScriptcodeislistedbelow.JS代码在下面TheAJAXJavaScriptAJAX的JSThisistheJavaScriptcodestoredinthefileclienthint.js:这是JS代码，被保存在clienthint.js文件中varxmlHttpfunctionshowHint(str){if(str.length0){varurl=gethint.asp?sid=+Math.random()+&q=+strxmlHttp=GetXmlHttpObject(stateChanged)xmlHttp.open(GET,url,true)xmlHttp.send(null)}else{document.getElementById(txtHint).innerHTML=}}functionstateChanged(){if(xmlHttp.readyState==4||xmlHttp.readyState==complete){document.getElementById(txtHint).innerHTML=xmlHttp.responseText}}functionGetXmlHttpObject(handler){varobjXmlHttp=nullif(navigator.userAgent.indexOf(Opera)=0){alert(Thisexampledoesn'tworkinOpera)return;}if(navigator.userAgent.indexOf(MSIE)=0){varstrName=Msxml2.XMLHTTPif(navigator.appVersion.indexOf(MSIE5.5)=0){strName=Microsoft.XMLHTTP}try{objXmlHttp=newActiveXObject(strName)objXmlHttp.onreadystatechange=handlerreturnobjXmlHttp}catch(e){alert(Error.ScriptingforActiveXmightbedisabled)return}}if(navigator.userAgent.indexOf(Mozilla)=0){objXmlHttp=newXMLHttpRequest()objXmlHttp.onload=handlerobjXmlHttp.onerror=handlerreturnobjXmlHttp}}TheAJAXServerPageAJAX服务端页面TheserverpagedcalledbytheJavaScript,isasimpleASPfilecalledgethint.asp.服务端页面被JS所调遣，是一名为gethint.asp的ASP文件ThepageiswritteninVBScriptforanInternetInformationServer(IIS).ItcouldeasilyberewritteninPHP,orsomeotherserverlanguage.页面是用VBS来针对IIS所写的。它可以被轻松的写成PHP或是一些其他的服务语言Itjustchecksanarrayfornamesandreturnscorrespondingnamestotheclient:它只是检查了名字组并将相吻合的名字返回给客户端：dima(30)a(1)=Annaa(2)=Brittanya(3)=Cinderellaa(4)=Dianaa(5)=Evaa(6)=Fionaa(7)=Gundaa(8)=Hegea(9)=Ingaa(10)=Johannaa(11)=Kittya(12)=Lindaa(13)=Ninaa(14)=Opheliaa(15)=Petuniaa(16)=Amandaa(17)=Raquela(18)=Cindya(19)=Dorisa(20)=Evea(21)=Evitaa(22)=Sunnivaa(23)=Tove