原生ajax 请求

最新推荐文章于 2024-07-16 11:07:42 发布

十八流选手益达张

最新推荐文章于 2024-07-16 11:07:42 发布

阅读量78

点赞数

分类专栏： javascript 文章标签： js ajax

本文链接：https://blog.csdn.net/u013108007/article/details/108785852

版权

javascript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

本文介绍如何使用const request对象的AJAX方法进行HTTP请求，包括GET和POST请求，同时处理了参数格式化、token认证及错误处理。核心内容涉及HTTP请求的异步处理和数据格式设置。

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

const request = {
    ajax(options){
        options = options || {};
        options.type = (options.type || "GET").toUpperCase();
        options.dataType = options.dataType || 'json';
        options.async = options.async === undefined?true:options.async;
        options.format = options.format === undefined?true:options.format;//
        options.contentType = options.contentType === undefined?true:options.contentType;
        var params = options.format?this.formatParams(options.data):options.data;
        if(window.XMLHttpRequest){
            var xhr = new XMLHttpRequest()
        }else{
            var xhr = new ActiveXObject('Microsoft.XMLHTTP')
        }
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
             var status = xhr.status;
                if(status >=200 && status< 300){
                    options.success && options.success(xhr.responseText,xhr.responseXML)
                }else{
                    if(options.fail){
                        options.fail(status)
                    }
                }
            }
        }
        //连接和发送
        let _header = options._token &&  this.getCookie(options._token);//获取token
        options.contentType && xhr.setRequestHeader("Content-Type","application/x-wwww-form-urlencoded");
        options._token && xhr.setRequestHeader(options._token,_header);
        xhr.setRequestHeader("Cache-Control","no-cache");
        if(options.type == "GET"){
            xhr.open("GET",`${options.url}?${params}`,options.async);
            xhr.send(null)
        }else if(options.type === "POST"){
            xhr.open("POST",options.url,options.async);
            xhr.send(params)
        }
    },
    formatParams(data){
        let arr = [];
        for (const name in data) {
            if (object.hasOwnProperty(name)) {
                arr.push(`${encodeURIComponent(name)}=${encodeURIComponent(data[name])}`)
            }
        }
        return arr.join('&')
    },
    getCookie(c_name){
        if(document.cookie.length>0){
            let c_start = document.cookie.indexOf(`${c_name}=`)
            if(c_start != -1){
                c_start = c_start + c_name.length+1;
                let c_end = document.cookie.indexOf(":",c_start);
                if(c_end == -1){
                    c_end = document.cookie.length
                    return document.cookie.substring(c_start,c_end);
                }
            }
            return ""
        }
    },
   
}