原生JS封装AJAX方法

来源：动视网责编：小采时间：2020-11-27 14:04:52

原生JS封装AJAX方法

原生JS封装AJAX方法:Ajax大家每天都在用，jquery库对Ajax的封装也很完善、很好用，下面我们看一下它的内部原理，并手动封装一个自己的Ajax库。一、原理原生Ajax的发送需要四步：1) 创建Ajax对象: XMLHttpRequest2) 设置请求参数: open(请求参数[get/post],ur

推荐度：

点击下载本文 文档为doc格式

导读原生JS封装AJAX方法:Ajax大家每天都在用，jquery库对Ajax的封装也很完善、很好用，下面我们看一下它的内部原理，并手动封装一个自己的Ajax库。一、原理原生Ajax的发送需要四步：1) 创建Ajax对象: XMLHttpRequest2) 设置请求参数: open(请求参数[get/post],ur

Ajax大家每天都在用，jquery库对Ajax的封装也很完善、很好用，下面我们看一下它的内部原理，并手动封装一个自己的Ajax库。

一、原理

原生Ajax的发送需要四步：

1) 创建Ajax对象: XMLHttpRequest

2) 设置请求参数: open(请求参数[get/post],url地址, 是否异步[true/false] )

3) 设置回调函数: onreadystateChange 用于处理返回的数据

4) 发送请求: send()

//TODO step1: 创建ajax对象
var xhr = new XMLHttpRequest();
//TODO step2: 设置请求参数
xhr.open('get','01.php',true);
//TODO step3: 设置回调
xhr.onreadystatechange = function () {
 //接收返回数据
 console.log(xhr.responseText);//responseText 用于接收后台响应的文本
}
//TODO step4: 发送请求
xhr.send();

二、封装

封装的核心思想就是把需要动态变化的部分当成参数，不变的部分就留在那里，在上面的代码中请求方式（get、post）、请求地址url、请求参数data、成功的回调success、失败回调error等，这些参数都是动态变化的；而创建Ajax对象 XMLHttprequest、事件监听onreadystatechange等是固定的，所以第一步我们要确定好封装的参数：

v url 请求地址

v data 请求数据

v type 请求类型

v success 成功回调

v error 失败回调

v beforeSend 发送前调用 return false 阻止发送

v complete ajax请求成功的回调, 无论什么时候都会执行

function ajax(option){
 //用户配置option 默认配置init
 var init = {
 type:'get',
 async:true,
 url:'',
 success: function () { },
 error: function () { },
 data:{},
 beforeSend: function () {
 console.log('发送前...');
 return false;
 }
 };
 //TODO step1: 合并参数
 for(k in option){
 init[k] = option[k];
 }
 //TODO step2: 参数转换
 var params = '';
 for(k in init.data){
 params += '&'+k+'='+init.data[k];
 }
 var xhr = new XMLHttpRequest();
 // type url
 //TODO step3: 区分get和post,进行传参
 var url = init.url+'?__='+new Date().getTime();
 //TODO step4: 发送前
 var flag = init.beforeSend();
 if(!flag){
 return;
 }
 if(init.type.toLowerCase() == 'get'){
 url += params;
 xhr.open(init.type,url,init.async);
 xhr.send();
 }else{
 xhr.open(init.type,url,init.async);
 xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
 xhr.send(params.substr(1));
 }
 xhr.onreadystatechange = function () {
 if(xhr.readyState == 4){
 if(xhr.status == 200){
 init.success(xhr.responseText);
 }else{
 //error
 init.error();
 }
 }
 }
}

这里我们要注意的是get和post的传参方式位置不一样，get请求需要直接拼接在url地址后边，post请求需要在send方法里面传参，而且需要这是请求头setRequestHeader('content-type','application/x-www-form-urlencoded')，所以封装时要进行区分。

由于参数过多，用户不需要每次都传入很多参数，否则用起来会非常繁琐。所以我们采取默认参数的形式，用户不传入就是用默认值，传入就是用用户的参数。

三、使用示例

ajax({
 url: 'test.json',
 data:{test:123,age:456},
 //type:'post',
 success: function (res) {
 console.log(res);
 }
});

原生JS封装AJAX方法

推荐度：

点击下载本文 文档为doc格式

标签：方法 js 封装

热门焦点

原生JS封装AJAX方法

原生JS封装AJAX方法

原生JS封装AJAX方法

最新推荐

猜你喜欢

热门推荐