Ajax中文手册.doc

原作者介绍-http:/21. AJAX介绍AJAX是一种运用JavaScript和可扩展标记语言(XML)，在网络浏览器和服务器之间传送或接受数据 的技术。2. AJAX实例AJAX可以用来创建更多交互式的网络应用程序。3. AJAX源代码简要分析上一章节效果的代码原理4. AJAX与数据库AJAX可以用来和数据端进行数据的交互联通。5. 使用AJAX制作留言本使用已有的AJAX教程，制作一个属于自己的留言本吧.Ajax实例-http:/2 AJAX can be used to create more interactive applications. AJAX可以用来创建更多交互式的网络应用程序。AJAX ExampleAJAX 实例In the AJAX example below we will demonstrate how a web page can communicate with a web server online as a user enters data into a web form. 在以下的AJAX范例中，我们将了解到当用户以网页格式输入数据时一个网页是如何与网络服务器连接的。 Type a Name in the Box Below在下面的框中输入姓名 *实际操作请前往W3Schools窗体顶端First Name: Error! Reference source not found.窗体底端Suggestions: Example Explained - The HTML Form实例解析-超文本标记语言模式The form above has the following HTML code:以上的范例所含超文本标记语言代码如下： First Name:Suggestions: As you can see it is just a simple HTML form with a simple input field called txt1.就如你看到的，它只是一个普通的表单，里面有一称为txt1的输入框The paragraph below the form contains a span called txtHint. The span is used as a placeholder for hints retrieved from the web server.下一段包括了一个称做“txtHint”的SPAN。这个SPAN是用来存储从服务器重新获得的信息的。When the user inputs data, a function called showHint() is executed. The execution of the function is triggered by the onkeyup event. In other words: Each time the user moves his finger away from a keyboard key inside the txt1 field, the function showHint is called.当用户输入数据，名为“showHint()”的函数将被执行。这个函数的执行是由“onkeyup”事件触发的。换种说法：每当 用户在txt1区域内触动键盘按钮，showHint的功能就被执行。Example Explained - The showHint() Function实例解析- showHint()函数The showHint() function is a very simple JavaScript function placed in the section of the HTML page.showHint()函数是一种位于HTML顶端的简单的JS函 数。The function contains the following code:函数包含以下代码：function showHint(str) if (str.length 0) var url=gethint.asp?sid=+Math.random()+&q=+strxmlHttp=GetXmlHttpObject(stateChanged) xmlHttp.open(GET, url , true) xmlHttp.send(null) else document.getElementById(txtHint).innerHTML= The function executes every time a character is entered in the input field.每当有字符被键入输入区内就会执行这个函数If there is some input in the text field (str.length 0) the function executes the following:如有字符被输入文字输入区(str.length0)函数就执行： Creates an XMLHTTP object建立一个XMLHTTP对象 Sends an HTTP request to the file gethint.asp on the server发送一个HTTP请求到服务器上的gethint.asp上 Tells the XMLHTTP object to execute the stateChanged() function when the HTTP triggers a change.当HTTP触发一次变动则XMLHTTP对象就会执行stateChanged()函数 Example Explained - The stateChanged() Function实例解析 - stateChanged()函数The stateChanged() function contains the following code:stateChanged()函数包含以下代码：function stateChanged() if (xmlHttp.readyState=4 | xmlHttp.readyState=complete) document.getElementById(txtHint).innerHTML=xmlHttp.responseText The stateChanged() function executes every time the state of the XMLHTTP object changes.每当XMLHTTP对象的状态发生改变stateChanged()函数就会被执行When the state changes to 4 (or to complete), the content of the txtHint span is filled with the response text. 当状态改变为4(或为完成),txtHint span里就会显示反馈的文字 Ajax源代码-http:/2 AJAX Example - AJAX SourceAJAX 实例 - AJAX 源码 The source code below belongs to the AJAX example on the previous page.下面的源代码是前一个页面的。You can copy and paste it, and try it yourself.你可以将它复制并粘贴，自己来尝试。The AJAX HTML PageAJAX HTML页面 This is the HTML page. It contains a simple HTML form and a link to a JavaScript.这是一个HTML网页。它包括了一个简单的HTML表单和关联JS的link First Name:Suggestions: The JavaScript code is listed below.JS代码在下面The AJAX JavaScriptAJAX 的 JS This is the JavaScript code stored in the file clienthint.js:这是JS代码，被保存在clienthint.js文件中 varxmlHttp functionshowHint(str) if (str.length 0) varurl=gethint.asp?sid= + Math.random() + &q= + strxmlHttp=GetXmlHttpObject(stateChanged)xmlHttp.open(GET, url , true)xmlHttp.send(null) else document.getElementById(txtHint).innerHTML= function stateChanged() if (xmlHttp.readyState=4 | xmlHttp.readyState=complete) document.getElementById(txtHint).innerHTML=xmlHttp.responseText function GetXmlHttpObject(handler) var objXmlHttp=nullif (navigator.userAgent.indexOf(Opera)=0)alert(This example doesnt work in Opera) return; if (navigator.userAgent.indexOf(MSIE)=0) var strName=Msxml2.XMLHTTPif (navigator.appVersion.indexOf(MSIE 5.5)=0)strName=Microsoft.XMLHTTP try objXmlHttp=new ActiveXObject(strName)objXmlHttp.onreadystatechange=handler return objXmlHttp catch(e) alert(Error. Scripting for ActiveX might be disabled) return if (navigator.userAgent.indexOf(Mozilla)=0)objXmlHttp=new XMLHttpRequest()objXmlHttp.onload=handlerobjXmlHttp.onerror=handler return objXmlHttp The AJAX Server PageAJAX 服务端页面The server paged called by the JavaScript, is a simple ASP file called gethint.asp.服务端页面被JS所调遣，是一名为gethint.asp的ASP文件The page is written in VBScript for an Internet Information Server (IIS). It could easily be rewritten in PHP, or some other server language.页面是用VBS来针对IIS所写的。它可以被轻松的写成PHP或是一些其他的服务语言It just checks an array for names and returns corresponding names to the client:它只是检查了名字组并将相吻合的名字返回给客户端：dim a(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)=Tovea(24)=Unnia(25)=Violeta(26)=Lizaa(27)=Elizabetha(28)=Ellena(29)=Wenchea(30)=Vickyq=request.querystring(q)if len(q)0 then hint= for i=1 to 30 x1=ucase(mid(q,1,len(q) x2=ucase(mid(a(i),1,len(q) if x1=x2 then if hint= then hint=a(i) else hint=hint & , & a(i) end if end if nextend if if hint= then response.write(no suggestion)else response.write(hint)end if Ajax与数据库-http:/2 AJAX can be used for interactive communication with a database.AJAX可以用来和数据端进行数据的交互联通。AJAX Database ExampleAJAX 数据库实例In the AJAX example below we will demonstrate how a web page can fetch information from a database using AJAX technology.在以下的AJAX范例中，我们可以了解到一个网页是如何用AJAX技术从数据端获得信息的。Select a Name in the Box Below请在下面的菜单中选择一名字窗体顶端Select a Customer: Error! Reference source not found.窗体底端Customer info will be listed here.客户信息将被罗列在这。*实际操作请前往W3SchoolsAJAX Example ExplainedAJAX 实例解析The example above contains a simple HTML form and a link to a JavaScript:上面的例子包含了一个简单的HTML表单和一关联到JS的link: Select a Customer:Alfreds FutterkisteNorth/SouthWolski Zajazd Customer info will be listed here.As you can see it is just a simple HTML form with a simple drop down box called customers.正如你所见这只是一个简单的HTML表单，里面有一简单的下拉菜单，其名称 为customersThe paragraph below the form contains a div called txtHint. The div is used as a placeholder for hints retrieved from the web server.表单下面包含一个名为txtHint的DIV，该DIV被用来做为反馈从WEB服务器检索信息的占位符When the user selects data, a function called showCustomer() is executed. The execution of the function is triggered by the onchange event. In other words: Each time the user change the value in the drop down box, the function showCustomer is called.当用户选择数据，一个称为 showCustomer()的函数被执行了。这个函数由onchange事件所触发。可以这么讲：每当用户改变下拉菜但中的名字，函数就会执行The JavaScript code is listed below.JS的代码在下面The AJAX JavaScriptAJAX的JSThis is the JavaScript code stored in the file selectcustomers.js:这是JS代码，被保存在一叫做selectcustomers.js的文件内：var xmlHttpfunction showCustomer(str) var url=getcustomer.asp?sid= + Math.random() + &q= + strxmlHttp=GetXmlHttpObject(stateChanged)xmlHttp.open(GET, url , true)xmlHttp.send(null) function stateChanged() if (xmlHttp.readyState=4 | xmlHttp.readyState=complete) document.getElementById(txtHint).innerHTML=xmlHttp.responseText function GetXmlHttpObject(handler) var objXmlHttp=nullif (navigator.userAgent.indexOf(Opera)=0)alert(This example doesnt work in Opera) return; if (navigator.userAgent.indexOf(MSIE)=0) var strName=Msxml2.XMLHTTPif (navigator.appVersion.indexOf(MSIE 5.5)=0)strName=Microsoft.XMLHTTP try objXmlHttp=new ActiveXObject(strName)objXmlHttp.onreadystatechange=handler return objXmlHttp catch(e) alert(Error. Scripting for ActiveX might be disabled) return if (navigator.userAgent.indexOf(Mozilla)=0)objXmlHttp=new XMLHttpRequest()objXmlHttp.onload=handlerobjXmlHttp.onerror=handler return objXmlHttp The AJAX Server PageAJAX服务页The server paged called by the JavaScript, is a simple ASP file called gecustomer.asp.服务页由JS所调遣，是一称为gecustomer.asp的简单ASP文件The page is written in VBScript for an Internet Information Server (IIS). It could easily be rewritten in PHP, or some other server language.该页使用的是针对IIS的VBS语言，当然也可以改写成像PHP或是其他一些服务语言The code runs an SQL against a database and returns the result as an HTML table:代码运行了SQL来从数据库中将结果返回到HTML表格中：sql=SELECT * FROM CUSTOMERS WHERE CUSTOMERID=sql=sql & request.querystring(q)set conn=Server.CreateObject(ADODB.Connection)conn.Provider=Microsoft.Jet.OLEDB.4.0conn.Open(Server.Mappath(/db/northwind.mdb)set rs = Server.CreateObject(ADODB.recordset)rs.Open sql, connresponse.write()do until rs.EOFfor each x in rs.Fieldsresponse.write( & & )response.write( & x.value & )nextrs.MoveNextloopresponse.write()Ajax与数据库-http:/2 其实严格意义上讲这并不能算是真正的AJAX，因为X没用有到，对，就是XML,这里只是纯粹使用了数据库。但怎么说 也用到了AJAX的核心部分，所以就厚脸皮一下拉。后台的工作既然是带数据库的留言本，第一步就是要设计好数据库。我们要做成这个样子的留言本 观察一下，就可以得出我们的数据库应该设置为这样(使用的是Access数据库)：id自动编号显示No.多少用的name文本留言人的称呼photo文本头像地址content备注留言的内容E-mail文本邮件地址date日期/时间留言的日期reply备注回复的内容数据操作的服务器端文件这里我使用ASP来作为服务器端文件，来处理与数据相关的读、写与更新操作。首先是读的操作，先看看这个功能实现的ASP文件代码(本人ASP很一般,高手见笑)： % Response.Buffer = True Response.ExpiresAbsolute = Now() - 1 Response.Expires = 0 Response.CacheControl = no-cache Response.AddHeader Pragma, No-Cache 执行该文件不会对产生的内容进行缓存处理 function c2u(Salon)该函数可以将可能变为乱码字符转换成为中文 dim i dim Salon_one dim Salon_unicode for i=1 to len(Salon) Salon_one=Mid(Salon,i,1) Salon_unicode=Salon_unicode&chr(38) Salon_unicode=Salon_unicode&chr(35) Salon_unicode=Salon_unicode&chr(120) Salon_unicode=Salon_unicode& Hex(ascw(Salon_one) Salon_unicode=Salon_unicode&chr(59) next Response.Write Salon_unicode end function连接数据库 set conn = server.createobject(ADODB.Connection) DBpath = Provider=Microsoft.Jet.OLEDB.4.0;Data Source=&Server.MapPath(数据库名称.mdb) conn.open DBpathset rs = server.CreateObject(ADODB.RecordSet) if request.QueryString(viewnumber) then rs.open select top &request.QueryString(viewnumber)& * from gbook order by id desc,conn,1,1可根据下拉菜单所选择的查看留言数来进行对数据库读取的调整 else rs.open select * from gbook order by id desc,conn,1,1 end if if rs.eof thenResponse.Write(c2u(目前还没有留言)else while not rs.eof 数据不为空则显示的内容% | | No. img style=border:1px solid #ccc; float:left src=photo/ alt= / : Reply : 写入数据库的文件代码:编写前台HTML以及能与服务器端文件进行沟通的JS其实个人认为AJAX的核心所在是能与后台的数据库进行触发式的(也可以定时)进行数据交互，而不需要让用户的页面进行反复的转向(也就达成了无刷 新的概念)近日Gmail开通了聊天的功能，可以说把AJAX技术运用到了极致，废话就不多说了，下面来分析下JS文件好了：/留言开关 var offon=off; function w(now) var wb = document.getElementById(writebook); var yesno = document.getElementById(want); /off就关now就开 if(wb.style.display.value=none & offon=off) wb.style.display=block; offon=now; else wb.style.display=none; offon=off; /头像选择 function changepic(filename) var yp = document.getElementById(yourphotonow); /这是个能改变图片src属性的文档控制语句 yp.setAttribute(src,photo/+filename); /验证邮箱 function isEmail(strEmail) var f=document.getElementById(form1); if (strEmail.search(/w+(-w+)|(.w+)*A-Za-z0-9+(.|-)A-Za-z0-9+)*.A-Za-z0-9+$/) != -1) return true; else alert(Check Email Address again); f.email.value=; /提交内容 function ok() var f=document.getElementById(form1); if(f.chenghu.value!= &f.email.value!= &f.neirong.value!=) /从form里面抽取值，并全部以get的方式把数据传给写入数据库的服务器端文件。 /(注意这里应该要把值escape一下,不然FF会出现乱码) var str=c=+escape(f.chenghu.value)+&p=+escape(f.photo.value)+&e=+escape(f.email.value)+&n=+escape(f.neirong.value); /不论提交后是否成功都把写过的内容清除 f.chenghu.value=; f.email.value=; f.neirong.value=; f.photo.options0.selected=selected; /将str传给writebook.asp并且使用startRequest函数来实现这个功能 startRequest(writebook.asp?+str); /关闭留言区 document.getElementById(writebook).style.display=none; offon=off; else alert(Complete your form please.); /查看留言数量 function vnumber(num) /根据给定的num来决定从数据库读取多少文件 startRequest(readbook.asp?viewnumber=+num); function frs() /这里是比较费资源的地方,我定义了内容在后台以1秒的平均速度进行刷新，来达到无刷新聊天室的效果 var haha; vnumber(document.getElementById(vnum).optionsdocument.getElementById(vnum).selectedIndex.value); haha=setTimeout(frs(),1000); /xmlHttp.var xmlHttp;/建立XMLHttpRequest，并根据浏览器的不同来做出相应的设置，IE7推出后就可以不用考虑了function createXMLHttpRequest() if (window.ActiveXObject) xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); /对触发的事件进行处理，指定URL，与该地址的服务器端文件进行交互function startRequest(url) createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open(GET, url, true); xmlHttp.send(null); function handleStateChange() /这里还可以加一个if(xmlHttp.readyState = 1)的情况，是还在加载时候的反馈,可以写个loading_ if(xmlHttp.readyState = 4) if(xmlHttp.status = 200) /将结果反馈到HTML中id为readbook的标签里 document.getElementById(readbook).innerHTML=xmlHttp.responseText; 不知道这个样子介绍会不会有帮助.但事实上AJAX最好还是不要处理数据写入的工作,一般做些用户身份校验拉一些针对性比较强的信息展示拉 （可以不用考虑搜索引擎收录的那种）。还是比较好的，呵呵，一点小牢骚Ajax介绍-http:/2 AJAX Keywords:AJAX 关键词： JavaScript and XMLJavaScript脚本和可扩展标记语言(XML) Web browser technologyWEB浏览器技术 Open web standards开放式WEB标准 Browser and platform independent浏览器以及独立平台 Better and faster Internet applications更好更快的网络应用程序 XML and HTTP RequestsXML以及HTTP请求 AJAX = Asynchronous JavaScript And XMLAJAX = 异步JavaScript和可扩展标记语言AJAX is a technology that uses JavaScript and XML to send and receive data between a web browser and a web server.AJAX是一种运用JavaScript和可扩展标记语言(XML)，在网络浏览器和服务器之间传送或接受数据的技术。AJAX Is A Browser TechnologyAJAX是一种浏览器技术AJAX is a technology that runs in your browser. It uses asynchronous data transfer between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.AJAX是一种运用于浏览器中的技术。在浏览器和服务器之间，它使用异步数据进行转换，并允许网页向服务器索取少量信息而非整个网 页。The technology makes Internet applications smaller, faster and more user friendly.这项技术标志着网络应用程序的微小化、迅捷化以及便捷化。AJAX is a web browser technology independent of web server software. AJAX是一种不需依靠服务器软件而独立运做的浏览器技术。AJAX Is Based On Open StandardsAJAX是基于公共标准的AJAX is based on the following open standards:AJAX基于以下一些公共标准： JavaScript XML 可扩展标记语言 HTML 超文本标记语言 CSS 层叠样式表 The open standards used in AJAX are well defined, and supported by all major browsers. AJAX applications are browser and platform