简单模拟jquery的ajax封装

最新推荐文章于 2022-06-01 20:24:18 发布

qq_36497590

最新推荐文章于 2022-06-01 20:24:18 发布

阅读量159

点赞数

本文链接：https://blog.csdn.net/qq_36497590/article/details/90081655

版权

本文将介绍如何使用JavaScript简单模拟jQuery的AJAX功能，包括请求的发起、数据处理和回调函数等核心部分。

摘要由CSDN通过智能技术生成

简单模拟jquery的ajax封装

function ajax(option)
    {
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")
        requestUrl = option.url
        requestMethod = option.method
        requestData = option.data
        returnType = option.type || 'json'

        //get请求方式拼接请求参数
        if (requestMethod != "post" && requestData) {
            params = []
            for (item in requestData) {
                params.push(item+"="+requestData[item])
            }
            if (requestUrl.indexOf("?") > -1) {
                requestUrl += "&" + params.join("&")
            } else {
                requestUrl += "?" + params.join("&")
            }
            requestData = null
        }

        //设置请求成功处理函数
        xhr.onreadystatechange = function () {
            console.log(xhr.readyState)
            //readyState: 0:请求未初始化，还没调用open；1:请求已经建立，还没发送，还没调用send；2:请求已发送，正在处理中；3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成；4：响应已完成；您可以
获取并使用服务器的响应了
            if (xhr.readyState == ("number" == typeof XMLHttpRequest.DONE ? XMLHttpRequest.DONE : 4)) {
                console.log(xhr.status)
                //101——客户要求服务器根据请求转换HTTP协议版本
　　            //200——成功 201——提示知道新文件的URL
　　            //300——请求的资源可在多处得到 301——删除请求数据
　　            //404——没有发现文件、查询或URl 500——服务器产生内部错误
                if (xhr.status == 200) {
                    var response = ""
                    switch(returnType) {
                        case 'json':
                            text = xhr.responese || xhr.responseText || {}
                            response = "string" == typeof text ? JSON.parse(text) : text
                            break
                        default:
                            response = xhr.responese || xhr.responseText || {}
                    }
                    option.success && option.success(response)
                }
            } else {
                option.error && option.error(xhr.statusText)
            }
        }

        //请求初始化
        xhr.open(requestMethod, requestUrl, true)
        //xhr.setRequestHeader && xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
        //设置超时时间
        xhr.timeout = option.timeout || 0
        //发送请求
        xhr.send(requestData)
    }
    ajax({
    	'url': 'http://127.0.0.1:8080/site/configs',
        'method': 'get',
        'data': {},
        'type': 'json',
        'success': function (ret) {
            console.log(ret)
        },
        'error': function (res) {
            console.log(res)
        }
    })