《中国科大Ajax编程技术ppt课件》由会员分享，可在线阅读，更多相关《中国科大Ajax编程技术ppt课件（27页珍藏版）》请在金锄头文库上搜索。
1、主讲教师：李艺主讲教师：李艺主讲教师：李艺主讲教师：李艺Ajax编程技术第三章Ajax和效力器端技术中国科大Ajax编程技术3.1 概述假设只运用假设只运用XMLHttpRequest更新页面，而不运用更新页面，而不运用任何来自效力器输入的技术，不能称之为任何来自效力器输入的技术，不能称之为Ajax。运用运用Ajax的最大优势之一就是，可以为的最大优势之一就是，可以为Ajax运用程运用程序选择本人偏爱的效力器端技术，如序选择本人偏爱的效力器端技术，如ASP.NET, PHP, Java 等。等。对于每种效力器端技术来说，对于每种效力器端技术来说，Ajax 读取读取XMLHttpRequest
2、对象与效力器通讯的方式根本上是一对象与效力器通讯的方式根本上是一样的，但效力器接纳到信息后的处置方式就个不一样了。样的，但效力器接纳到信息后的处置方式就个不一样了。中国科大Ajax编程技术3.2 Ajax和效力器端技术p表单和表单和HTML控件控件pAjax并未改动并未改动HTML控件的任务方式和从其控件的任务方式和从其获得数据的方式，效力器也采用以往的方式来接纳它们。获得数据的方式，效力器也采用以往的方式来接纳它们。但是有两个问题：但是有两个问题：p调用效力器端页面的方式；调用效力器端页面的方式；pHTML表单完全从页面中删除或修正后，不能按预期方表单完全从页面中删除或修正后，不能按预期方式
3、任务。我们分别解释。式任务。我们分别解释。中国科大Ajax编程技术3.2 Ajax和效力器端技术p传统的表单的提交模型传统的表单的提交模型p提交表单的做法通常是建立一个带有按钮的表但，用提交表单的做法通常是建立一个带有按钮的表但，用户输入完数据后单击按钮后，就将此表单提交给效力器。户输入完数据后单击按钮后，就将此表单提交给效力器。p传统的传统的ASP和和PHP运用表单的运用表单的ACTION属性将用户从属性将用户从原始页面重定向到呼应页面。该处置是在用户被重定向新页面之前原始页面重定向到呼应页面。该处置是在用户被重定向新页面之前在效力器上完成，新页面用来显示相应的呼应数据。在效力器上完成，新页
4、面用来显示相应的呼应数据。ButtonRequest.php效力器效力器前往数据前往数据Response.php效力器效力器进展处置进展处置用户单击按钮用户单击按钮提交数据提交数据效力器效力器前往数据前往数据阅读器显示的原始页面阅读器显示的原始页面提交后阅读器重新定向的页面提交后阅读器重新定向的页面中国科大Ajax编程技术3.2 Ajax和效力器端技术在在Ajax之前，我们运用的都是这种传统的提交、重定向方式；之前，我们运用的都是这种传统的提交、重定向方式；而而Ajax提出了运用脚本提交页面的思想。提出了运用脚本提交页面的思想。Ajax/JavaScript提交模型提交模型Ajax运用的运用的
5、JavaScript提交模型在以前传统的提交模型根底上提交模型在以前传统的提交模型根底上进展了变化。在此模型中，表单可以可选地从模型中删除。进展了变化。在此模型中，表单可以可选地从模型中删除。这种新的模型运用这种新的模型运用JavaScript截取事件调用，当该事件发生时截取事件调用，当该事件发生时如用户单击提交按钮，提交的数据传送给对应的脚本，然后有如用户单击提交按钮，提交的数据传送给对应的脚本，然后有脚本发起对效力器的调用。脚本发起对效力器的调用。脚本甚至不用马上提交数据，可以继续等待其它条件也满足后脚本甚至不用马上提交数据，可以继续等待其它条件也满足后再提交数据。再提交数据。在该模型中，
6、由于脚本可以立刻呼应事件且不用等待数据的提在该模型中，由于脚本可以立刻呼应事件且不用等待数据的提交，所以从效力器前往的数据也不用马上显示给用户，而脚本也不交，所以从效力器前往的数据也不用马上显示给用户，而脚本也不用像以前一样被动等待效力器的呼应。用像以前一样被动等待效力器的呼应。中国科大Ajax编程技术3.2 Ajax和效力器端技术Default.htm效力器端效力器端进展处置进展处置Response.php事件发生事件发生脚本到脚本到效力器效力器阅读器显示的页面阅读器显示的页面部分页部分页面更新面更新效力器前往数据效力器前往数据Jscript.js中国科大Ajax编程技术3.3 效力器端的情
7、况javaScript用来启用客户机用来启用客户机/效力器之间的交互。效力器之间的交互。C/S中的效力器端会接纳来自中的效力器端会接纳来自HTTP恳求的数据，然后恳求的数据，然后处置数据，再以效力器呼应所采用的格式前往数据。处置数据，再以效力器呼应所采用的格式前往数据。向效力器提交数据向效力器提交数据Ajax运用运用XMLHttpRequest对象向效力器提交数据，对象向效力器提交数据，这一过程分三个步骤：这一过程分三个步骤：设置事件在接纳数据时触发；设置事件在接纳数据时触发；随恳求一同调用随恳求一同调用open方法；方法；发送恳求。发送恳求。中国科大Ajax编程技术3.3 效力器端的情况p提
8、交运用格式提交运用格式pXMLHttpRequest.opwn(method, URLto call, asynchronous or synchronous);p其中其中Method：有两种方式，：有两种方式，GET、POST：p用用GET方式：方式：pXMLHttpRequest.open(“GET, “Reponse.php&value=1, “true);pxHRObject.send(null);p用用POST方式：方式：pvar argument = “value=“;pargument += encodeURIComponent(data)pXMLHttpRequest.open
9、(“POST, “Reponse.php, “true);pxHRObject.send(argument);中国科大Ajax编程技术3.3 效力器端的情况p效力器接纳恳求效力器接纳恳求pJavaScript运用运用XMLHttpRequest对象的对象的POST或或GET方法，将数据封装到方法，将数据封装到URL或或Request中，向效力器提交数据。中，向效力器提交数据。p在在PHP中，可以运用中，可以运用$_GET、$_POST、$_REQUEST搜集客户机搜集客户机传上来的数据。传上来的数据。p在在ASP、ASP.NET中，可以运用中，可以运用QueryString、Form或或Par
10、ams搜搜集客户机传上来的数据。集客户机传上来的数据。p从从HTML表单接纳数据和从源自表单接纳数据和从源自JavaScript的恳求接纳数据没有差的恳求接纳数据没有差别。别。p效力器获得数据后，就可以按照本人的方式进展处置，然后将处置效力器获得数据后，就可以按照本人的方式进展处置，然后将处置结果前往给客户端。结果前往给客户端。p中国科大Ajax编程技术3.4 编写HTTP呼应与传统的效力器端技术所运用的事件顺序不同，在与传统的效力器端技术所运用的事件顺序不同，在Ajax 中，用户要显示的信息无法立刻写到页面中。取而中，用户要显示的信息无法立刻写到页面中。取而代之的是，必需将信息封装在代之的是
11、，必需将信息封装在HTTP呼应中。方法很简呼应中。方法很简单：单：在在PHP中，可以运用中，可以运用echo 命令：命令：$data = “This is our data.;echo $data;在在ASP或或ASP.NET中，可以中，可以Response.Write方法：方法：string data = “This is our data.;Response.Write(data);中国科大Ajax编程技术3.4 编写HTTP呼应我们可以创建更为复杂的构造如我们可以创建更为复杂的构造如XML构造。前提是，只需能将它们解析构造。前提是，只需能将它们解析为文本即可。在为文本即可。在PHP中，以
12、下代码就是一个例如：中，以下代码就是一个例如：$doc = new domDocument(1.0);$root = $doc-createElement(root);$root = $doc-appendChild($root);$child = $doc-createElement(child);$child = $root-appendChild($child);$value = $doc-createTextNode(“Data);$value = $child-appendChild($value);$strXml = $doc-saveXML();echo $strXml;最后生成
13、的最后生成的XML文档结果如下：文档结果如下：Data相应的字符串追加在相应的字符串追加在HTTP呼应之后，然后回传给客户端显示。呼应之后，然后回传给客户端显示。中国科大Ajax编程技术3.4 编写HTTP呼应pXMLHttpRequest对象对象pXMLHttpRequest对象并不是对象并不是Ajax技术用来技术用来执行客户机执行客户机/效力器交互的独一方法。但它是最受欢迎效力器交互的独一方法。但它是最受欢迎的一种方法。的一种方法。p我们不讨论该对象的任务原理，只引见它的我们不讨论该对象的任务原理，只引见它的任务步骤：任务步骤：p回调函数：接纳数据的第一阶段称为回调。这只是一个回调函数：接
14、纳数据的第一阶段称为回调。这只是一个JavaScript函数，在数据完成从效力器的下载时运转。函数，在数据完成从效力器的下载时运转。命名回调函数时，可以起一个类似命名回调函数时，可以起一个类似getData()的称号。的称号。回调函数在大多数回调函数在大多数Ajax运用程序中的作用都类似。运用程序中的作用都类似。中国科大Ajax编程技术3.4 编写HTTP呼应在回调函数中，第一个要执行的义务是检查数据能否已下载终在回调函数中，第一个要执行的义务是检查数据能否已下载终了，这可以经过检查了，这可以经过检查XMLHttpRequest对象的对象的readyState属性能否属性能否等于等于4代表已完
15、成下载来实现。回调函数的典型方式如下：代表已完成下载来实现。回调函数的典型方式如下：function getData() if (xHRObject.readyState=4) / do some processing 确定数据已下载终了后，可以用确定数据已下载终了后，可以用XMLHttpRequest对象以下两对象以下两种属性之一来取回数据：种属性之一来取回数据：responseTextresponseXML中国科大Ajax编程技术3.4 编写HTTP呼应responseText属性属性responseText属性是从属性是从HTTP呼应中重新取呼应中重新取回数据的最常见、最简单的方法。可以
16、创建一个新的回数据的最常见、最简单的方法。可以创建一个新的JavaScript 变量来搜集该呼应的内容。变量来搜集该呼应的内容。例如，在效力器端的例如，在效力器端的PHP代码中，我们曾经预备了代码中，我们曾经预备了回传信息：回传信息：$data = “This is our data.;可以运用可以运用responseText属性来重新取回属性来重新取回HTML/XHTML中的数据。中的数据。function myReturnMethod() if (xmlhttp.readyState=4) if (xmlhttp.status = 200) alert(xmlhttp.responseTe
17、xt);k else if(xmlhttp.status = 404)l alert(Requested file not found);m else n alert(Error has occurred with status code:+xmlhttp.status);o p 中国科大Ajax编程技术3.4 编写HTTP呼应假设要重新取回假设要重新取回XML中的数据，而仍运用中的数据，而仍运用responseText属性，属性，应将应将XML数据作为字符串前往：数据作为字符串前往：$data = “Data;echo $data;中国科大Ajax编程技术3.4 编写HTTP呼应respon
18、seXML属性属性假设想要将假设想要将XML文档回传给客户端，文档回传给客户端，responseXML属性是一个不错的选择。它将呼应视作属性是一个不错的选择。它将呼应视作XML文档对象，然后用文档对象，然后用DMO迭代不同的元素、属性和迭代不同的元素、属性和文本节点。文本节点。但是，运用此属性时会存在一些问题。假定但是，运用此属性时会存在一些问题。假定我们运用以下效力器端代码读取我们运用以下效力器端代码读取XML文档：文档：$data = “Data;echo $data;然后，将用来读取的然后，将用来读取的JavaScript代码更改为：代码更改为：var document = xHRObj
19、ect.responseXML;k它有能够没法取回完好的它有能够没法取回完好的XML文档，有能够是空的，文档，有能够是空的，并没有传输的并没有传输的XML标志。这是由于编写呼应之前，必需标志。这是由于编写呼应之前，必需求将呼应的求将呼应的ContentType设置为设置为text/xml。中国科大Ajax编程技术3.4 编写HTTP呼应遗憾是的遗憾是的IE阅读器不允许这样的设置。必需在效力器上阅读器不允许这样的设置。必需在效力器上进展此项设置，客户端才干正常运用进展此项设置，客户端才干正常运用responseXML属属性。性。在在Firefox中，可以在中，可以在JavaScript中运用中运
20、用overrideMimeType方法将类型设置为方法将类型设置为text/xml类型：类型：xHRObject.overrideMimeType(“text/xml);xHRObject.send(null);var document = xHRObject.responseXML;此属性在此属性在IE阅读器中没有。但问题还不止这些，假阅读器中没有。但问题还不止这些，假设设XML文档中有错误导致格式有问题，就会从文档中有错误导致格式有问题，就会从IE中得到中得到一个空的对象，而且不会马上看到明显的错误音讯。一个空的对象，而且不会马上看到明显的错误音讯。中国科大Ajax编程技术3.4 编写HT
21、TP呼应调式调式responseXML在调查为何从在调查为何从responseXML中得到前往内容时，可中得到前往内容时，可以运用以运用4种方法。常见的方法是检查种方法。常见的方法是检查responseXML中能中能否有前往内容。例如：否有前往内容。例如：var text = xHRObject.responseXML;Alert(text);我们会指望得到类似的内容：我们会指望得到类似的内容：Datak假设没有得到类似内容，阐明呼应就没有效假设没有得到类似内容，阐明呼应就没有效力器的正确传输，此时需求检查效力器端的代码。力器的正确传输，此时需求检查效力器端的代码。中国科大Ajax编程技术3.
22、4 编写HTTP呼应在在IE中调式中调式responseXML假设要了解假设要了解IE中有关某一错误的详细信息，中有关某一错误的详细信息，可用如下代码前往一个错误音讯：可用如下代码前往一个错误音讯：var errorcode = xHRObject.responseXML.parseError.errorCode;普通情况下，普通情况下，IE前往值是前往值是0，但假设已将，但假设已将ContentType设置成设置成 text/xml，并且，并且responseXML.xml 为空，那么为空，那么IE前往值为前往值为0以外的数以外的数字。字。我们还可以用如下代码得到更为详细的错误我们还可以用如
23、下代码得到更为详细的错误信息：信息：var errorcode = xHRObject.responseXML.parseError.reason;中国科大Ajax编程技术3.4 编写HTTP呼应运用数据运用数据从从responseXML属性中胜利前往数据后，可属性中胜利前往数据后，可以把它当作以把它当作DOM对象从中重新取回数据。例如，假设对象从中重新取回数据。例如，假设从从responseXML属性中胜利前往的数据是：属性中胜利前往的数据是： k Beginning PHP with Ajaxl 1m n中国科大Ajax编程技术3.4 编写HTTP呼应我们可以用如下代码前往我们可以用如下代
24、码前往XML文档中的文档中的元素：元素：var XMLDoc = xHRObject.responseXML;var book = XMLDoc.getElementsByTagName(“book);还可以运用以下代码导航到还可以运用以下代码导航到book中的第一个元素：中的第一个元素：var title = book0.firstChild;留意，从留意，从XML文档中前往文档内容的方式，不同的文档中前往文档内容的方式，不同的阅读器是不同的。阅读器是不同的。IE运用运用text属性获得：属性获得：var title = book0.firstChild.text; /前往前往“Beginn
25、ing PHP with AjaxMozilla运用运用textContent属性获得：属性获得：var title = book1.firstChild.textContent; /前往前往“Beginning PHP with Ajax中国科大Ajax编程技术3.4 编写HTTP呼应上例中，要强调的是，上例中，要强调的是，IE中的中的book0是第一个节点是第一个节点信息，而信息，而Firefox那么是那么是book1！Firefox中的中的book0会包含一个带有换行字符的文会包含一个带有换行字符的文本节点，由于本节点，由于Firefox不会跳过空白字符，而将它们视为不会跳过空白字符，而
26、将它们视为单独的节点，单独的节点，IE不会这样。不会这样。中国科大Ajax编程技术3.5 效力器端技术到目前为止，我们讨论的只是数据发送和接纳的过程，没有议到目前为止，我们讨论的只是数据发送和接纳的过程，没有议论效力器本身。对于论效力器本身。对于Ajax来说，效力器端技术是独立的一块，与效来说，效力器端技术是独立的一块，与效力器端言语相关，必需单独讨论。我们在此以力器端言语相关，必需单独讨论。我们在此以PHP技术为例来讨论。技术为例来讨论。运用运用Ajax与与PHP的例如的例如假设有个假设有个MySql数据库数据库myDataBase,其中一张表其中一张表users有如下信息：有如下信息：re
27、gidnameemail_address1李文李文 leewenustc.edu 2郭欣郭欣 guoxinsina 3贺琪贺琪 123mail.ustc.edu 4郭靖郭靖 guojinustc.edu 中国科大Ajax编程技术3.5 效力器端技术2.编写一网页，其中用下拉菜单显示用户姓名，选定某一编写一网页，其中用下拉菜单显示用户姓名，选定某一用户名图用户名图1，页面从效力器处得到该用户的姓名和，页面从效力器处得到该用户的姓名和email地址，并在本页面显示这些信息图地址，并在本页面显示这些信息图2。图图1图图2中国科大Ajax编程技术3.5 效力器端技术3.firstPage.htm: S
28、elect a User:李文李文郭欣郭欣贺琪贺琪郭靖郭靖中国科大Ajax编程技术3.5 效力器端技术4.responsexml.php?phpheader(Content-Type: text/xml);header(Cache-Control: no-cache, must-revalidate);header(Expires: Mon, 26 Jul 2019 05:00:00 GMT);$q=$_GETq;$cn=mysql_connect(localhost,user,password) or die(不能衔接数据库不能衔接数据库);$strsql=select * from use
29、rs 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);?中国科大Ajax编程技术3.5 效力器端技术5.responsexml.jsvar xmlHttpfunction showUser(str) xmlHttp=GetXmlHttpObject() if
30、 (xmlHttp=null) alert (Browser does not support 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.readyState=4 | xmlHttp.readyState=complete) xml
31、Doc=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.getElementsByTagName(); var = emailNodei; var
32、emailValue = .firstChild.nodeValue; emailText += emailValue + ; document.getElementById(name).innerHTML = nameText; document.getElementById().innerHTML = emailText; function GetXmlHttpObject() var objXMLHttp=null if (window.XMLHttpRequest) objXMLHttp=new XMLHttpRequest() else if (window.ActiveXObject) objXMLHttp=new ActiveXObject(Microsoft.XMLHTTP) return objXMLHttp
