ajax 编程技术第三章 ajax 和服务器端技术

主讲教师：李艺主讲教师：李艺[email protected]@ustc.edu.cn

Ajax 编程技术第三章 Ajax 和服务器端技术

3-2 中国科大《 Ajax编程技术》

3.1 概述

如果只使用 XMLHttpRequest更新页面，而不使用任何来自服务器输入的技术，不能称之为 Ajax。

使用 Ajax的最大优势之一就是，可以为 Ajax应用程序选择自己偏爱的服务器端技术，如 ASP.NET, PH

P, Java 等。对于每种服务器端技术来说， Ajax 读取 XMLHt

tpRequest 对象与服务器通信的方式基本上是相同的，但服务器接收到信息后的处理方式就个不相同了。


3.2 Ajax 和服务器端技术

表单和 HTML控件Ajax并未改变 HTML控件的工作方式和从其获

得数据的方式，服务器也采用以往的方式来接收它们。但是有两个问题：调用服务器端页面的方式； HTML表单完全从页面中删除或修改后，不能按预期方式工作。我们分别解释。



传统的表单的提交模型提交表单的做法通常是建立一个带有按钮的表但，用户输

入完数据后单击按钮后，就将此表单提交给服务器。传统的 ASP和 PHP使用表单的 ACTION属性将用户从原

始页面重定向到响应页面。该处理是在用户被重定向新页面之前在服务器上完成，新页面用来显示相应的响应数据。

<form>

</form>

<form>

</form>ButtonButton

Request.php

服务器返回数据

Response.php

服务器进行处理

用户单击按钮提交数据


浏览器显示的原始页面提交后浏览器重新定向的页面



在 Ajax之前，我们使用的都是这种传统的提交、重定向模式；而 Ajax提出了使用脚本提交页面的思想。

Ajax/JavaScript提交模型Ajax使用的 JavaScript提交模型在以前传统的提交模型

基础上进行了变化。在此模型中，表单可以可选地从模型中删除。这种新的模型使用 JavaScript截取事件调用，当该事件发

生时（如用户单击提交按钮），提交的数据传递给对应的脚本，然后有脚本发起对服务器的调用。

脚本甚至不必马上提交数据，可以继续等待其它条件也满足后再提交数据。

在该模型中，因为脚本可以立即响应事件且不必等待数据的提交，所以从服务器返回的数据也不必马上显示给用户，而脚本也不必像以前一样被动等待服务器的响应。



<form onEbent…>

<form onEbent…>

Default.htm

服务器端进行处理

Response.php

事件发生脚本到服务器

浏览器显示的页面

部分页面更新


Jscript.js


3.3 服务器端的情况

javaScript用来启用客户机 /服务器之间的交互。C/S中的服务器端会接收来自 HTTP请求的数据，然后处理数据，再以服务器响应所采用的格式返回数据。

向服务器提交数据Ajax使用 XMLHttpRequest对象向服务器提交

数据，这一过程分三个步骤：1. 设置事件在接收数据时触发；2. 随请求一起调用 open方法；3. 发送请求。



提交使用格式XMLHttpRequest.opwn(method, URLto call, asynchronous or synchronous);

其中Method：有两种方式， GET、 POST：用 GET方式：

XMLHttpRequest.open(“GET”, “Reponse.php&value=1”, “true”);

xHRObject.send(null);

用 POST方式：var argument = “value=“;

argument += encodeURIComponent(data)

XMLHttpRequest.open(“POST”, “Reponse.php”, “true”);

xHRObject.send(argument);



服务器接收请求JavaScript使用 XMLHttpRequest对象的 POST或 GET

方法，将数据封装到 URL或 Request中，向服务器提交数据。在 PHP中，可以使用 $_GET、 $_POST、 $_REQUEST收集客户机传上来的数据。

在 ASP、 ASP.NET中，可以使用 QueryString、 Form或 P

arams收集客户机传上来的数据。从 HTML表单接收数据和从源自 JavaScript的请求接收数据没有差别。

服务器获得数据后，就可以按照自己的方式进行处理，然后将处理结果返回给客户端。


3.4 编写 HTTP 响应

