where
传统的网页(不使用AJAX)如果需要更新内容,则必须重新刷新整个页面。这样不仅用户的体验极差,效率低,而且容易造成数据丢失。于是AJAX应运而生!
what
AJAX是一种用户创建快速动态网页的技术,它等于异步JavaScript和XML。他并不是一种新的语编程言,而是将很多知识(XML,DOM,JavaScript,jQuery,HTML,CSS....)重新融合的一个新的知识框架。
AJAX通过在后台与服务器进行少量的数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某些部分进行更新。
AJAX核心--XMLHttpRequest
XMLHttpRequest是XML的核心和基础,它的作用和AJAX一样,都是用于后台与服务器进行少量的数据交换。
AJAX五步使用法:
1.建立XMLHttpRequest对象。
//判断浏览器是否只是xmlHttpRequest if (window.XMLHttpRequest) {//如果支持,则创建一个 xmlhttp=new XMLHttpRequest(); } else {// 如果不支持,则创建一个ActiveXObject对象 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
3.使用open方法设置和服务器交互的基本信息。
xmlhttp.open("method","URL",async);
(1)、method,请求的类型,有“GET”与“POST”,区别如下:
a、get简单也更快,在大多数情况下都能使用。
b、post相对来说更加安全、稳定和可靠,适合向服务器发送大量数据,或者无法使用缓存文件或者发送包含未知字符的用户输入。
(2)、url:文件在服务器的位置。
(3)、async:true表示异步,false表示同步。
a、同步的时候规定响应处于onreadystatechage事件中的就绪状态时执行的函数,相当于AJAX失效。
b、异步的时候规定无需等待服务器的响应,在等待服务器响应时就可以执行其他脚本,响应就绪后对响应进行处理。
4.设置发送的数据,开始和服务器交互。
xmlhttp.send(content);
5.在回调函数中判断交互是否结束,响应是否正确,并根据需要获取服务器返回的数据,更新页面内容。这里使用responseText和respoonseXML属性。
readState:0=未初始化。对象已建立,未调用open。
1=open方法成功调用后,send方法未调用。2=send方法已经调用,尚未开始接收数据。
3=正在接收数据。HTTP响应头信息已经接受,相应数据尚未接收完成。
4=完成。相应数据接收完成。