AJAX概述和简单使用

一.ajax概述：
asynchronous javascript and xml ,用于异步的向服务器发出请求，接收数据的
一种技术。
在整个过程中：页面无刷新，不打断用户的操作；
              按需要获取数据，数据传输量大大减少；
              是一种标准化的东西，不需要任何插件。

二.ajax对象的属性：
    1.onreadystatechange：绑定一个事件处理函数，该函数用来处理readystatechange
    事件，ajax对象的readyState属性发生变化，就会产生onreadystatechange事件；
    2.responseText：获得服务器返回的文本数据；
    3.responseXML：获得服务器返回的XML文档；
    4.status：获得状态码；
    5.readystate：返回Ajax对象与服务器通讯的状态，返回值是一个number类型的值。
    1）0：（未初始化）对象已建立，但是尚未初始化（未调用open方法）。
    2）1：（初始化）对象已建立，尚未调用send方法。
    3）2：（发送数据）send方法已调用。
    4）3：（数据传送中）已接收部分数据。
    5）4：（响应结束）AJax对象已经获取了服务器返回的所有数据。

三.页面编程步骤
get请求
1.获取ajax对象：
function getxhr（）{
    var xhr = null;
    if(window.XMLHttpRequest){
        xmr = new XMLHttpRequest();  //非IE浏览器
    }else{
        xmr = new ActiveXObject("Microsoft.XMLHttp“);  //IE浏览器
    }
}
//依据id返回dom节点
function $(id){
    retutn document.getElementById(id);
}
//返回id对应的值
function $F(id){
    return $(id).value;
}
2.使用ajax对象发送请求:
    (1)建立lianjie：请求方式，请求资源路径，请求是同步还是异步
    xhr.open("get","check_username.do?username=chang&age=23,true");
    (2).编写处理函数：
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){        //服务器响应结束
            if(xhr.status==200){    //服务器返回了正确的结果
                //处理代码
            }else{
                //出现异常
            }
        }
    }
    (3).发送请求参数：
    xhr.send(null);

post请求
1.获取ajax对象
function getxhr（）{
    var xhr = null;
    if(window.XMLHttpRequest){
        xmr = new XMLHttpRequest();  //非IE浏览器
    }else{
        xmr = new ActiveXObject("Microsoft.XMLHttp“);  //IE浏览器
    }
}
2.使用ajax对象发送请求
    (1).建立连接：
    xhr("post","check_username",true);
    (2)发送一个请求头：
    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
    (3)编写处理函数：
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){        //服务器响应结束
            if(xhr.status==200){    //服务器返回了正确的结果
                //处理代码
            }else{
                //出现异常
            }
        }
    }
    (4)发送请求参数：
    xhr.send("username=chang");

四.乱码问题：
    产生原因：
    IE浏览器的内置Ajax对象会使用“GBK”，其他浏览器会使用“utf-8”对中文参数进行
    编码，服务器端默认使用“ISO-8859-1”去解码，所以会出现乱码问题。
    解决：
    1.设置服务器使用的字符集，在Tomcat的server.xml文件中配置URLEncoding=“utf-8”；
    （和8080在一起的那一个connector）
    2.使用encodeURL()函数（js的内置函数）对请求地址进行编码。
五.缓存问题：
    当发送get请求时，IE浏览器会检查请求地址是否访问过，如果访问过，就不会向
    服务器发送请求了。
    解决：
    1.在请求地址后面添加一个随机数参数，欺骗IE。
        xhr.open("get","getNumber.do?"+Math.random(),true);
    2.使用post请求发送。