本篇文章主要讲述了关于ajax的工作流程情况,还有ajax原理,一些常用的属性介绍,现在让我们一起来看这篇文章吧
AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML)。
是一种创建交互式网页应用的网页开发技术。它:
使用XHTML+CSS来表示信息;
使用JavaScript操作DOM(Document Object Model)进行动态显示及交互;
使用XML和XSLT进行数据交换及相关操作;
使用XMLHttpRequest对象与Web服务器进行异步数据交换;
使用JavaScript将所有的东西绑定在一起。
AJAX原理:
AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。它的核心是JavaScript对象XmlHttpRequest,这个对象使我们可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。AJAX采用异步交互过程,它在用户与服务器之间引入一个中间媒介,从而消除了网络交互过程中的处理—等待—处理—等待缺点。用户的浏览器在执行任务时即装载了AJAX引擎,AJAX引擎用JavaScript语言编写,通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。AJAX引擎允许用户与应用软件之间的交互过程异步进行,独立于用户与网络服务器间的交流。现在,可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作,内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行,使用AJAX,可以为JSP、开发人员、终端用户带来可见的便捷。
既然Ajax的核心是XmlHttpRequest对象那就必须得介绍一下:
常用属性:
Onreadystatechange 指定当readyState属性改变时的事件处理函数。只写
readyState 表示Ajax请求的当前状态。只读它的值用数字代表。
0 代表未初始化。 还没有调用 open 方法
1 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕
每次 readyState 值的改变,都会触发 readystatechange 事件。
responseText 将响应信息作为字符串返回.只读。它是一个HTML,XML或普通文本,这取决于服务器发送的内容。当 readyState 属性值变成 4 时, responseText 属性才可用,表明 Ajax 请求已经结束。
responseXML 将响应信息格式化为Xml Document对象并返回,只读,只有服务器发送了带有正确首部信息的数据时, responseXML 属性才是可用的。 MIME 类型必须为 text/xml
status 返回当前请求的http状态码.只读
常用状态码及其含义:
404 没找到页面(not found)
403 禁止访问(forbidden)
500 内部服务器出错(internal service error)
200 一切正常(ok)
304 没有被修改(not modified)(服务器返回304状态,表示源文件没有被修改 )
在 XMLHttpRequest 对象中,服务器发送的状态码都保存在 status 属性里。通过把这个值和 200 或 304 比较,可以确保服务器是否已发送了一个成功的响应(想看更多就到PHP中文网AJAX开发手册栏目中学习)
常用方法:
Open 创建一个新的http请求,并指定此请求的方法、URL以及验证信息
Send 发送请求到http服务器并接收回应 如果请求为get不会发送任何数据
setRequestHeader 单独指定请求的某个http头
AJAX工作流程:
1 对象初始化
function createXmlHttpRequest(){ var xmlHttp; try{ //Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch (e){ try{ //Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }catch (e){} } } return xmlHttp; }
2 发送请求
调用XMLHttpRequest对象的open和send方法,按照顺序,open调用完毕之后才调用send方法。
xmlHttp.open("get","../servlet/RegisterServlet?timeStamp="+new Date().getTime(),true) xmlHttp.send(null);
send的参数如果是以Post方式发出的话,可以是任何想传给服务器的内容,但必须先调用setRequestHeader方法,修改MIME类别:
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
3 服务器接收处理数据并返回,指定事件处理程序处理返回信息
每次 readyState 属性的改变都会触发 readystatechange 事件只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就可以了
xmlHttp.onreadystatechange = function(){ if (xmlHttp.readystate == 4) { if (xmlHttp.status == 200 || xmlHttp.status == 304) {//XMLHttpRequest对成功返回的信息有两种处理方式://responseText: 将传回的信息当字符串使用;//responseXML:将传回的信息当XML文档使用,可以用DOM处理。 } } };
4 客户端接收
5 修改客户端页面内容
本篇文章到这就结束了(想看更多就到PHP中文网AJAX使用手册栏目中学习),有问题的可以在下方留言提问。
Atas ialah kandungan terperinci AJAX的工作流程有哪些?ajax的工作流程介绍(附实例). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!