简单模拟jquery的ajax封装

本文将介绍如何使用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)
        }
    })
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值