Ajax

AJAX

一、Ajax的基础知识

　　1、AJAX简介

　　　　　　> 全称： Asynchronous JavaScript And XML

　　　　　　> 异步的JavaScript和XML

　　　　　　> AJAX就是通过JavaScript向服务器发送请求，并接收响应，然后我们在通过DOM来修改页面。

　　　　　　> XML指的是服务器响应的数据的格式。

　　　　　　> 目前AJAX已经很少使用XML作为响应的格式。因为XML的解析性能及传输性能较差。

　　2、同步和异步

　　　　　　> 同步：

　　　　　　　　　　当我们通过浏览器向服务器发送一个请求时，浏览器会刷新整个页面。

　　　　　　> 异步：

　　　　　　　　　　当我们向服务器发送请求时，不是刷新整个网页，而是只刷新网页的一部分。

　　3、XMLHttpRequest对象

　　　　　　> 我们AJAX的所有操作都是围绕着XMLHttpRequest对象进行。

　　　　　　> 在XMLHttpRequest对象中封装发送给服务器请求报文，同时在服务器发回响应时，响应信息也会在对象中封装。

　　　　　　> 如何获取XMLHttpRequest对象

　　　　　　　　　　　　　　var xhr = new XMLHttpRequest();


　　4、 使用步骤

　　　　　　1.创建XMLHttpRequest对象

　　　　　　　　　　大部分比较新的浏览器都支持的方式（IE7以上）

　　　　　　　　　　　　　　　　var xhr = new XMLHttpRequest();

　　　　　　　　　　IE6以下的

　　　　　　　　　　　　　　　　var xhr = new ActiveXObject("Msxml2.XMLHTTP");

　　　　　　　　　　IE5.5以下的

　　　　　　　　　　　　　　　　var xhr = new ActiveXObject("Microsoft.XMLHTTP");

　　　　　　　通用的获取XMLHttpRequest对象的方法：

 function getXMLHttpRequest(){
     try{
         //大部分浏览器都支持的方式
         return new XMLHttpRequest();
     }catch(e){
         //IE6以下浏览器支持的方式
         return new ActiveXObject("Msxml2.XMLHTTP");
     }catch(e){
         //IE5以下的浏览器
         return new ActiveXObject("Microsoft.XMLHTTP");
     }catch(e){
         alert("你是火星来的吧！你的浏览器不支持AJAX！");
     }
 }      

　　　　　　2.设置请求信息（请求地址，请求方式，请求参数）

　　　　　　　　　　　　　　xhr.open(请求方式,请求地址);

　　　　　　　　　　在发送post请求时，还需要设置一个请求头，如下：

　　　　　　　　　　　　　　xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

　问题：

　　　　在IE浏览器中，get请求使用ajax存在缓存问题，会使用上一次请求的结果处理请求，而不向服务器发送请求

　　解决办法：

　　　　在请求url尾部带一个随机参数，如：var url="/MyProject/user?t="+Math.random();

　　　　post请求：通过send()方法传递参数，需要设置请求头，没有浏览器缓存问题

　　　　　　3.发送请求

　　　　　　　　　　　　xhr.send(请求体);

　　　　　　　　　　get请求没有请求体，所以send中可以传null或什么都不传。

　　　　　　　　　　post请求需要通过send来设置请求参数。

　　　　　　4.接收响应信息

　　　　　　　　　　//xhr绑定一个onreadystatechange响应函数，这个函数会在readyState属性发生改变时调用

　　　　　　　　　　　　xhr.onreadystatechange = function(){

　　　　　　　　　　//判断当前readyState是否为4 ， 且响应状态码为200

　　　　　　　　　　　　if(xhr.readyState==4 && xhr.status==200){

　　　　　　　　　　//读取响应信息，做相关操作。

　　　　　　　　　　//如果信息为纯文本

　　　　　　　　　　　　xhr.responseText

　　　　　　　　　　//如果信息为XML

　　　　　　　　　　　　xhr.responseXML

　　　　　　　　　　　　}

　　　　　　　　　　};

　　　　　　　　　　readyState属性存有 XMLHttpRequest 的状态。从 0 到 4 发生变化

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

　　5、 响应数据的格式

　　　　　　1） 响应一个XML

　　　　　　　　　　- 当我们想通过servlet给ajax返回一个比较大量的信息，返回一个对象。

　　　　　　　　　　- 返回 User ：username：sunwukong age：18 gender：男

　　　　　　　　　　username:sunwukgon,age:18,gender:男

　　　　　　　　　　- 我们可以通过一个XML格式来返回一个大量的信息

　　　　<user>

　　　　<name></name>

　　　　<age></age>

　　　　<gender></gender>

　　　　</user>

　　　　　　2） 响应一个JSON对象

代码演示：

function getXMLHttpRequest(){
    try{
        //大部分浏览器都支持的方式
        return new XMLHttpRequest();
    }catch(e){
        try{
            //IE6以下浏览器支持的方式
            return new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            try{
                //IE5以下的浏览器
                return new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e){
                alert("你是火星来的吧！你的浏览器不支持AJAX！");
            }
        }
    }
}
    window.onload=function(){
        var btn=document.getElementById("btn");
        btn.onclick=function(){
            //创建XMLHttpRequest对象，相当于打开浏览器
            var xhr=getXMLHttpRequest();
            var method="get";
            var url="/WEB_Ajax/ajax?t="+Math.random();
            //设置请求方式及请求路径
            xhr.open(method,url);
            xhr.send();
            
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&xhr.status==200){
                    var respText=xhr.responseText;
                    alert(respText);
                }
            }
        };
        
        var btn2=document.getElementById("btn2");
        btn2.onclick=function(){
            var xhr=new XMLHttpRequest();
            var method="post";
            var url="/WEB_Ajax/ajax";
            xhr.open(method,url);
            
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send("username=zoumengjie");
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&xhr.status==200){
                    var respText=xhr.responseText;
                    alert(respText);
                }
            }
        };
    };