PHP教程课件讲义：PHP与AJAX

PHP与AJAXAJAX概述AJAX(AsynchronousJavaScriptandXML)其实是多种技术的综合，包括XHTML、Javascript、和CSS、DOM、XML和XSTL、XMLHttpRequest。AJAX使用XHTML和CSS标准化呈现，使用DOM实现动态显示和交互，使用XML和XSTL进行数据交换与处理，使用XMLHttpRequest对象进行异步数据读取，使用JavaScript绑定和处理所有数据。在AJAX提出之前，业界对于上述技术都只是单独的作用，没有综合使用，也是由于之前的技术需求所决定的，随着应用的广泛，AJAX成熟起来。例如：GoogleMaps、GMail思考在使用浏览器浏览网页的时候，当页面刷新很慢的时候，你的浏览器在干什么？你的屏幕内容是什么？现状与需要解决的问题客户端浏览器用户界面（UI）Web服务器数据存储，处理过程，后台系统HTTP传输

（HTML＋CSS）HTTP请求服务器端系统标准Web应用程序模式同步交互现状与需要解决的问题时间客户端服务器端用户状态用户状态用户状态服务器处理服务器处理数据传输数据传输数据传输数据传输为什么使用AJAX与传统的WEB应用不同，AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中，它负责编译用户界面及与服务器之间的交互。AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，像内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求都可以交给AJAX来执行。解决方案客户端浏览器用户界面（UI）Web服务器数据存储，处理过程，后台系统HTTP传输

（HTML＋CSS）HTTP请求服务器端系统AjaxWeb应用模式Ajax引擎JavaScript调用AJAXWEB应用模式（异步）时间服务器端客户端服务器处理服务器处理服务器处理浏览器界面AJAX引擎用户状态客户端处理输入显示数据传输数据传输AJAX的便捷减轻服务器的负担，把一些服务器负担的工作转嫁到客户端：AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担。利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。无刷新更新页面，减少用户心理和实际的等待时间，带来更好的用户体验：特别的，当要读取大量的数据的时候，不用像表单Reload那样出现白屏的情况，AJAX使用XMLHTTP对象发送请求并得到服务器响应，在不重新载入整个页面的情况下用Javascript操作DOM最终更新页面，让用户感觉如同本地应用程序一样的流畅操作。可以调用外部数据：例如XML文件。不需要下载插件或者小程序：基于标准化的并被广泛支持的技术，进一步促进页面呈现和数据的分离。AJAX的缺陷使用AJAX，它的一些缺陷不得不权衡一下：浏览器的支持：AJAX大量使用了Javascript和AJAX引擎，IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。后退功能失效：AJAX更新页面内容的时候并没有刷新整个页面。对流媒体的支持：没有FLASH、JavaApplet好。一些手持设备（如手机、PDA等）：现在还不能很好的支持Ajax。AJAX开发框架下面我们通过一步步的解析，来形成一个发送和接收XMLHttpRequest请求的程序框架。AJAX实质上也是遵循Request/Server模式，所以这个框架基本的流程也是： 对象初始化->发送请求->服务器接收->服务器返回->客户端接收->修改客户端页面内容。注意：这个过程是异步的。XMLHttpRequest对象XMLHttpRequest是XMLHTTP组件的对象，是Ajax应用程序的核心。通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。1、XMLHttpRequest对象初始化没有一样东西在不同的浏览器上得到同样的结果IE5.0开始，开发人员可以在Web页面内部使用XMLHTTPActiveX组件扩展自身的功能，不用从当前的Web页面导航就可以直接传输数据到服务器或者从服务器接收数据。Mozilla1.0以及NetScape7则是创建继承XML的代理类XMLHttpRequest对于大多数情况，XMLHttpRequest对象和XMLHTTP组件很类似，方法和属性类似，只是部分属性不同。使用IE浏览器IE作用MSXML解析器处理XML编写的Ajax应用程序要和IE打交道必须有一种特殊的方式创建对象要根据IE中安装的JavaScript技术版本不同，MSXML实际上有两种不同的版本，因此必须对这两种情况分别编写代码。

