ajax使用

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML）

ajax能够向服务器请求额外的数据，而不用刷新页面，能够带来更好的用户体验，ajax的核心技术其实就是XMLHttpRequest对象。

那么我们应该如何使用ajax，以及在什么情况下使用ajax?

XMLHttpRequest 对象是ajax的基础，所有现代浏览器几乎都支持 XMLHttpRequest 对象，不过在 IE5 和 IE6 使用的是 ActiveXObject对象。

使用：

1. 创建XMLHttpRequest实例
2. 配置请求参数，初始化请求
3. 发送请求
4. 处理请求结果

代码实现：

var xhr=new XMLHttpRequest();
// 配置请求参数，初始化请求
    //1. 请求方式，此处为 get请求方式
    //2. 请求地址，此处为 '/user'
    //3. 是否异步，此处为 true
xhr.open('get','/user',true);
// 请求完成时触发的事件
xhr.onload=function(){
    //xhr对象下有很多属性
        //responseText:返回的内容，是经过ajax内部处理过的，转成了字符串格式，通过responseText拿到的数据永远是字符串
    if(xhr.status==200){
        //如果请求成功
    }
}
//发送请求
xhr.send();

1. 创建ajax对象，实际上ajax的兼容问题不大，但也还是有，就像前面所说的，大多数浏览器都是支持ajax对象的，但有些顽皮的浏览器就非要搞特殊，具体的就不点名了，大家都知道，兼容问题也很好解决：

       if(window.XMLHttpRequest){
           var xhr=new XMLHttpRequest()
       }else{
           var xhr=new ActiveXObject('microsoft.XMLHTTP')
       }
   

2. ajax中的open方法，ajax的open方法用于配置请求参数，其有三个参数

   • 第一个参数是请求方式，常用的有get/post 方式
   • 第二个参数是请求地址，即文件在服务器上的位置
   • 第三个参数是个布尔值，表示为是否异步处理

3. 发送请求，ajax的send方法用于向服务端发送请求，send方法有一个参数，格式为字符串，此参数只用于post请求，在使用post请求的时候，会将send中的参数写入到请求正文中。

4. ajax中的数据获取，当ajax向服务端发送请求后，会等待服务器返回内容，服务端会返回请求内容，这个内容会被存在ajax对象下的responseText属性下，其实ajax有两个属性用来储存服务器返回的数据:

   • responseText :获得字符串形式的响应数据。
   • responseXML :获得 XML 形式的响应数据。

ajax对象中还有许多其他的属性和事件：

• redaState： ajax的工作状态，有5个状态码，0、1、2、3、4 分别代表不同的工作状态
• onredastatechange：当状态码改变的时候触发的事件
• status：服务器状态，http状态码，状态码太多就不一一列举了
  • 1xx 这一类型的状态码，代表请求已被接受，需要继续处理
  • 2xx 这一类型的状态码，代表请求已成功被服务器接收、理解、并接受
  • 3xx 这类状态码代表需要客户端采取进一步的操作才能完成请求(重定向)
  • 4xx 这类的状态码代表了客户端看起来可能发生了错误，妨碍了服务器的处理。(客户端错误)
  • 5xx 6xx 服务器错误