AJAX

1.认识Ajax

a) Ajax,Asynchronous Javascript And Xml，异步的JavaScript和xml。

b) Ajax不是新的技术，是已有技术的更好的使用方式。

c) Ajax是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的艺术。

2.Ajax的使用方式

2.1创建XMLHttpRequest对象

XMLHttpRequest对象时Ajax的核心对象，所有的方法和属性都通过该对象使用。

2.2监听onreadystatechange事件

a)readyState存有XMLHttpRequest的状态信息

>0:请求未初始化；

>1:服务器连接已建立；

>2:请求已接收；

>3:请求处理中；

>4:请求完成且响应已就绪；

b)states表示响应状态码，常见的有200（成功跳转）,304,404（无效页面）等。

2.3初始化请求

open方法：用于打开和数据库的链接，参数如下：

》method:请求方法，get或post.

》url:请求的路径.

》async:是否异步，默认为true.

2.4发送请求

send方法：用于发送请求，post方式提交时，可在send方法中添加请求参数。

2.5接收响应

a)responseTest:用于获取文本响应信息。

b)responseXML:用于获取xml格式的响应信息。

function getMsg() {

var xmlHttp;

// [1] 创建XMLHttpRequest对象

if(window.XMLHttpRequest) {// 现代浏览器

xmlHttp = new XMLHttpRequest();

} else if(window.ActiveXObject) {// ie5, ie6

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

} else {

alert("请升级浏览器!");

return;

}

// [2] 监听onreadystatechange事件

xmlHttp.onreadystatechange = function() {

console.info(xmlHttp.readyState);

if(xmlHttp.readyState == 4) {

if(xmlHttp.status == 200 || xmlHttp.status == 304) {

// [5] 接收响应信息

var result = xmlHttp.responseText;

document.getElementById("box").innerHTML = result;

}

}

};

// [3] 准备请求信息

xmlHttp.open("get", "msg", true);

// [4] 发送请求

xmlHttp.send();

}

3.通过AJAX验证用户名是否可用

window.onload = function() {

document.getElementById("uname").onblur = function() {

var xmlHttp;

if(window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

} else {

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

}

xmlHttp.onreadystatechange = function() {

if(xmlHttp.readyState == 4) {

if(xmlHttp.status == 200 || xmlHttp.status == 304) {

var result = xmlHttp.responseText;

if(result == 0) {

document.getElementById("unameSpan").innerHTML = "√";

} else {

document.getElementById("unameSpan").innerHTML = "×";

}

}

}

};

xmlHttp.open("get", "uname?uname=" + this.value);

xmlHttp.send();

};

};