我们在之前jsp中编写的前端页面，在没有学到AJAX时，会遇到这样的问题，我们返回响应的结果展示在页面总会替代掉当前页面，展示出新的内容，所有当我们想要保留一些页面上的信息，去展示响应的结果时就可以使用AJAX技术。

AJAX其实就是页面局部刷新技术，他普遍应用在地图展示，搜索框提示语等功能上，他的运行原理大致是这样的，

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

1.创建ajax具体流程

• 1创建ajax引擎对像 2.声明监听函数
• 3.创建并发送ajax请求
• 4.其他处理

一个例子：用来判断输入框中的用户名字是否已被占用

function checkUname(){//获取用户名信息var uname=document.getElementById("uname").value;//创建ajax引擎对象var ajax;if(window.XMLHttpRequest){ajax=new XMLHttpRequest();}else if(window.ActiveXObject){ajax=new ActiveXObject("Msxml2.XMLHTTP");}//声明监听函数ajax.onreadystatechange=function(){//判断ajax状态码if(ajax.readyState==4){//判断响应状态码if(ajax.status==200){//获取响应数据（普通字符串或者json格式的字符串）var data=ajax.responseText;//处理响应数据if(eval(data)){//获取Span对象var span=document.getElementById("unameSpan");//设置span颜色span.style.color="red";//将数据填充到span中span.innerHTML="用户名已被注册";}else{//获取Span对象var span=document.getElementById("unameSpan");//设置span颜色span.style.color="green";//将数据填充到span中span.innerHTML="用户名ok";}     }   }   //创建并发送请求   //创建请求ajax.open("get","data?uname="+uname);//发送请求ajax.send(null);
}

这里的代码含义具体是这样的：

if(window.XMLHttpRequest){//火狐ajax=new XMLHttpRequest();
}else if(window.ActiveXObject){//ieajax=new ActiveXObject("Msxml2.XMLHTTP");
}

这是创建AJAX对象的代码，上面的是对于火狐浏览器而说的，下面的是ie浏览器的对象，因为浏览器的兼任问题，所以最好写出这两个方式。

ajax.onreadystatechange=function(){}

这是声明事件监听：监听ajax对象的属性readystate的值，因为一旦readystate的值发生改变就会触发声明的函数的执行。我们想要在ajax发送完请求后做出的处理，可以从状态码判断状态，具体的状态码是这样的：

ajax的状态码之readyState的值:

• 0:表示ajax引擎对象创建
• 1:表示请求创建但是未发送 ajax.open("get","my");
• 2:请求发送 ajax.send(null);
• 3:请求处理完毕，正在接收响应内容
• 4:响应内容接收完毕(重要状态)

ajax.status

这是表示服务器响应的状态码：大致与服务器返回的一致，例如常见的404，500等

ajax之响应状态码：ajax.status

• 200:表示一切正常
• 404:资源未找到
• 500:服务器内部错误

 ajax.open("get","data?uname="+uname);

这时创建ajax的发送请求

创建ajax请求(设置异步或者同步)ajax.open(method,url,ansyc);

• 其中：method:表示请求方式
• get方式:请求数据以?隔开的形式拼接在url的后面。并且请求数据不能写在send方法中
• post方式:post方式需要单独的进行请求数据的设置。使用ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");设置请求数据为键值对数据。如果有请求数据则ajax.send("键值对数据&键值对数据..."),如果没有请求数据，则ajax.send(null)
• url:请求地址
• ansyc:设置异步或者同步请求，true表示异步，false，表示同步。默认是异步的。
• 异步：当前js函数继续执行，无须等待ajax请求的响应以及响应的处理。
• 同步：当前js函数会等待ajax请求以及响应，当ajax响应处理完毕后，继续执行函数的剩余代码。

ajax.send(null);

发送ajax请求

• //get方式
• ajax.send(null);

• //post方式
• ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
• ajax.send("uname=张三&pwd=123");