主讲教师李艺leeyiustceducn.PPT

Ajax编程技术第三章 Ajax和服务器端技术 3.1 概述 如果只使用XMLHttpRequest更新页面，而不使用任何来自服务器输入的技术，不能称之为Ajax。 使用Ajax的最大优势之一就是，可以为Ajax应用程序选择自己偏爱的服务器端技术，如ASP.NET, PHP, Java 等。 对于每种服务器端技术来说，Ajax 读取XMLHttpRequest 对象与服务器通信的方式基本上是相同的，但服务器接收到信息后的处理方式就个不相同了。 3.2 Ajax和服务器端技术 表单和HTML控件 Ajax并未改变HTML控件的工作方式和从其获得数据的方式，服务器也采用以往的方式来接收它们。但是有两个问题： 调用服务器端页面的方式； HTML表单完全从页面中删除或修改后，不能按预期方式工作。我们分别解释。 3.2 Ajax和服务器端技术 传统的表单的提交模型 提交表单的做法通常是建立一个带有按钮的表但，用户输入完数据后单击按钮后，就将此表单提交给服务器。 传统的ASP和PHP使用表单的ACTION属性将用户从原始页面重定向到响应页面。该处理是在用户被重定向新页面之前在服务器上完成，新页面用来显示相应的响应数据。 3.2 Ajax和服务器端技术 在Ajax之前，我们使用的都是这种传统的提交、重定向模式；而Ajax提出了使用脚本提交页面的思想。 Ajax/JavaScript提交模型 Ajax使用的JavaScript提交模型在以前传统的提交模型基础上进行了变化。在此模型中，表单可以可选地从模型中删除。 这种新的模型使用JavaScript截取事件调用，当该事件发生时（如用户单击提交按钮），提交的数据传递给对应的脚本，然后有脚本发起对服务器的调用。 脚本甚至不必马上提交数据，可以继续等待其它条件也满足后再提交数据。 在该模型中，因为脚本可以立即响应事件且不必等待数据的提交，所以从服务器返回的数据也不必马上显示给用户，而脚本也不必像以前一样被动等待服务器的响应。 3.2 Ajax和服务器端技术 3.3 服务器端的情况 javaScript用来启用客户机/服务器之间的交互。C/S中的服务器端会接收来自HTTP请求的数据，然后处理数据，再以服务器响应所采用的格式返回数据。 向服务器提交数据 Ajax使用XMLHttpRequest对象向服务器提交数据，这一过程分三个步骤： 设置事件在接收数据时触发； 随请求一起调用open方法； 发送请求。 3.3 服务器端的情况 提交使用格式 XMLHttpRequest.opwn(method, URLto call, asynchronous or synchronous); 其中Method：有两种方式，GET、POST： 用GET方式： XMLHttpRequest.open(“GET”, “Reponse.phpvalue=1”, “true”); xHRObject.send(null); 用POST方式： var argument = “value=“; argument += encodeURIComponent(data) XMLHttpRequest.open(“POST”, “Reponse.php”, “true”); xHRObject.send(argument); 3.3 服务器端的情况 服务器接收请求 JavaScript使用XMLHttpRequest对象的POST或GET方法，将数据封装到URL或Request中，向服务器提交数据。 在PHP中，可以使用$_GET、$_POST、$_REQUEST收集客户机传上来的数据。 在ASP、ASP.NET中，可以使用QueryString、Form或Params收集客户机传上来的数据。 从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); 3.4 编写HTTP响应 我们可以创建更为复杂的结构（如XML结构）。前提是，只要能将它们解析为文本即可。在PHP中，以下代码