http_request=newActiveXObject("Msxml2.XMLHTTP"); http_request=newActiveXObject("Microsoft.XMLHTTP");IE创建XMLHttpRequest对象代码http_request=false;if(window.ActiveXObject)//检测为IE浏览器{ try{ http_request=newActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ http_request=newActiveXObject("Microsoft.XMLHTTP"); }catch(e){ http_request=false;} }}处理Mozilla和非Microsoft浏览器如果浏览器不是IE，或者为非Microsoft浏览器编写代码，就要使用不同的代码：http_request=newXMLHttpRequest();这行代码在Mozilla、Firefox、Safari、Opera以及基本上所有以任何形式或方式支持Ajax的非Microsoft浏览器中，创建XMLHttpRequest对象。有些版本的Mozilla浏览器处理服务器返回的未包含XMLmime-type头部信息的内容时会出错。因此，要确保返回的内容包含text/xml信息。

http_request.overrideMimeType('text/xml');处理Mozilla和非Microsoft浏览器代码 varhttp_request=false;

if(window.XMLHttpRequest)//Mozilla浏览器

{ http_request=newXMLHttpRequest(); //设置MiME类别

if(http_request.overrideMimeType) {

http_request.overrideMimeType("text/xml"); }

} XMLHttpRequest对象的方法方法描述abort()停止当前请求getAllResponseHeaders()作为字符串返回完整的headersgetResponseHeader("headerLabel")作为字符串返回单个的header标签open("method","URL"[,asyncFlag[,"userName"[,"password"]]])设置未决的请求的目标URL，方法，和其他参数send(content)发送请求setRequestHeader("label","value")设置header并和请求一起发送报头集的示例Date:Sun.13Nov200822:10:03GMTServer:Apache/2.0.53（Win32）PHP/5.0.3X-Powered-By:PHP/5.0.3Content-Length:527Last-Modified:0Keep-Alive:timeout=15.max=98Connection:Keep-AliveContent-Type:text/htmlXMLHttpRequest对象的属性属性描述onreadystatechange状态改变的事件触发器readyState对象状态(integer):0=未初始化

1=读取中

2=已读取

3=交互中

4=完成responseText服务器进程返回数据的文本版本responseXML服务器进程返回数据的兼容DOM的XML文档对象status服务器返回的状态码,如：404="文件未找到"、200="成功"statusText服务器返回的状态文本信息常用HTTP响应代码响应代码描述200OK请求文档或文件已经找到，并正确返回304NotModified浏览器指出它拥有一个本地的缓存副本，而服务器端的内容与此相同401Unauthorized请求所需文档需要验证403Forbidden请求者对所请求的文档不具有响应权限404NotFound请求的文件找不到500InternalServerError服务器在处理请求时遇到了问题503ServiceUnavailable服务器因负载过大而无法处理该请求XMLHttpRequest对象初始化<scripttype="text/javascript">varhttp_request=false; functionsend_request(url){//初始化、指定处理函数、发送请求的函数

http_request=false; //开始初始化XMLHttpRequest对象

if(window.XMLHttpRequest){//Mozilla浏览器

http_request=newXMLHttpRequest(); if(http_request.overrideMimeType){//设置MiME类别

http_request.overrideMimeType("text/xml"); } } elseif(window.ActiveXObject){//IE浏览器

try{ http_request=newActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ http_request=newActiveXObject("Microsoft.XMLHTTP"); }catch(e){} } } if(!http_request){//异常，创建对象实例失败

window.alert("不能创建XMLHttpRequest对象实例."); returnfalse; }}</script>2、指定响应处理函数接下来要指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就OK了:http_request.onreadystatechange=processRequest;需要指出的是，这个函数名称不加括号，不指定参数也可以用Javascript即时定义函数的方式定义响应函数:http_request.onreadystatechange=function(){};3、发出HTTP请求(open)指定响应处理函数之后，就可以向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法:http_request.open('GET','/some.file',true);http_request.send(null);open的第一个参数是HTTP请求的方法，为Get、Post或者Head。open的第二个参数是目标URL。这个URL可以是任何的URL，包括需要服务器解释执行的页面，目标URL处理请求XMLHttpRequest请求则跟处理普通的HTTP请求一样。open的第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为True，则不会继续执行，直到服务器返回信息。默认为True。发出HTTP请求(send)按照顺序，open调用完毕之后要调用send方法。如果希望每次都是获取最新的网站内容，需要设置请求头http_request.setRequestHeader(“If-Modified-Since”,”0”);以Post方式发出的话，可以是任何想传给服务器的内容。不过，跟form一样，如果要传文件或者Post内容给服务器，必须先调用setRequestHeader方法，修改MIME类别。如下：http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);以Get方式发出的话，这时资料则以查询字符串的形式列出，作为send的参数，例如：name=value&anothername=othervalue&so=on4、处理服务