js 原生实现 jQuery ajax

我会带着你远行 2023-02-13 11:13 6阅读 0赞

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中发送参数