封装ajax

// 实例化,配置请求信息,发送请求,设置回调函数

// 分析:

// 期望:ajax(method,url,data,success)

/**

* ajax封装

* @param {*} method get/post

* @param {*} url 请求资源路径

* @param {*} data 请求参数

* @param {*} success 回调函数

*/

function ajax(method, url, data, success) {

// 1.实例化对象

var xhr = null; //  实例化一个对象,初始值为空  new XMLHttpRequest();

if (window.ActiveXObject) { //IE5IE6是以ActiveXObject的方式引入XMLHttpRequest

xhr = new ActiveXObject('Microsoft.XMLHTTP');

} else if (window.XMLHttpRequest) { //除IE5 IE6以外的浏览器XMLHttpRequest

xhr = new XMLHttpRequest(); //实例化一个XMLHttpRequest

}

// 2.配置信息 open()

if (method == 'GET' && data) { //判断data存在并且是GET方式

url += '?' + data;

}

xhr.open(method, url, true);

// 3.发送请求 send(),如果是POST方式,参数写在括号里

if (method == 'GET') {

xhr.send();

} else if (method == 'POST') {

xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

xhr.send(data);

}

xhr.onreadystatechange = function () {

if (xhr.readyState == 4) {

if (xhr.status == 200) {

// 如果回调函数不为空,就执行这个回调函数,该函数有一个参数xhr.responseText就是返回的内容

success && success(xhr.responseText);

}

}

}

}

作者:css7

链接:http://www.jianshu.com/p/c0510ef21bae

來源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • //创建函数,需传入的参数:请求方式,请求接口地址,请求参数,请求成功回调函数,请求失败回调函数 function...
    凡凡的小web阅读 3,440评论 0 0
  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 8,609评论 0 7
  • 为了方便大家阅读,直接截图上传,后面附有代码,可以复制粘贴: // 参数情况 // method,url,data...
    LiLi原上草阅读 2,312评论 0 5
  • 本文详细介绍了 XMLHttpRequest 相关知识,涉及内容: AJAX、XMLHTTP、XMLHttpReq...
    semlinker阅读 14,681评论 2 18
  • 原文见martin的博客 最近重新看《javascript高级程序设计》,突然看到了ajax,想起来之前学习的各种...
    small_a阅读 12,985评论 12 38