Ajax原理

1、注册存在的问题

　　打断用户操作

　　网络传输性能下降

2、Ajax是什么？

　　Ajax是一种用来改善用户体验的技术，其实质是，使用XMLHttpRequest对象异步地向服务器发请求
　　服务器返回部分数据（文本或则xml文档），而不是一个完整的页面，以页面无刷新的效果更改页面中的局部内容
　　注：
　　　　异步：Ajax对象向服务器发送请求时，浏览器不会销毁当前的页面，用户仍然可以对当前页面做其它操作。

3、如何获得Ajax对象

 function getXhr(){
     var xhr=null;
     if(window.XMLHttpRequest){
           xhr=new XMLHttpRequest();
     }else{
           xhr=new 
              ActiveXObject('Microsoft.XMLHttp');
     }
     return xhr;
  }

4、异步对象的属性和方法

　　abort()　　　　　　取消请求

　　getAllResponseHeaders()　　获取响应的所有Http头

　　getResponseHeader()　　　　获取指定的Http头

　　open(method,url)　　　　　　创建请求，method请求类型get post

　　send()　　　　发送请求

　　setRequestHeader()　　　　　指定请求的Http头

　　onreadystatechange　　　　　发生任何状态变化时的事件控制对象

　　readyState　　　　　　　　　　请求的状态

　　　　　　　　　　　　　　　　　  0尚未初始化

　　　　　　　　　　　　　　　　　　1正在发送请求

　　　　　　　　　　　　　　　　　　2请求完成

　　　　　　　　　　　　　　　　　　3请求成功，正在接受数据

　　　　　　　　　　　　　　　　　　4数据接收成功

　　responseText　　　　　　服务器返回的文本

　　responseXML　　　　　　服务器返回的xml,可以当做DOM处理

　　status　　　　　　　　　服务器返回的http请求响应值常用的有：

　　　　　　　　　　　　　　200表示请求成功

　　　　　　　　　　　　　　202请求被接收但是处理未完成

　　　　　　　　　　　　　　400错误的请求

　　　　　　　　　　　　　　404资源为找到

　　　　　　　　　　　　　　500内部服务器错误，如asp代码错误等

5、Ajax优点：

　　1).不打断用户的操作，页面无刷新
　　2).服务器不需要返回一个完整的新的页面，只需要返回部分数据，提升性能（按需获取）。

6、onreadystatechange

　　onreadystatechange:用来绑定一个事件处理函数（该函数用来处理readystatechange事件）。

　　注：

　　　　当Ajax对象的readyState的值发生了改变，比如，从0变成了1，就会产生readyStatechange事件

7、readyState

　　readyState：有5个值，分别为0，1,2,3,4表示Ajax对象与服务器通信的状态

　　比如值为4时，表示Ajax对象已经获得了服务器返回的所有数据。

8、编程步骤：

　　1.获得Ajax对象
　　2.使用Ajax对象发送请求
　　　　1）.发送get请求
　　　　　　xhr.opean('get','check_uname.do?uname=Tom',true);
　　　　　　xhr.onreadystatechange=f1;
　　　　　　xhr.send(null);
　　　　　　注：

　　　　　　　　true:发送异步请求（浏览器不会销毁当前页面，用户仍然可以对当前页面做其它操作）
　　　　　　　　false:发送同步请求（浏览器不会销毁当前页面，浏览器会锁定当前页面，用户只能看，不能对当前页面进行操作
　　3.编写服务器端的程序，一般不需要返回完整的页面，只需要返回部分数据
　　4.编写事件处理函数f1
　　　　function f1(){
　　　　　　//必须等到Ajax对像获得了服务器返回的所有数据
　　　　　　if(xhr.readyState==4){
　　　　　　var txt=xhr.responseText;
　　　　　　//使用txt更新
　　　　　　}
　　　　}

9、发送异步请求的步骤：

　　1）.获取Ajax对象：获取XMLHttpRequest对象实例
　　2）.设置回调函数：为Ajax对象的readystatechange事件设定响应函数
　　3）.创建请求：调用XMLHttpRequest对象的open方法
　　4）.发送请求：调用Ajax对象的send方法

　　1）获取Ajax对象

var xhr=getXhr();
    function getXhr(){
        var xhr=null;
        if(window.XMLHttpRequest){
          xhr=new XMLHttpRequest();
        }else{
          xhr=new activeXObject('Microsoft.XMLHTTP');
        }
        return xhr;
    }

　　2）编写回调事件处理函数

xhr.onreaystatechange=funtion(){
      if(xhr.readyState==4&&xhr.status==200){
        var txt=xhr.responseText;
        //DOM操作
      }
    }

　　3）创建请求-get请求

xhr.open('get','xx.do',true)

　　注意：
　　　　true:表示发送异步请求（当Ajax对象发请求时，用户仍然可以对当前页面做其它的操作）。
　　　　false:表示发送同步请求（当Ajax对象发请求时，浏览器会锁定当前页面，用户不能对当前页面做其它操作）。

　　3-1)创建请求-POST请求

　　xhr.open('post','xx.do',true);
　　xhr.setRequestHeadser('content-type','application/x-www-form-urlencoded');

　　setRequestHeader的作用：因为HTTP协议要求发送post请求时，必须有content-type消息头，但是默认情况下xhr（即Ajax对象）不会添加该消息头，所以，需要调用satRequestHeader方法，添加这个消息头

　　4)发送请求

　　　　GET 请求：xhr.send(null);

　　　　post 请求：xhr.send(name=value&name=value...)

　　GET请求：
　　　　-send方法内传递null
　　　　-若要提交数据，则在open方法的"URL"后面追加
　　　　-如：xhr.open("get","xx.do?name=value&name=value",true)

10、编写服务器端代码

　　服务器端返回的一般是部分数据，比如一个简单的文本。

public void servic(HttpServletRequest request,HttpServletResponse response)
    throws ServletException,IOException{
   request.setCharacterEncoding("utf-8");
   response.setContentType("text/html;charset=utf-8");
   PrintWriter out=response.getWriter();
   out.println("用户名已经存在");
}

11、Ajax的应用

　　输入的值需要校验，如检测注册的用户名是否已被占用
　　搜索时出现的自动提示列表
　　级联显示
　　数据录入和列表显示在同一个页面
　　不需要刷新的翻页