与传统的服务器端技术所使用的事件顺序不同，在 Ajax 中，用户要显示的信息无法立即写到页面中。取而代之的是，必须将信息封装在 HTTP响应中。办法很简单：在 PHP中，可以使用 echo 命令：

$data = “This is our data.”;

echo $data;

在 ASP或 ASP.NET中，可以 Response.Write方法：string data = “This is our data.”;

Response.Write(data);



我们可以创建更为复杂的结构（如 XML结构）。前提是，只要能将它们解析为文本即可。在 PHP中，以下代码就是一个示例：

$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;

最后生成的 XML文档结果如下：<?xml version=“1.0”?>

<root>

<child>Data</child>

</root>

相应的字符串追加在 HTTP响应之后，然后回传给客户端显示。



XMLHttpRequest对象XMLHttpRequest对象并不是 Ajax技术用来执

行客户机 /服务器交互的唯一方法。但它是最受欢迎的一种方法。

我们不讨论该对象的工作原理，只介绍它的工作步骤：

① 回调函数：接收数据的第一阶段称为回调。这只是一个JavaScript 函数，在数据完成从服务器的下载时运行。命名回调函数时，可以起一个类似 getData()的名称。回调函数在大多数 Ajax应用程序中的作用都类似。



在回调函数中，第一个要执行的任务是检查数据是否已下载完毕，这可以通过检查 XMLHttpRequest对象的 readyState属性是否等于 4（代表已完成下载）来实现。回调函数的典型形式如下：

function getData()

{ if (xHRObject.readyState==4)

{ // do some processing

}

}

确定数据已下载完毕后，可以用 XMLHttpRequest对象以下两种属性之一来取回数据： responseText

responseXML



② responseText属性responseText属性是从 HTTP响应中重新取回数据的最常见、最简单

的方法。可以创建一个新的 JavaScript 变量来收集该响应的内容。例如，在服务器端的 PHP代码中，我们已经准备了回传信息：

$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:"+xmlhttp.status);

}

}



如果要重新取回 XML中的数据，而仍使用 responseText

属性，应将 XML数据作为字符串返回：$data = “<?xml version=\”1.0\” encoding=\”ISO-8859-1\”

standalone = \”yes\”?><root><child>Data</child></root>”;

echo $data;



③ responseXML属性如果想要将 XML文档回传给客户端， responseXML属性是一

个不错的选择。它将响应视作 XML文档对象，然后用 DMO 迭代不同的元素、属性和文本节点。

但是，使用此属性时会存在一些问题。假定我们使用以下服务器端代码读取 XML文档：

$data = “<?xml version=\”1.0\” encoding=\”ISO-8859-1\”

standalone = \”yes\”?><root><child>Data</child></root>”;

echo $data;

然后，将用来读取的 JavaScript代码更改为：var document = xHRObject.responseXML;

它有可能没法取回完整的 XML文档，有可能是空的，并没有传输的 XML标记。这是因为编写响应之前，必须要将响应的 ContentType设置为 text/xml。



遗憾是的 IE浏览器不允许这样的设置。必须在服务器上进行此项设置，客户端才能正常使用 responseXML属性。

在 Firefox中，可以在 JavaScript中使用 overri

deMimeType方法将类型设置为 text/xml 类型：xHRObject.overrideMimeType(“text/xml”);

xHRObject.send(null);

var document = xHRObject.responseXML;

此属性在 IE浏览器中没有。但问题还不止这些，如果 XML文档中有错误导致格式有问题，就会从 IE中得到一个空的对象，而且不会马上看到明显的错误消息。



④ 调式 responseXML

在调查为何从 responseXML中得到返回内容时，可以使用 4种方法。常见的方法是检查 responseXML中是否有返回内容。例如：var text = xHRObject.responseXML;

Alert(text);

我们会指望得到类似的内容：<?xml version=“1.0” encoding=“ISO-8859-1”

Standalone=“yes”?><root><child>Data</child></root>

如果没有得到类似内容，说明响应就没有服务器的正确传输，此时需要检查服务器端的代码。



⑤ 在 IE中调式 responseXML

