Ajax技术简介
在传统的web应用中，每次请求服务器都会生成新的页面，用户在提交请求之后，总要等待服务器的响应。如果前一个请求没得到响应，则后一个请求就不能发送。由于这是一种独占式的请求，因此如果服务器响应没有结束，用户就只能等待或者不断刷新页面。在等待期间，由于新的页面没有生成，整个浏览器是一片空白。对用户而言，这是一种不连续的体验，同时，频繁的刷新页面也会使得服务器的负担加重。Ajax技术使用JavaScript异步发送请求，不用每次请求都重新加载页面，发送请求时可以继续进行其他操作，在服务器响应完成后，再使用JavaScript将响应展示给用户。
Ajax技术的优点：使用Ajax技术，从用户发送请求到获得响应，当前用户界面在整个过程中不会受到干扰。而且可以在必要的时候只更新页面的一小部分，而不用刷新整个界面，即“无刷新”技术。避免了重复加载、浪费网络资源的现象，提高了加载速度；提供连续的用户体验，而不被页面刷新中断。
Ajax技术使用
Ajax是由JavaScript、XML、CSS等几种技术整合而成。Ajax的执行流程是，用户界面触发事件调用JavaScript，通过Ajax引擎—–XMLHttpRequest对象异步发送请求到服务器，服务器返回XML、JSON或HTML等格式的数据，然后利用返回的数据使用DOM（SAX）和CSS技术局部更新用户界面。
- JavaScript语言：Ajax技术的主要开发语言。
- XML、JSON、HTML等：用来封装请求或响应的数据格式。
- DOM（文档对象模型）：通过DOM属性或方法修改页面元素，实现页面局部刷新。
- CSS：改变样式，美化页面效果，提升用户体验。
- Ajax引擎：即XMLHttpRequest对象，以异步方式在客户端与服务器端之间传递数据。
XMLHttpRequest类
XMLHttpRequest对象可以在不刷新当前页面的情况下向服务器端发送异步请求，并接受服务器端的响应结果，从而实现局部更新当前页面功能。
1.创建XMLHttpRequest对象
- 老版本IE（IE5和IE6）。
XMLHttpRequest xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");- 新版本IE和其他大部分浏览器（推荐使用）。
XMLHttpRequest xmlHttpRequest=new XMLHttpRequest();2.XMLHttpRequest对象常用的属性和方法
| 方法名称 | 说明 |
|---|---|
| open(String method,String url,boolean async,String user,String password) | 用于创建一个新的请求。参数method：设置HTTP请求方法，如POST、GET等，对大小写不敏感；参数url：请求的url地址；参数async：可选，指定此请求是否为异步方法，默认为true；参数user：可选，如果服务器需要验证，此处需要指定用户名否则会弹出验证窗口；参数password：可选，验证密码，如果用户名为空，此值会被忽略。 |
| send(String data) | 发送请求到服务器端。参数data：字符串类型，通过此请求发送数据。此参数决定于open方法中的method参数。如果method值为POST，可以指定该参数。如果method值为GET，该参数为null。 |
| abort() | 取消当前请求。 |
| setRequestHeader(String header,String value) | 单独设置请求的某个HTTP头信息。参数header：要指定的HTTP头名称；参数value：要指定的HTTP头名称所对应的值。 |
| getRequestHeader(String header) | 从响应中获取指定的HTTP头信息。参数header：要获取的指定HTTP头。 |
| getAllResponseHeaders() | 获取响应的所有HTTP头信息。 |
| 属性名称 | 说明 |
|---|---|
| onreadystatechange | 设置回调函数 |
| readyState | 返回请求的当前状态：0——未初始化；1——开始发送请求；2——请求发送完成；3——开始读取响应；4——读取响应结束。 |
| status | 返回当前请求HTTP状态码：200——正确返回；404——找不到访问对象。 |
| statusText | 返回当前请求的响应行状态 |
| responseText | 以文本形式获取响应值 |
| responseXML | 以XML形式获取相应值，并且解析成DOM对象返回 |
实例
1.使用Ajax发送GET请求及处理响应
//1.创建XMLHttpRequest对象
if(window.XMLHttpRequest){//返回值为true说明是新版本IE或其他浏览器
xmlHttpRequest=new XMLHttpRequest();
}else{//返回值为false说明是老版本IE浏览器
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.设置回调函数
xmlHttpRequest.onreadystatechange=callBack;
//3.初始化XMLHttpRequest对象
var url="userServlet?name="+name;//服务器端url地址，name为用户名文本框获取的值
xmlHttpRequest.open("GET",url,true);
//4.发送请求
xmlHttpRequest.send(null);
//回调函数callBack()中处理服务器响应的关键代码
function callBack(){
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
var data=xmlHttpRequest.responseText;
if(data=="true"){
$("#nameDiv").html("用户名已被使用");//nameDiv为显示信息的div的id
}else{
$("#nameDiv").html("用户名可以使用");
}
}
}2.使用Ajax发送POST请求及处理响应
//1.创建XMLHttpRequest对象
if(window.XMLHttpRequest){//返回值为true说明是新版本IE或其他浏览器
xmlHttpRequest=new XMLHttpRequest();
}else{//返回值为false说明是老版本IE浏览器
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.设置回调函数
xmlHttpRequest.onreadystatechange=callBack;
//3.初始化XMLHttpRequest对象
var url="userServlet";//服务器端url地址
xmlHttpRequest.open("POST",url,true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送请求
var data="name="+name;//需要发送的数据信息，name为用户名文本框获取的值
xmlHttpRequest.send(data);
//回调函数callBack()中处理服务器响应的关键代码
function callBack(){
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
var data=xmlHttpRequest.responseText;
if(data=="true"){
$("#nameDiv").html("用户名已被使用");//nameDiv为显示信息的div的id
}else{
$("#nameDiv").html("用户名可以使");
}
}
}
对应服务器端的代码：
public class UserServlet extends HttpServlet{
public void doGet(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException{
String name=requset.getParameter("name");
boolean used=false;
if(name.equals("Ajax")){
used=true;
}else{
used=false;
}
response.setContentType("text/html;charset=UTF-8");
PrintWriter out=response.getWriter();
out.print(used);
out.flush();
out.close();
}
public void doPost(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException{
request.setCharacterEncoding("UTF-8");
this.doGet(request,response);
}
}
写了这么多，发现具体的步骤还是挺多的还不容易记住，那有没有更简便的方法实现这个异步请求呢？答案是肯定的。
使用JQuery实现Ajax
通过原生的javaScript实现Ajax相对比较复杂，并且如果服务器返回复杂结构的数据（如XML格式），处理起来也会比较繁琐，此外还要考虑浏览器的兼容性等一系列问题。而jQuery将Ajax相关的操作都进行了封装，只需简单调用一个方法即可完成请求发送和复杂格式结果的解析。
$.ajax({
"url" :"userServlet", //要提交的url路径
"type" :"GET", //发送请求的方式
"data" :"name="+name, //发送到服务器的数据
"dataType" :"text", //指定返回的数据格式
"success" :callBack, //响应成功后要执行的代码
"error" :function(){ //请求失败后要执行的代码
alert("用户名验证时出现错误，请稍后再试或与管理员联系");
}
});
//响应成功时的回调函数
function callBack(data){//入参表示响应结果
if(data=="true"){
$("#nameDiv").html("用户名已被使用");
}else{
$("#nameDiv").html("用户名可以使用");
}
}