搜索
AJAX的基本概念AJAX：理论篇AJAX介绍Ajax(AsynchronousJavaScriptandXML)实现了浏览器异步读取服务器上XML内容的技术,Ajax是异步JavaScript和XML的组合。Ajax允许Web开发人员创建交互的Web页面，同时避免必须等候页面载入这一瓶颈。通过Ajax创建的应用程序，只需点击按钮，就可以用全新的内容替换Web页面某一区域的内容。它的精彩之处在于不必等候页面装入，只有这一个区域的内容需要载入。以GoogleMaps为例：可以点击和四处移动地图，却不必等候页面载入。特点：和服务器端语言无关。任何服务器语言，均可使用AJAX。基于Javascript和Xml。更加人性化的客户体验。应用：如：用户名重复检查、验证码重载。AJAX原理Ajax的核心是JavaScript对象XmlHttpRequest。该对象在InternetExplorer5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。利用ajax，我们可以针对一次请求只刷新局部的页面，这样可以大大提高web程序对用户的响应速度，增强交互性。下图是ajax的一个简单的原理图。执行原理：通过XmlHttpRequest来发送信息，接收信息，从而实现了异步通信。XmlHttpRequest微软在其InternetExplorer(IE)5中作为一个ActiveX对象形式引入了XMLHttpRequest对象。其他的作为一个本地JavaScript对象来实现的。微软已经在其IE7中把XMLHttpRequest实现为一个窗口对象属性。幸运的是，尽管其实现(因而也影响到调用方式)细节不同，但是，所有的浏览器实现都具有类似的功能，并且实质上是相同方法。目前，W3C组织正在努力进行XMLHttpRequest对象的标准化，并且已经发行了有关该W3C规范的一个草案。属性：readyState：通信的状态onreadystatechange：当readstate改变时，会激发此事件。responseText：服务器返回的文档，以text/html格式。responseXML：服务器返回的文档，以text/xml格式。status：描述了HTTP状态代码，而且其类型为short。方法：open()初始化一个XMLHttpRequest对象send()发送数据setRequestHeader()设置请求的头部信息getResponseHeader()方法用于检索响应的头部值readyState属性readyState属性当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态：一直等待直到请求被处理；然后，它才接收一个响应。这样以来，脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性，ReadyState取值说明0描述一种未初始化状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。1“连接状态；此时，代码已经调用了XMLHttpRequestopen()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。2发送状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。3正在接收状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。4描述一种已加载状态；此时，响应已经被完全接收。onreadystatechange属性onreadystatechange属性当readyState状态改变时，会激发此属性所指定的Javascript方法。如：ajax=newnewXMLHttpRequest():ajax.Onreadystatechange=myshow;Functionmyshow(){alert(“方法被激活，当前状态”+ajax.readyState);}一般用于，当服务器处理完请求之后，要显示回传信息，用它来指定相应的方法来显示。responseText表示服务器返回的信息，以text/html格式。responseXML表示服务器返回的信息，以text/xml格式State属性state属性描述了HTTP状态代码，而且其类型为short，这个页面指处理请求的服务器端页面。如：mailsave.phpstates取值说明100Continue101Switchingprotocols数据交换200OK，完成状态404未找到页面500内部程序错误。其它略open()方法open(method，pageurl，booleanasync,[username],[password])用于初始化一个XMLHttpRequest对象。其中，method参数是必须提供的-用于指定你想用来发送请求的HTTP方法(GET，POST，PUT，DELETE或HEAD)。为了把数据发送到服务器，应该使用POST方法；为了从服务器端检索数据，应该使用GET方法。pageurl参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URL。async参数指定是否请求是异步的-缺省值为true。为了发送一个同步请求，需要把这个参数设置为false。对于要求认证的服务器，你可以提供可选的用户名和口令参数，一般省略。在调用open()方法后，XMLHttpRequest对象把它的readyState属性设置为1(打开)并且把responseText、responseXML、status和statusText属性复位到它们的初始值。另外，它还复位请求头部。注意，如果你调用open()方法并且此时readyState为4，则XMLHttpRequest对象将复位这些值。send()方法send(字符串)在通过调用open()后，你需要把该请求发送到服务器。当readyState值为1时，你才可以调用send()方法；否则的话，XMLHttpRequest对象将引发一个异常。该请求被使用提供给open()方法的参数发送到服务器。当async参数为true时，send()方法立即返回，从而允许其它客户端脚本处理继续。在调用send()方法后，XMLHttpRequest对象把readyState的值设置为2(发送)。当服务器响应时，在接收消息体之前，如果存在任何消息体的话，XMLHttpRequest对象将把readyState设置为3(正在接收中)。当请求完成加载时，它把readyState设置为4(已加载)。对于一个HEAD类型的请求，它将在把readyState值设置为3后再立即把它设置为4。对于GET方法：一般不需发送数据，所以：send(null);对于POST方法：send(“name=你好&age=20&page=5”);其它方法setRequestHeader()方法该setRequestHeader(DOMStringheader，DOMStringvalue)方法用来设置请求的头部信息。当readyState值为1时，你可以在调用open()方法后调用这个方法；否则，你将得到一个异常。getResponseHeader()方法getResponseHeader(DOMStringheader，value)方法用于检索响应的头部值。仅当readyState值是3或4(换句话说，在响应头部可用以后)时，才可以调用这个方法；否则，该方法返回一个空字符串。getAllResponseHeaders()方法该getAllResponseHeaders()方法以一个字符串形式返回所有的响应头部（每一个头部占单独的一行）。如果readyState的值不是3或4，则该方法返回null。AJAX实战与应用AJAX：实战篇Jwork框架的ajax我们知道，web编程，最主要的就是实现客户端（IE）和服务器（Apache）的接收和发送，这是做web开发的基础。其它的所有应用都是建立在这个基础之上的。而AJAX，最主要的“亮点”就是异步通信，即实现了页面的不刷新。通过Javascrip实现了局部更新。所以，AJAX与服务器端的交流方式，也主要是GET和POST。Jwork框架，是新东方一搏PHP01版全体师生经验的结晶，它为PHP的开发提供了“中国式”框架，易用性框架。Jwork框架的Ajax，完全采用javascript实现，从而可以运用到php、jsp、asp、.net等所有web开发语言当中。JworkAjax的特点：1、支持GET和POST提交数据方式。2、支持主流浏览器。3、支持控件和DIV所有html元素的数据回显。4、使用简单，一句话即可实现AJAX。jget方法jget(url,output)首先，你要注意，jget方法，是一个javascript的function（方法），它不是php的方法。Jget相当于就是表单的get方法，只不过这里是异步的实现。Url：表示你要提交请求的网址。网址中可带一个或多个参数。Output：表示服务器回调的值显示的位置。一般为input或div标签的id名。应用演示：用户名是否重复和验证实现。jpost方法jpost(url,input,output)jpost有三处参数：Url：表示你要提交请求的网址。网址中可带一个或多个参数。Input：表示通过表单POST方式提交的数据。形式为：name=ccopen&id=20Output：表示服务器回调的值显示的位置。一般为input或div标签的id名。应用演示：用户登陆的实现。