《中国科大Ajax编程技术课件》由会员分享，可在线阅读，更多相关《中国科大Ajax编程技术课件（28页珍藏版）》请在金锄头文库上搜索。
1、Ajax编程技术第三章Ajax和服务器端技术3.1 概述如果只使用如果只使用XMLHttpRequest更新页面，而不使用更新页面，而不使用任何来自服务器输入的技术，不能称之为任何来自服务器输入的技术，不能称之为Ajax。使用使用Ajax的最大优势之一就是，可以为的最大优势之一就是，可以为Ajax应用程应用程序选择自己偏爱的服务器端技术，如序选择自己偏爱的服务器端技术，如ASP.NET, PHP, Java 等。等。对于每种服务器端技术来说，对于每种服务器端技术来说，Ajax 读取读取XMLHttpRequest 对象与服务器通信的方式基本上是相对象与服务器通信的方式基本上是相同的，但服务器接
2、收到信息后的处理方式就个不相同了。同的，但服务器接收到信息后的处理方式就个不相同了。3-2 3.2 Ajax和服务器端技术p表单和表单和HTML控件控件Ajax并未改变并未改变HTML控件的工作方式和从其获得数控件的工作方式和从其获得数据的方式，服务器也采用以往的方式来接收它们。但是据的方式，服务器也采用以往的方式来接收它们。但是有两个问题：有两个问题：n调用服务器端页面的方式；调用服务器端页面的方式；nHTML表单完全从页面中删除或修改后，不能按预期表单完全从页面中删除或修改后，不能按预期方式工作。我们分别解释。方式工作。我们分别解释。3-3 3.2 Ajax和服务器端技术p传统的表单的提交
3、模型传统的表单的提交模型提交表单的做法通常是建立一个带有按钮的表但，用户输入完提交表单的做法通常是建立一个带有按钮的表但，用户输入完数据后单击按钮后，就将此表单提交给服务器。数据后单击按钮后，就将此表单提交给服务器。传统的传统的ASP和和PHP使用表单的使用表单的ACTION属性将用户从原始页面属性将用户从原始页面重定向到响应页面。该处理是在用户被重定向新页面之前在服务器重定向到响应页面。该处理是在用户被重定向新页面之前在服务器上完成，新页面用来显示相应的响应数据。上完成，新页面用来显示相应的响应数据。ButtonRequest.php服务器服务器返回数据返回数据Response.php服务器
4、服务器进行处理进行处理用户单击按钮用户单击按钮提交数据提交数据服务器服务器返回数据返回数据浏览器显示的原始页面浏览器显示的原始页面提交后浏览器重新定向的页面提交后浏览器重新定向的页面3-4 3.2 Ajax和服务器端技术在在Ajax之前，我们使用的都是这种传统的提交、重定向模式；之前，我们使用的都是这种传统的提交、重定向模式；而而Ajax提出了使用脚本提交页面的思想。提出了使用脚本提交页面的思想。pAjax/JavaScript提交模型提交模型Ajax使用的使用的JavaScript提交模型在以前传统的提交模型基础上提交模型在以前传统的提交模型基础上进行了变化。在此模型中，表单可以可选地从模型
5、中删除。进行了变化。在此模型中，表单可以可选地从模型中删除。这种新的模型使用这种新的模型使用JavaScript截取事件调用，当该事件发生时截取事件调用，当该事件发生时（如用户单击提交按钮），提交的数据传递给对应的脚本，然后有（如用户单击提交按钮），提交的数据传递给对应的脚本，然后有脚本发起对服务器的调用。脚本发起对服务器的调用。脚本甚至不必马上提交数据，可以继续等待其它条件也满足后脚本甚至不必马上提交数据，可以继续等待其它条件也满足后再提交数据。再提交数据。在该模型中，因为脚本可以立即响应事件且不必等待数据的提在该模型中，因为脚本可以立即响应事件且不必等待数据的提交，所以从服务器返回的数据也
6、不必马上显示给用户，而脚本也不交，所以从服务器返回的数据也不必马上显示给用户，而脚本也不必像以前一样被动等待服务器的响应。必像以前一样被动等待服务器的响应。3-5 3.2 Ajax和服务器端技术Default.htm服务器端服务器端进行处理进行处理Response.php事件发生事件发生脚本到脚本到服务器服务器浏览器显示的页面浏览器显示的页面部分页部分页面更新面更新服务器返回数据服务器返回数据Jscript.js3-6 3.3 服务器端的情况javaScript用来启用客户机用来启用客户机/服务器之间的交互。服务器之间的交互。C/S中的服务器端会接收来自中的服务器端会接收来自HTTP请求的数据
7、，然后请求的数据，然后处理数据，再以服务器响应所采用的格式返回数据。处理数据，再以服务器响应所采用的格式返回数据。p向服务器提交数据向服务器提交数据Ajax使用使用XMLHttpRequest对象向服务器提交数据，对象向服务器提交数据，这一过程分三个步骤：这一过程分三个步骤：1.设置事件在接收数据时触发；设置事件在接收数据时触发；2.随请求一起调用随请求一起调用open方法；方法；3.发送请求。发送请求。3-7 3.3 服务器端的情况p提交使用格式提交使用格式XMLHttpRequest.opwn(method, URLto call, asynchronous or synchronous)
8、;其中其中Method：有两种方式，：有两种方式，GET、POST：p用用GET方式：方式：XMLHttpRequest.open(“GET”, “Reponse.php&value=1”, “true”);xHRObject.send(null);p用用POST方式：方式：var argument = “value=“;argument += encodeURIComponent(data)XMLHttpRequest.open(“POST”, “Reponse.php”, “true”);xHRObject.send(argument);3-8 3.3 服务器端的情况p服务器接收请求服务器
9、接收请求JavaScript使用使用XMLHttpRequest对象的对象的POST或或GET方法，方法，将数据封装到将数据封装到URL或或Request中，向服务器提交数据。中，向服务器提交数据。n在在PHP中，可以使用中，可以使用$_GET、$_POST、$_REQUEST收集客收集客户机传上来的数据。户机传上来的数据。n在在ASP、ASP.NET中，可以使用中，可以使用QueryString、Form或或Params收集客户机传上来的数据。收集客户机传上来的数据。p从从HTML表单接收数据和从源自表单接收数据和从源自JavaScript的请求接收数据没有差的请求接收数据没有差别。别。p服
10、务器获得数据后，就可以按照自己的方式进行处理，然后将处理服务器获得数据后，就可以按照自己的方式进行处理，然后将处理结果返回给客户端。结果返回给客户端。3-9 3.4 编写HTTP响应与传统的服务器端技术所使用的事件顺序不同，在与传统的服务器端技术所使用的事件顺序不同，在Ajax 中，用户要显示的信息无法立即写到页面中。取而中，用户要显示的信息无法立即写到页面中。取而代之的是，必须将信息封装在代之的是，必须将信息封装在HTTP响应中。办法很简响应中。办法很简单：单：n在在PHP中，可以使用中，可以使用echo 命令：命令：$data = “This is our data.”;echo $dat
11、a;n在在ASP或或ASP.NET中，可以中，可以Response.Write方法：方法：string data = “This is our data.”;Response.Write(data);3-10 3.4 编写HTTP响应我们可以创建更为复杂的结构（如我们可以创建更为复杂的结构（如XML结构）。前提是，只要能将它们解析结构）。前提是，只要能将它们解析为文本即可。在为文本即可。在PHP中，以下代码就是一个示例：中，以下代码就是一个示例：$doc = new domDocument(1.0);$root = $doc-createElement(root);$root = $doc-a
12、ppendChild($root);$child = $doc-createElement(child);$child = $root-appendChild($child);$value = $doc-createTextNode(“Data”);$value = $child-appendChild($value);$strXml = $doc-saveXML();echo $strXml;最后生成的最后生成的XML文档结果如下：文档结果如下：Data相应的字符串追加在相应的字符串追加在HTTP响应之后，然后回传给客户端显示。响应之后，然后回传给客户端显示。3-11 3.4 编写HTTP响
13、应pXMLHttpRequest对象对象XMLHttpRequest对象并不是对象并不是Ajax技术用来执行客技术用来执行客户机户机/服务器交互的唯一方法。但它是最受欢迎的一种服务器交互的唯一方法。但它是最受欢迎的一种方法。方法。我们不讨论该对象的工作原理，只介绍它的工作步我们不讨论该对象的工作原理，只介绍它的工作步骤：骤：回调函数：接收数据的第一阶段称为回调。这只是一个回调函数：接收数据的第一阶段称为回调。这只是一个JavaScript函数，在数据完成从服务器的下载时运行。函数，在数据完成从服务器的下载时运行。命名回调函数时，可以起一个类似命名回调函数时，可以起一个类似getData()的名
14、称。的名称。回调函数在大多数回调函数在大多数Ajax应用程序中的作用都类似。应用程序中的作用都类似。3-12 3.4 编写HTTP响应在回调函数中，第一个要执行的任务是检查数据是否已下载完在回调函数中，第一个要执行的任务是检查数据是否已下载完毕，这可以通过检查毕，这可以通过检查XMLHttpRequest对象的对象的readyState属性是否属性是否等于等于4（代表已完成下载）来实现。回调函数的典型形式如下：（代表已完成下载）来实现。回调函数的典型形式如下：function getData() if (xHRObject.readyState=4) / do some processing
15、确定数据已下载完毕后，可以用确定数据已下载完毕后，可以用XMLHttpRequest对象以下两对象以下两种属性之一来取回数据：种属性之一来取回数据：nresponseTextnresponseXML3-13 3.4 编写HTTP响应responseText属性属性responseText属性是从属性是从HTTP响应中重新取回数据的最常见、最简单的方法。响应中重新取回数据的最常见、最简单的方法。可以创建一个新的可以创建一个新的JavaScript 变量来收集该响应的内容。变量来收集该响应的内容。例如，在服务器端的例如，在服务器端的PHP代码中，我们已经准备了回传信息：代码中，我们已经准备了回传信
16、息：$data = “This is our data.”;可以使用可以使用responseText属性来重新取回属性来重新取回HTML/XHTML中的数据。中的数据。function myReturnMethod() if (xmlhttp.readyState=4) if (xmlhttp.status = 200) alert(xmlhttp.responseText); else if(xmlhttp.status = 404) alert(Requested file not found); else alert(Error has occurred with status code
17、:+xmlhttp.status); 3-14 3.4 编写HTTP响应如果要重新取回如果要重新取回XML中的数据，而仍使用中的数据，而仍使用responseText属性，属性，应将应将XML数据作为字符串返回：数据作为字符串返回：$data = “Data”;echo $data;3-15 3.4 编写HTTP响应responseXML属性属性如果想要将如果想要将XML文档回传给客户端，文档回传给客户端，responseXML属性是一个不错属性是一个不错的选择。它将响应视作的选择。它将响应视作XML文档对象，然后用文档对象，然后用DMO迭代不同的元素、属迭代不同的元素、属性和文本节点。性和文
18、本节点。但是，但是，使用此属性时会存在一些问题使用此属性时会存在一些问题。假定我们使用以下服务器端代。假定我们使用以下服务器端代码读取码读取XML文档：文档：$data = “Data”;echo $data;然后，将用来读取的然后，将用来读取的JavaScript代码更改为：代码更改为：var document = xHRObject.responseXML;它有可能没法取回完整的它有可能没法取回完整的XML文档，有可能是空的，并没有传输的文档，有可能是空的，并没有传输的XML标记。这是因为编写响应之前，必须要将响应的标记。这是因为编写响应之前，必须要将响应的ContentType设置为设置
19、为text/xml。3-16 3.4 编写HTTP响应遗憾是的遗憾是的IE浏览器不允许这样的设置。浏览器不允许这样的设置。必须在服务器上必须在服务器上进行此项设置，客户端才能正常使用进行此项设置，客户端才能正常使用responseXML属属性。性。在在Firefox中，可以在中，可以在JavaScript中使用中使用overrideMimeType方法将类型设置为方法将类型设置为text/xml类型：类型：xHRObject.overrideMimeType(“text/xml”);xHRObject.send(null);var document = xHRObject.responseXM
20、L;此属性在此属性在IE浏览器中没有。但问题还不止这些，如浏览器中没有。但问题还不止这些，如果果XML文档中有错误导致格式有问题，就会从文档中有错误导致格式有问题，就会从IE中得到中得到一个空的对象，而且不会马上看到明显的错误消息。一个空的对象，而且不会马上看到明显的错误消息。3-17 3.4 编写HTTP响应调式调式responseXML在调查为何从在调查为何从responseXML中得到返回内容时，可以中得到返回内容时，可以使用使用4种方法。常见的方法是检查种方法。常见的方法是检查responseXML中是否中是否有返回内容。例如：有返回内容。例如：var text = xHRObject
21、.responseXML;Alert(text);我们会指望得到类似的内容：我们会指望得到类似的内容：Data如果没有得到类似内容，说明响应就没有服务器的如果没有得到类似内容，说明响应就没有服务器的正确传输，此时需要检查服务器端的代码。正确传输，此时需要检查服务器端的代码。3-18 3.4 编写HTTP响应在在IE中调式中调式responseXML如果要了解如果要了解IE中有关某一错误的详细信息，可用如中有关某一错误的详细信息，可用如下代码返回一个错误消息：下代码返回一个错误消息：var errorcode = xHRObject.responseXML.parseError.errorCod
22、e;一般情况下，一般情况下，IE返回值是返回值是0，但如果已将，但如果已将ContentType设置成设置成 text/xml，并且，并且responseXML.xml 为空，则为空，则IE返回值为返回值为0以外的数字。以外的数字。我们还可以用如下代码得到更为详细的错误信息：我们还可以用如下代码得到更为详细的错误信息：var errorcode = xHRObject.responseXML.parseError.reason;3-19 3.4 编写HTTP响应使用数据使用数据从从responseXML属性中成功返回数据后，可以把它属性中成功返回数据后，可以把它当作当作DOM对象从中重新取回数
23、据。例如，假设从对象从中重新取回数据。例如，假设从responseXML属性中成功返回的数据是：属性中成功返回的数据是： Beginning PHP with Ajax 1 3-20 3.4 编写HTTP响应我们可以用如下代码返回我们可以用如下代码返回XML文档中的文档中的元素：元素：var XMLDoc = xHRObject.responseXML;var book = XMLDoc.getElementsByTagName(“book”);还可以使用以下代码导航到还可以使用以下代码导航到book中的第一个元素：中的第一个元素：var title = book0.firstChild;注意
24、，从注意，从XML文档中返回文档内容的方式，不同的文档中返回文档内容的方式，不同的浏览器是不同的。浏览器是不同的。nIE使用使用text属性获得：属性获得：var title = book0.firstChild.text; /返回返回“Beginning PHP with Ajax”nMozilla使用使用textContent属性获得：属性获得：var title = book1.firstChild.textContent; /返回返回“Beginning PHP with Ajax”3-21 3.4 编写HTTP响应上例中，要强调的是，上例中，要强调的是，IE中的中的book0是第一个
25、节点是第一个节点信息，而信息，而Firefox则是则是book1！Firefox中的中的book0会包含一个带有换行字符的文会包含一个带有换行字符的文本节点，因为本节点，因为Firefox不会跳过空白字符，而将它们视为不会跳过空白字符，而将它们视为单独的节点，单独的节点，IE不会这样。不会这样。3-22 3.5 服务器端技术到目前为止，我们讨论的只是数据发送和接收的过程，没有谈到目前为止，我们讨论的只是数据发送和接收的过程，没有谈论服务器本身。对于论服务器本身。对于Ajax来说，服务器端技术是独立的一块，与服来说，服务器端技术是独立的一块，与服务器端语言相关，必须单独讨论。我们在此以务器端语言
26、相关，必须单独讨论。我们在此以PHP技术为例来讨论。技术为例来讨论。p使用使用Ajax与与PHP的示例的示例1.假设有个假设有个MySql数据库数据库myDataBase,其中一张表其中一张表users有如下信息：有如下信息：regidnameemail_address1李文李文 2郭欣郭欣 3贺琪贺琪 4郭靖郭靖 3-23 3.5 服务器端技术2.编写一网页，其中用下拉菜单显示用户姓名，选定某一编写一网页，其中用下拉菜单显示用户姓名，选定某一用户名（图用户名（图1），页面从服务器处得到该用户的姓名和），页面从服务器处得到该用户的姓名和email地址，并在本页面显示这些信息（图地址，并
27、在本页面显示这些信息（图2）。）。图图1图图23-24 3.5 服务器端技术3.firstPage.htm: Select a User:李文李文郭欣郭欣贺琪贺琪郭靖郭靖3-25 3.5 服务器端技术4.responsexml.php?phpheader(Content-Type: text/xml);header(Cache-Control: no-cache, must-revalidate);header(Expires: Mon, 26 Jul 1997 05:00:00 GMT);$q=$_GETq;$cn=mysql_connect(localhost,user,password)
28、 or die(不能连接数据库不能连接数据库);$strsql=select * from users where regid=.$q.order by regid;$result=mysql_db_query(myDataBase,$strsql,$cn);echo ;while($row = mysql_fetch_array($result) echo . $rowname . ; echo . $rowemail_address . ;echo ;mysql_close($cn);?3-26 3.5 服务器端技术5.responsexml.jsvar xmlHttpfunction s
29、howUser(str) xmlHttp=GetXmlHttpObject() if (xmlHttp=null) alert (Browser does not support HTTP Request) return var url=responsexml.php url=url+?q=+str url=url+&sid=+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open(GET,url,true) xmlHttp.send(null)function stateChanged() if (xmlHttp.
30、readyState=4 | xmlHttp.readyState=complete) xmlDoc=xmlHttp.responseXML; var nameText = ; var emailText = ; var nameNode = xmlDoc.getElementsByTagName(name); for (i=0; inameNode.length; i+) var name = nameNodei; var nameValue = name.firstChild.nodeValue; nameText += nameValue+; var emailNode = xmlDoc
31、.getElementsByTagName(email); var email = emailNodei; var emailValue = email.firstChild.nodeValue; emailText += emailValue + ; document.getElementById(name).innerHTML = nameText; document.getElementById(email).innerHTML = emailText; function GetXmlHttpObject() var objXMLHttp=null if (window.XMLHttpRequest) objXMLHttp=new XMLHttpRequest() else if (window.ActiveXObject) objXMLHttp=new ActiveXObject(Microsoft.XMLHTTP) return objXMLHttp3-27
