Ajax入门

Ajax是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。例如在Google的搜索栏中输入搜索内容时，会根据当前输入内容出现提示列表，这里就用到了Ajax技术。

Ajax技术是对传统Web应用的一种补充与改善，提高了用户的顺畅体验，用户不需要繁琐的刷新等待即可获取新数据。

Ajax = Asynchronous JavaScript and XML 即异步的JavaScript 和XML，Ajax不是新的编程语言， 而是一种使用现有标准的新方法。Ajax的核心内容是XMLHttpRequest对象，Ajax使用XMLHttpRequest异步发送请求，并使用XMLHttpRequest对象的responseText或responseXML来获取服务器相应，在通过DOM操作将服务器响应动态加载到当前页面中。

所以主要任务分为创建XMLHttpRequest对象，使用XMLHttpRequest对象异步发送请求，并设置响应函数监听服务器的响应。

1. 创建XMLHttpRequest对象

var xmlhttp;

在IE5、IE6浏览器中，创建XMLHttpRequest对象

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"):

在IE7+、Chrome、Firefox、Opera等浏览器中，则用如下方式

xmlhttp = new XMLHttpRequest();

所以，总的创建方式如下

var xmlhttp;

if(window.XMLHttpRequest){

xmlhttp = new XMLHttpRequest();

}else{

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

2. 使用XMLHttpRequest对象异步发送请求

将请求发送到服务器，使用XMLHttpRequest对象的open()和send方法

假设我们服务器中有一个返回当前时间的接口，地址相对当前网页为getTime,方法为GET

则可以用

xmlhttp.open("GET","getTime",true);

xmlhttp.send();

xmlhttp的open方法的第一个参数是请求类型GET或POST，第二个参数为请求url，和from中的action类似，第三个参数为是否异步发送，绝大部分情况下为true

3.设置响应函数

XMLHttpRequest的readyState属性为XMLHttpRequest的状态。从0到4发生变化。0 :请求未初始化 1:服务器连接已建立 2:请求已接收 3:请求处理中 4:请求已完成，且响应已就绪。XMLHttpRequest的status为返回结果代码， 200 : "OK" 404 : 未找到页面

XMLHttpRequest的onreadystatechange属性用于存储函数，当readyState属性改变时，就会调用该函数。

我们设置请求已完成且响应已就绪即readyState ==4 ，且状态为200时，改变id为myDiv的div中的内容为服务器返回的内容。可以使用XMLHttpRequest对象的responseText属性或responseXML属性来获得服务器的响应。

如果来自服务器的相应并非XML，则使用responseText属性。如果来自服务器的响应是XML,且要需要作为XML对象进行解析，则使用repsonseXML属性；

在本例中，将服务器返回的时间加载到id为myDiv的div区域中

xmlhttp.onreadystatechange = function(){

if(xmlhttp.readyState == 4 && xmlhttp.status == 200){

document.getElement("myDiv").innerHTML = xmlhttp.responseText;

}

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!