【JavaScript】AJAX总结（异步JavaScript和XML）

AJAX介绍

通过 AJAX，你可以创建更好、更快以及更友好的 WEB 应用程序。

AJAX 基于 JavaScript 和 JavaScript的XMLHttpRequest对象。

AJAX 应用程序独立于浏览器和平台,是浏览器端技术非服务器端.

AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

它可以实现在不重载页面的情况下, 比如:用户名注册检测、动态load或创建某块内容。

AJAX 使用 Http 请求

传统的HTTP请求,是每当用户提交输入后服务器都会返回一张新的页面,可有时我们需要的只是更新部分页面.

XMLHttpRequest对象：

通过使用 XMLHttpRequest 对象，web 开发者可以做到在页面已加载后从服务器更新页面！

用户可以停留在同一个页面，他不会注意到脚本在后台请求过页面，或向服务器发送过数据。服务器处理完后会回传结果然后更新页面。

基础语法

var xmlHttp;
function createXmlHttp() {
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}//使用ActiveXObject，其他浏览器使用XMLHttpRequest内建对象

XMLHttpRequest对象三个属性

onreadystatechange 属性

存有处理服务器响应的函数xmlHttp.onreadystatechange=function() { // 我们需要在这里写一些代码 }

readyState 属性

存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange后面的函数就会被执行。

responseText 属性

可以通过 responseText 属性来取回由服务器返回的数据。

xmlHttp.onreadystatechange = function() { 
 //服务器的HTTP状态码==200即响应成功
if(xmlHttp.readyState==4 && xmlHttp.status==200) { 
// 从服务器的response获得数据 
alert(xmlHttp.responseText);
} else{document.getElementById(“div1”).innerHTML=“<img src=‘loadding.gif’/>”
}
}

向服务器发送一个请求

要想把请求发送到服务器，我们就需要使用 open() 方法和 send() 方法。

open() 方法:

第一个参数定义发送请求所使用的方法（GET 还是 POST）。第二个参数规定服务器端脚本的 URL。第三个参数规定应当对请求进行异步地处理。

send() 方法:

可将请求送往服务器。如：

xmlHttp.open("GET","time.jsp?username=tom",true); 
xmlHttp.send(null);

完整代码 (校验用户名唯一性)

//校验用户名唯一性
function NameOnly(){
//alert(1);
createXmlHttp();
var username = document.getElementById("username").value;
var url = "http://192.168.8.4:8080/reg.jsp?username=" + username + "&date=" + new Date();
//当对象的状态发生改变，就执行一次回调函数
//alert(22);
//alert(url);
xmlHttp.onreadystatechange = function(){
//alert(xmlHttp.readyState);
if(xmlHttp.readyState == 4) {//代表服务器已经处理完该请求
//alert(xmlHttp.status);
//if(xmlHttp.status==200 || xmlHttp.status==0) {//状态码==200 代表状态码是正常的(404 500不正常)
//如果在本地运行(如：C:\\ajax\\ helloworld.htm)，那么status属性不管是在”成功”还是”页面未找到”的情况下，都返回的是0。
//也就是说没有通过Web服务器形式的Ajax请求返回值都是0;
//alert(22);
var msg = xmlHttp.responseText; //获取服务器端的响应文本
if(msg==1){alert("被注册！！");} 
else alert("该账号可以注册");
   xmlHttp.responseXml();//如果服务器端返回的是xml文档
//}
}
};
xmlHttp.open("GET", url, true);    
xmlHttp.send(null); 
}