如果要了解 IE中有关某一错误的详细信息，可用如下代码返回一个错误消息：var errorcode = xHRObject.responseXML.parseError.errorCode;

一般情况下， IE返回值是 0，但如果已将 Cont

entType设置成 text/xml，并且 responseXML.xml

为空，则 IE返回值为 0以外的数字。我们还可以用如下代码得到更为详细的错误信息：

var errorcode = xHRObject.responseXML.parseError.reason;



⑥ 使用数据从 responseXML属性中成功返回数据后，可以

把它当作 DOM对象从中重新取回数据。例如，假设从responseXML属性中成功返回的数据是：<?xml version=“1.0” encoding=“ISO-8859-1” standalone=“yes”?>

<cart>

<bood>

<title>Beginning PHP with Ajax</title>

<quantity>1</quantity>

</book>

</cart>



我们可以用如下代码返回 XML文档中的 <book> 元素：var XMLDoc = xHRObject.responseXML;

var book = XMLDoc.getElementsByTagName(“book”);

还可以使用以下代码导航到 book中的第一个元素：var title = book[0].firstChild;

注意，从 XML文档中返回文档内容的方式，不同的浏览器是不同的。 IE使用 text属性获得：var title = book[0].firstChild.text; //返回“ Beginning PHP with Ajax”

Mozilla使用 textContent属性获得：var title = book[1].firstChild.textContent; //返回“ Beginning PHP with Ajax”



上例中，要强调的是， IE中的 book[0]是第一个节点信息，而 Firefox 则是 book[1] ！

Firefox中的 book[0]会包含一个带有换行字符的文本节点，因为 Firefox不会跳过空白字符，而将它们视为单独的节点， IE不会这样。


3.5 服务器端技术

到目前为止，我们讨论的只是数据发送和接收的过程，没有谈论服务器本身。对于 Ajax来说，服务器端技术是独立的一块，与服务器端语言相关，必须单独讨论。我们在此以 PHP技术为例来讨论。

使用 Ajax与 PHP的示例1. 假设有个MySql数据库 myDataBase,其中一张表 users有如下信息：

regid name email_address

1 李文 [email protected]

2 郭欣 [email protected]

3 贺琪 [email protected]

4 郭靖 [email protected]



2. 编写一网页，其中用下拉菜单显示用户姓名，选定某一用户名（图 1），页面从服务器处得到该用户的姓名和email地址，并在本页面显示这些信息（图 2）。

图 1 图 2



3. firstPage.htm:<html><head><script src="responsexml.js"></script></head><body><form> Select a User:<select name="users" onchange="showUser(this.value)"><option value="1">李文 </option><option value="2"> 郭欣 </option><option value="3"> 贺琪 </option><option value="4"> 郭靖 </option></select></form><table border=0 cellpadding=10 cellspacing=0 style="font-size:10pt;"><tr><td id="name"></td><td id="email"></td></tr></table></body></html>



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=$_GET["q"];$cn=@mysql_connect('localhost',‘user',‘password') or die("不能连接数据库 ");$strsql="select * from users where regid='".$q."'order by regid";$result=mysql_db_query(‘myDataBase',$strsql,$cn);echo '<?xml version="1.0" encoding="gb2312"?><person>';while($row = mysql_fetch_array($result)){ echo "<name>" . $row['name'] . "</name>"; echo "<email>" . $row['email_address'] . "</email>";}echo "</person>";mysql_close($cn);?>



5. responsexml.js

var xmlHttpfunction showUser(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.readyState==4 || xmlHttp.readyState=="complete") { xmlDoc=xmlHttp.responseXML; var nameText = ""; var emailText = ""; var nameNode = xmlDoc.getElementsByTagName('name');

for (i=0; i<nameNode.length; i++) { var name = nameNode[i]; var nameValue = name.firstChild.nodeValue; nameText += nameValue+"<br>"; var emailNode = xmlDoc.getElementsByTagName('email'); var email = emailNode[i]; var emailValue = email.firstChild.nodeValue; emailText += emailValue + "<BR>"; } 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 objXMLHttp}

ajax 编程技术 第三章 ajax 和服务器端技术

Documents

ajax 编程技术第三章 ajax 和服务器端技术