Ajax的深入理解及使用

我们在学习一个东西的时候首先要知道,学习的东西是什么,他可以干什么,为什么使用它?

那么到底什么是ajax呢?

AJAX 不是 JavaScript 的规范,他是一个老伙计自创的名字 : Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求。

他可以干什么呢?

在整个网页不重新加载的情况下,更新部分页面的内容。

为什么要使用它呢?

根据业务需求,发送http请求,拿到服务端数据,在页面上渲染数据。

好,言归正传,让我们开始学习AJAX

什么是xhr

ajax技术的核心就在于 XMLHttpRequest 对象(简称xhr),首先由微软引用,随后,其他浏览器也支持啦该对象, xhr为向服务器发送请求和解析服务器响应提供啦流畅的接口。

IE5中xhr对象,是通过ActiveX对象实现的,IE7+即其他浏览器都支持xhr对象,所以需要写一个兼容

// 创建一个xhr对象(带兼容处理)
function create(){
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    return xhr;
}

注意,如果需要多个请求,就创建多个xhr对象,当然也可以使用同一个xhr对象,但是这回终止xhr对象之前的异步请求

xhr对象的方法

open()

在使用xhr对象,第一个要调的方法是open(method,ull,async)

该方法是向服务器发送之前做一些设置,比如你打电话,输入电话号,然后看看是用卡一还是卡二,

xhr.open('GET','http://www.example.com/api',true)
/*
    第一个参数表示使用哪种http请求方法,不区分大小写,一般还是写大写的,常用的两个方法:get()、post()
      get方法用于常规请求,一般从服务器读取数据使用该方法
      post方法常用语HTML表单请求,一般向服务器发送数据使用该方法
    第二个参数表示url,要请求的资源地址
    第三个参数表示是否异步,true\false
/*

send()

send方法接受一个参数,即要作为请求主体发送的数据,调用send的方法,请求发送到服务器,该方法等于按下拨打按钮

如果是GET方法,send()无参数或为null;如果是POST方法参数是要发送的数据

xhr.send('a=1&b=2');

xhr对象的事件

xhr.onerror

xhr.onerror = function(e){
    console.log(e)
}
// 该事件当请求失败时触发

xhr.ontimeout

xhr.timeout = 1000; // 设置请求时间的限制,毫秒为单位,默认为0,
xhr.ontimeout = function(){
    alert('请求超时')
}
// 当请求超过指定的时间时触发

xhr.onprogress

// 监听进度事件,如果请求的资源很小,直接就100%
xhr.onprogress = function(e){
    console.log((e.loaded / e.total) * 100 + '%');
}

接收响应

先检测XHR对象的readyState属性,该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下：

0(UNSENT):未初始化。尚未调用open()方法
1(OPENED):启动。已经调用open()方法，但尚未调用send()方法
2(HEADERS_RECEIVED):发送。己经调用send()方法，且接收到头信息
3(LOADING):接收。已经接收到部分响应主体信息
4(DONE):完成。已经接收到全部响应数据，而且已经可以在客户端使用了

在XHR对象的 readyState 属性改变的话会触发XHR对象的 onreadystatechange 事件,所以我们通常使用onreadystatechange事件监听状态的变化

注意:一定要在open之前设置 onreadystatechange 事件,才能确保跨浏览器兼容性,否则将无法接收readyState属性为0和1的情况

xhr.onreadystatecahnge = function (){
    if(xhr.readyState){
        // another code
    }
}

单单上边的处理还是不够的,因为xhr.readyState是指运行ajax所经历的几种状态,所以还需要判断ajax是否请求成功

一个完整的HTTP响应由状态码、响应头集合和响应主体组成。在收到响应后，这些都可以通过XHR对象的属性和方法使用，主要有以下4个属性

responseText: 作为响应主体被返回的文本(文本形式)
responseXML: 如果响应的内容类型是'text/xml'或'application/xml'，这个属性中将保存着响应数据的XML DOM文档(document形式)
status: HTTP状态码(数字形式)
statusText: HTTP状态说明(文本形式)

xhr.onreadystatechange = function(){
    if(xhr.readyState){
        if(xhr.status>= 200 && xhr.status < 300 || xhr.status == 304){
           
        }
    }
}

关于xhr.status的解释 : https://baike.baidu.com/item/HTTP%E7%8A%B6%E6%80%81%E7%A0%81/5053660?fr=aladdin

最后上一篇我自己封装的ajax吧

const ajax = (json) => {
    let xhr = null,
        type = json.type.toUpperCase() || 'GET'; // 设置请求的默认方法
    // 兼容处理
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    // 设置请求时间的限制
    xhr.timeout = json.time ? json.time : 0;
    // 设置请求找过指定时间的时间
    xhr.ontimeout = json.timeout ? json.timeout : null;
    // 监听xhr对象额状态
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                json.success(xhr.responseText) // 如果成功 即调用成功的回调函数
            }else{
                json.error&&json.error() // 失败调用失败的回调函数
            }
        }
    }
    if(type.toUpperCase() == 'GET'){
        xhr.open('GET',json.url+'?'+toStr(json.data),true); 
        xhr.send()
    }else if(type.toUpperCase() == 'POST'){
        xhr.open('POST',json.url,true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(toStr(json.data))
    }
}
// 将对象的属性和value转换为 a:1&b:2
const toStr = json => {
    var arr = [];
    for(var i in json){
        arr.push(i+'='+json[i])
    }
    return arr.join('&')
}