1.什么是Ajax
Ajax：是Asynchronous Javascript And XML的简写，即异步JavaScript和XML
XMLHttpRequest 提供的异步，是指基于 ajax 的应用在服务器中的通信方式。
传统的 web 应用，每次用户向服务器请求获得新数据时，浏览器都会丢弃当前页面，而等待重新加载新的页面。这样一来，在服务器完全响应之前，用户浏览器将一片空白，用户的动作必须中断。而异步指用户发送请求后，完全无需等待，请求会在后台发送，不会阻塞用户当前活动。这样一来，用户无须等待第一次请求得到完全响应，就可以发送第二次请求。借用网上一张图来说明：
用途：动态刷新局部数据，无需下载整个页面，从而带来更好的用户体验
Ajax核心：是 JS 对象 XMLHttpRequest。该对象提供了异步发送请求的能力。它可以通过 JS 向服务器发送请求，处理服务器响应，避免阻塞用户动作。
2. XMLHttpRequest对象的方法与属性
2.1XMLHttpRequest 对象方法描述
(1)abort()停止当前请求
(2)getAllResponseHeaders()把HTTP请求的所有响应首部作为键/值对返回
(3)getResponseHeader("header")返回指定首部的串值
(4)open("method","URL",[asyncFlag],["userName"],["password"])建立对服务器的调用。method参数可以是GET、POST或PUT。 url参数可以是相对URL或绝对URL。 这个方法还包括3个可选的参数，是否异步，用户名，密码
(5)send(content)向服务器发送请求
(6)setRequestHeader("header", "value")把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。 设置header并和请求一起发送 (‘post‘方法一定要 ).
2.2.XMLHttpRequest 对象属性描述
(1)onreadystatechange状态改变的事件触发器，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数. onreadystatechange 属性存有处理服务器响应的函数
xmlHttp.onreadystatechange=function()
{
//代码
}
(2)readyState，readyState表示HTTP请求的运行状态，有5个可取值：
0 (未初始化) 对象已建立，但是请求尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，请求已提出，尚未调用send方法
2 (发送数据) send方法已调用，请求已经发送，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，请求已经处理中，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成) 数据接收完毕,请求已经完成，此时可以通过通过responseXml 和responseText获取完整的回应数据
(3)responseText服务器的响应，返回数据的文本。
(4)responseXML服务器的响应，返回数据的兼容DOM的XML文档对象，这个对象可以解析为一个DOM对象。
(5)responseBody 服务器返回的主题（非文本格式）
(6)responseStream服务器返回的数据流
(7)status 则表示了HTTP所请求数据的状态[常见的反馈码]（如：404 = "文件末找到" 、200 ="成功" ，等等）
(8)statusText服务器返回的状态文本信息 ， HTTP状态码的相应文本（OK或Not Found（未找到）等等）
3. 一个XHR建立一个典型的AJAX请求的四步骤：
第一步：new 一个XHR对象
第二步：调用open方法
第三步：send（）方法，发送一些信息
第四步：监听onreadystatechange（）事件，主要插入成功后要做的事情
具体代码：
<script>
第一步： // IE浏览器
if(ActiveXObject){
// 微软目前AJAX最新版本
var xmlhttp = new ActiveXObject("Msxm12.XMLHTTP.6.0");
}else{
// 主流浏览器
var xmlhttp = new XMLHttpRequest();
}
第二步： // 创建HTTP请求
// open(method, url, asynchronous, user, password);
// method：请求方法（post，get）
// url：请求地址（是具体要接收数据的地址）
// asynchronous：同步或异步请求（true是异步，false是同步，默认是true，可不填）
// user：（指定请求用户名，可不填）
// password：（指定请求密码，可不填）
xmlhttp.open(‘get‘,‘url‘); //open()方法并不会真正发送请求，而只是启动一个请求以备发送。
第三步： // 如果用的是post方式请求，要在send之前设置HTTP头
xmlhttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
send(content);
// 发送请求，content是要发送的内容，一般post方式需要发送内容写在send的参数里，如果没有则填null，send()方法接收一个参数，是向请求主体发送的数据，如果不需要向请求体发送数据，则参数就为null,调用send()后，请求就会被分派到服务器。
第四步：xmlhttp.onreadystatechange = function(){
if((xmlhttp.readyState==4) && (xmlhttp.status)==200){
alert(xmlhttp.responseText); // 返回的数据内容
}else{
alert(‘请求失败‘);
}
}
</script>4. Ajax运行机制
首先创建一个xmlHttpRequest的对象之后xmlHttp.readyState的值是0了，然后xmlHttp.onreadystatechange = handlestatechange没有运行。紧接着是open()，这个函数发生了之后xmlHttp.readyState的值是1了，那么就会有一个断点在open()函数处断开，保留现场，紧接着又返回到xmlHttp.onreadystatechange = handlestatechange运行，然后再执行Send()函数，这个函数发生了之后xmlHttp.readyState的值是2了，接着又返回到xmlHttp.onreadystatechange = handlestatechange运行。
异步的ajax实际上使用了单独的进程，因此你无法获取到这个返回值，而且，在你调用ajax()方法时你根本无法知道它什么时候会执行完毕。因此，只能提供回调方法，ajax对象可以将参数传递到你提供的回调方法中。
5.实例： //验证表单中的用户名是否已经存在
function checkName(){
var namevalue=ele.name.value;
if(namevalue==""){
ele.imgs[0].setAttribute("width","30px");
ele.imgs[0].setAttribute("height","30px");
ele.imgs[0].setAttribute("src","img/wrong.jpg"); //对应图标
ele.imgs[0].style.display = "inline"; //显示
biaoqian1.innerHTML=‘<strong>用户名不能为空</strong>‘;
return false;
}
else{
//这个是使用get方式向后台传递数据的参数写在url后面,使用时间戳或随机数来确保无缓存的请求数据.
var url=‘http://localhost/chkname.php?username=‘+namevalue+‘&‘+‘t=‘+new Date()*1;
//使用post方式的url
// var url=‘http://localhost/chkname.php‘;
var cb = ajaxResultdeal; //处理响应信息的回调函数
toAjax(url,cb)
}
}
function toAjax(url,callback){
var namevalue=ele.name.value;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange =function(){
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
if(callback) {
callback(xmlhttp.responseText);
}
}
}
}
//发送数据，开始与服务器进行交互
//post发送请求 是因为PHP中的$_POST[‘key‘]方法，需要用到键值对的格式，
因此必须申明请求头部：setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘) 以表单提交数据的方式来发送数据到服务器。
xmlhttp.open(‘POST‘,url,true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlhttp.send("username="+namevalue);
//get发送请求
/*xmlhttp.open(‘GET‘,url,true);
xmlhttp.send(null);*/
}
var ajaxResult = false;//全局变量
//处理响应的回调函数
function ajaxResultdeal(response){
ajaxResult = response; //传递给全局变量
if(ajaxResult == ‘1‘){
ele.imgs[0].setAttribute("width","30px");
ele.imgs[0].setAttribute("height","30px");
ele.imgs[0].setAttribute("src","img/right.jpg"); //对应图标
ele.imgs[0].style.display = "inline"; //显示
biaoqian1.innerHTML="";
ajaxResult= true;
}
else{
ele.imgs[0].setAttribute("width","30px");
ele.imgs[0].setAttribute("height","30px");
ele.imgs[0].setAttribute("src","img/wrong.jpg"); //对应图标
ele.imgs[0].style.display = "inline"; //显示
biaoqian1.innerHTML=‘<strong>该用户名已经存在</strong>‘;
ajaxResult=false;
}
ajaxResultreturn(); //用这个函数来返回表单中的name项，返回真还是假，用于提交表单前的验证函数。
}
function ajaxResultreturn(){
if(ajaxResult){return true;}
else{
return false;
}
}
后台php,为了简单，没有从数据库取得数据，只是简单判断，页面对post，获得get 的请求的获得：
/*$username=$_POST[‘username‘];*/ //已post提交的获得方式，
$username=$_GET[‘username‘];//以get提交的获得方式
if($username=="11"){
$reback = ‘1‘;
echo $reback;
}输入用户名为11时，页面实时返回效果图如：
输入其他用户名，则页面实时返回效果图：
5.总结
ajax的实现了：
1、页面无刷新，在页面内与服务器通信，给用户的体验非常好。
2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
自己根据基本知识，写了简单的注册，使用ajax技术判断用户名是否已经存在，分别使用了post方式，get方式，来进行传送，后期需要完善的，学习使用Json编码请求，以及学习跨源资源共享。
本文出自 “梦想需要坚持” 博客，请务必保留此出处http://xiyin001.blog.51cto.com/9831864/1766121
原文地址：http://xiyin001.blog.51cto.com/9831864/1766121
