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 服务器错误
只研朱墨作春山
原文地址:https://www.cnblogs.com/guolintao/p/7794953.html