JavaScript手写简版ajax

不知云起时

已于 2023-09-05 21:59:59 修改

阅读量382

点赞数 2

文章标签： javascript ajax 开发语言前端

于 2023-09-05 21:56:43 首次发布

本文链接：https://blog.csdn.net/weixin_43790019/article/details/132698332

版权

1、介绍

ajax：Asynchronous JavaScript And XML，翻译过来就是“异步的 Javascript 和 XML”。MDN中对ajax介绍：

异步 JavaScript 和 XML 或 Ajax 本身不是一种技术，而是一种将一些现有技术结合起来使用的方法，包括：HTML 或 XHTML、CSS、JavaScript、DOM、XML、XSLT、以及最重要的 XMLHttpRequest 对象。

所以 Ajax 是一个技术统称，是一个概念模型，它囊括了很多技术，并不特指某一技术。它的特点是：局部刷新页面，无需重载整个页面。

2、手写ajax

利用 XMLHttpRequest 模块实现 Ajax。总共可以分为五步：

2.1、创建 XMLHttpRequest 对象

let xmlHttp;
if(window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlHttp = new XMLHttpRequest()
}else{
    // code for IE6, IE5
    xmlHttp = new ActiveXObject('Microsoft.XMLHTTP')
}

2.2、构建请求

通过open()方法设置请求方式(GET/POST)和请求地址(url)

/**
 * 第一个参数：请求的类型；GET 还是 POST；
 * 第二个参数：表示请求的文件的地址url；
 * 第三个参数：设置请求方法是不是异步async，true为异步， false为同步。默认为true
 */
xmlHttp.open('GET/POST', url, true)

2.3、发送请求

// 可使用 setRequestHeader() 来设置HTTP请求头
// xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 

// send() 方法接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null。
xmlHttp.send(body)

2.4、监听状态变化

XMLHttpRequest.onreadystatechange 会在 XMLHttpRequest 的readyState 属性发生改变时触发 readystatechange 事件的时候被调用。

readyState：请求状态码，表示异步对象目前的状态，readyState的值从0到4。

值	状态	描述
`0`	`UNSENT`	代理被创建，但尚未调用 open() 方法。
`1`	`OPENED`	`open()` 方法已经被调用（即服务器连接已建立）。
`2`	`HEADERS_RECEIVED`	`send()` 方法已经被调用（即请求已接收，正在处理中），并且头部和状态已经可获得。
`3`	`LOADING`	请求处理中，但没有全部完成；`responseText` 属性已经包含部分数据。
`4`	`DONE`	请求已完成。

2.5、处理请求返回结果

status：http状态码；http状态码表示成功的http状态码有：

// 304状态码(Not Modified):表示客户端发送的请求资源未被修改，服务器端无需返回资源内容，而是直接使用缓存的内容。优化网络带宽的使用，减少了不必要的数据传输，提高网络的访问速度。
xmlHttp.status >= 200 && xmlHttp.status < 300 || xmlHttp.status == 304

responseText：后台返回的字符串形式的响应数据；

responseXML：后台返回的XML形式的响应数据；

2.6 封装

const ajax = (options) => {
    // 1、创建XMLHttpRequest实例
    let xmlHttp;
    if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest()
    }else{
        xmlHttp = new ActiveXObject('Microsoft.XMLHTTP')
    }

    // 处理请求参数
    const objToString = (obj) => {
        obj._t = new Date().getTime()
        let temp = []
        for(let key in obj){
            // 需要将key和value转成非中文的形式，因为url不能有中文。
            temp.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]))
        }
        return temp.join("&")
    }
    let params = objToString(options.data || {})

    // 2、构建请求(设置请求方式和请求地址)
    if(options.type.toLowerCase() === 'get'){
        xmlHttp.open(options.type, `${options.url}?${params}`, true)
        // 3、发送请求
        xmlHttp.send()
    }else if(options.type.toLowerCase() === 'json'){
        xmlHttp.open('POST', options.url, true)
        xmlHttp.setRequestHeader('Content-type', 'application/json')
        xmlHttp.send(JSON.stringify(options.data || {}))
    }else{
        xmlHttp.open(options.type, options.url, true)
        xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
        xmlHttp.send(params)
    }

    // 4、监听状态变化
    xmlHttp.onreadystatechange = () => {
        if(xmlHttp.readyState == 4){
            // 5、处理返回结果
            if(xmlHttp.status >= 200 && xmlHttp.status < 300){
                options.success(xmlHttp.responseText)
            }else{
                options.fail(xmlHttp.responseText)
            }
        }
    }

    // 设置超时时间
    if (options.timeout) {
        timer = setTimeout(function () {
            xmlHttp.abort(); //中断请求
        }, options.timeout);
    }
}

ajax({
    type: 'get',
    url: 'http://localhost:8080/api/getUserList.do',
    data: { a: 123 },
    timeout: 1000,
    success: data => {
        console.log('success', data);
    },
    fail: err => {
        console.log('error', err);
    },
});