JavaScript ajax技术原理解析
ajax主要用于异步通信,实现局部刷新,改变同步请求的不便,供了更好的用户体验.并非一种新的技术,而是几种原有技术的结合体.
ajax主要由以下几种技术组成
基于 web标准(standards-based presentation)XHTML+CSS的表示;
使用 DOM(Document Object Model)进行动态显示及交互;
使用 XML和XSLT进行数据交换及相关操作;
使用 XMLHttpRequest进行异步数据查询与检索;
使用 JavaScript来绑定和调用;
ajax工作流程
ajax无非是两个过程,发出请求和响应请求,并且它完全是一种客户端的技术.
XMLHttpRequest用来向服务器发出一个请求,它的作用是整个ajax实现的关键.
可以把服务器端看成一个数据接口,它返回的可以是一个纯文本流,可以是XML格式,可以是Html,可以是Javascript代码,也可以只是一个字符串.
客户端在异步获取这个结果后,不是直接显示在页面,而是先由javascript来处理,然后再显示在页面.
XMLHttpRequest是ajax的核心机制,需要用JavaScript来创建XMLHttpRequest类向服务器发送HTTP异步请求,可以及时向服务器提出请求和处理响应,而不阻塞用户,达到无刷新的效果.
XMLHttpRequest的属性:
onreadystatechange 每次状态改变所触发事件的事件处理程序
responseText 从服务器进程返回数据的字符串形式
responseXML 从服务器进程返回的DOM兼容的文档数据对象
status 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)
status Text 伴随状态码的字符串信息
readyState 对象状态值
0 (未初始化)对象已建立,但是尚未初始化(尚未调用open方法).
1 (初始化)对象已建立,尚未调用send方法.
2 (发送数据)send方法已调用,但是当前的状态及http头未知.
3 (数据传送中)已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误.
4 (完成)数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据.
XMLHttpRequest的两个方法,open()和send(),发送HTTP请求.
xmlhttp_request.open('GET', URL, true);
xmlhttp_request.send(null);
open()的
第一个参数是HTTP请求方式-GET,POST或任何服务器所支持的您想调用的方式.按照HTTP规范,该参数要大写;否则,某些浏览器(如Firefox)可能无法处理请求.
第二个参数是请求页面的URL.
第三个参数设置请求是否为异步模式.如果是TRUE,JavaScript方法将继续执行,而不等待服务器响应.
send()的方法用来发送请求.