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, Safariif (window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest();} else { // code for IE6, IE5xmlHttp = 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);
}