js 原生实现 jQuery ajax

JS原生实现AJAX

最新推荐文章于 2022-04-20 20:11:04 发布

原创最新推荐文章于 2022-04-20 20:11:04 发布 · 502 阅读

1 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍如何使用JS原生的XMLHttpRequest对象实现GET和POST请求，包括参数拼接、请求头设置及响应处理，为开发者提供了一种不依赖jQuery等库的AJAX实现方案。

js 原生实现 jquery ajax 主要依靠 XMLHttpRequest 对象，该对象使用如下

1、介绍

创建 XMLHttpRequest 对象的语法：

xmlhttp = new XMLHttpRequest()

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")

2、get 请求方式实现

function get(option) {
    //拼接请求参数	
    var param = ''
    if (option.data != {} && option.data != null) {
        var keys = Object.keys(option.data)
        for (var k of keys) {
            param = param + k + '=' + option.data[k] + '&' 
        } 
        param = '?' + param.substring(0,param.length-1)
    }
  
    //创建对象  
    var xhr = new XMLHttpRequest()

    xhr.open('get', option.url + param, option.async)

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            //将返回的字符串状成json对象
            var res = JSON.parse(xhr.responseText)
            option.success(res)
        }
    }

    xhr.send()
}

使用方式

get({
    url: 'http://localhost:8089/p/fgetFileList',
    async: true,
    data: {
        name: '独孤求败'
    },
    success:function(res){
        console.log(JSON.stringify(res))
    }
})

3、post 请求方式实现

function post(option){
    //拼接参数		
    var param = ''
    if (option.data != {} && option.data != null) {
        var keys = Object.keys(option.data)
        for (var k of keys) {
            param = param + k + '=' + option.data[k] + '&' 
        }
        param = param.substring(0,param.length-1)
    }

    var xhr = new XMLHttpRequest()

    xhr.open('post', option.url, option.async)
  
    //post请求设置请求头content-type
    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            var res = JSON.parse(xhr.responseText)
            option.success(res)
        }
    }

    xhr.send(param)
}

使用方式

post({
    url: 'http://localhost:8089/p/file/',
    async: true,
    data: {
        name: '独孤求败'
    },
    success:function(res){
        console.log(JSON.stringify(res))
    }
})

4、总结

看过我上边的封装，其实就是将请求相关设置以 option 的形式设置到函数中，get请求在url后拼接参数；post请求在send中发送参数