【前端知识之JS】ajax原理及其手写

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍ajax的原理和实现方法。

---

一、ajax是什么

AJAX全称是 Async Javascript and XML，即异步的JS和XML，是一种创建交互式网页应用开发技术，可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页。
原理：通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。

二、实现过程

• 创建Ajax的核心对象XMLHttpRequest对象；
• 在这个对象上使用open方法创建一个HTTP请求，open方法所需要的参数是请求的方法、请求的地址、是否异步和用户的认证信息；
• 在发起请求之前，可以为这个对象添加一些信息和监听函数。通过setRequestHeader方法来为请求添加头信息；
• XMLHttpRequest状态变化时会触发onreadystatechange事件，可以通过设置监听函数，来处理请求成功后的结果。当对象的readystate变为4时，服务器接受数据完成，如果时2xx或者304的话则代表返回正常，可以通过response中的数据来对页面进行更新了；
• 当对象的属性和监听函数设置完成后，最后调用sent方法来向服务器发起请求，可以传入参数作为发送的数据体。

1.创建XMLHttpRequest对象；

const xhr = new XMLHttpRequest();

2.与服务器建立连接；

xhr.open('GET',url,true);
//xhr.open(method, url, [async][, user][, password])

参数说明:
method：表示当前的请求方式，常见的有GET、POST
url：服务端地址
async：布尔值，表示是否异步执行操作，默认为true
user: 可选的用户名用于认证用途；默认为’null’
password: 可选的密码用于认证用途，默认为’null’

3.onreadystatechange事件监听通信状态；

   xhr.onreadystatechange = function(){
        if(this.readyState !== 4) return;
        if(this.status == 200){
            handle(this.response)
        }else{
            console.error(this.statusText);
        }
   }

关于XMLHttpRequest.readyState属性有五个状态:

值	状态	描述
0	UNSENT（未打开）	open()方法还未被调用
1	OPENED（未发送）	send()方法还未被调用
2	HEADERS_RECEIVED（以获取响应头）	send()方法已经被调用，响应头和响应状态已经返回
3	LOADING（正在下载响应体）	响应体下载中；responseText已经获取部分数据
4	DONE（请求完成）	整个请求过程已完毕

4.send()发送给服务器端；

xhr.send(null)
//xhr.send([body])

body: 在 XHR 请求中要发送的数据体，如果不传递数据则为 null

• 整体的例子

let xhr = new XMLHttpRequest();
xhr.open('GET',url,true)
xhr.onreadystatechange = function(){
     if(this.readyState !== 4) return;
     if(this.status == 200){
         handle(this.response)
     }else{
         console.error(this.statusText);
     }
}
xhr.onerror = function(){
 console.error(this.statusText);
}
 xhr.responseType = "json";
 xhr.setRequestHeader("Accept","application/json");
 xhr.send(null)

三、封装

function getJSON(url){
    let promise = new Promise(function(resolve,reject){
        let xhr = new XMLHttpRequest();
        xhr.open('GET',url,true);
        xhr.responseType = "json";
        xhr.setRequestHeader("Accept","application/json");
        xhr.onreadystatechange = function(){
            if(this.readyState !== 4) return;
            if(this.status === 200){
                resolve(this.response)
            }
            else{
                reject(this.statusText)
            }
        }
        xhr.onerror = function(){
            reject(this.statusText)
        }
        xhr.send(null)
    })
    return promise
}

getJSON('./data.json').then(function(result){
    console.log(result);
})