码迷,mamicode.com
首页 > Web开发 > 详细

原生ajax方法封装

时间:2018-03-27 21:00:48      阅读:254      评论:0      收藏:0      [点我收藏+]

标签:enc   mes   names   方法   pre   ring   false   xmlhttp   否支持   

/**
 * @function ajax request
 * @fields ajaxName:请求名称,method:请求方法,url:接口地址,async:是否异步请求,withCredentials:是否支持跨域发送cookie,params:post请求参数
 * @param data:{"ajaxName":"ajaxNameString","method":"GET/POST","url":"","async":true/false,"withCredentials":true/false,"params":{}}
 * @result ajaxName.responseText
 */
function ajaxRequest(data, callback) {
    var ajax = data.ajaxName;
    // 新建请求
    ajax = new XMLHttpRequest();
    // 打开请求
    ajax.open(data.method, data.url, data.async);
    // 是否支持跨域发送cookie
    ajax.withCredentials = data.withCredentials;
    // 如果是POST请求则设置Header
    if (data.method == ‘POST‘) {
        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    }
    // 发送请求
    ajax.send(data.params ? data.params : ‘‘);
    // 注册事件
    ajax.onreadystatechange = function () {
        callback(ajax);
    }
}

调用方法:

ajaxRequest({
    "ajaxName": ajaxName,
    "method": "POST",
    "url": "http://xxx.xxx.xxx/",
    "async": true,
    "withCredentials": true,
    "params": params
}, function callback(ajax) {
    console.log(ajax.responseText);
})

原生ajax方法封装

标签:enc   mes   names   方法   pre   ring   false   xmlhttp   否支持   

原文地址:https://www.cnblogs.com/Man-Dream-Necessary/p/8659463.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!