【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); 
}