美文网首页
用原生js封装ajax

用原生js封装ajax

作者: 蓝色木头 | 来源:发表于2017-12-23 10:28 被阅读0次

// ajax操作

/*options = {

type : "get|post", // 请求方式,默认 "get"

url : "xxx.php", // 请求资源的URL

async : true, // 是否异步请求,默认为 true

data : {}, // 向服务器传递的数据{username:"xiaoming", password:"abc", phone:"123"}

dataType : "text|json", // 预期从服务器返回的数据格式

success : function(data){},  // 请求成功执行的函数

error : function(errMsg){} // 请求失败执行的函数

}*/

function ajax(options) {

if (!options) // 未传递参数,结束函数执行

return;

// 获取请求的URL

var url = options.url;

if (!url) // 没有请求的服务器资源,结束函数执行

return;

// 获取请求方式

var method = options.type || "get";

// 是否异步

var async = options.async;

if (async === undefined)

async = true;

// 处理查询字符串

var queryString = null;

if (options.data) { // 有向服务器传递的数据,则连接查询字符串

queryString = [];

for (var attr in options.data) {

queryString.push(attr + "=" + options.data[attr]);

}

queryString = queryString.join("&");

}

// 如果是 get 提交数据,将数据用 ? 号串联在 url 中

if (method === "get" && queryString) {

url += "?" + queryString;

queryString = null;

}

// 创建核心对象

var xhr;

if (window.XMLHttpRequest)

xhr = new XMLHttpRequest();

else

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

// 建立连接

xhr.open(method, url, async);

// 如果要像表单一样POST提交数据,则设置请求头

if (method === "post")

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

// 发送请求

xhr.send(queryString);

if (async) { // 异步

// 处理响应

xhr.onreadystatechange = function(){

if (xhr.readyState === 4) {

if (xhr.status === 200) {

// 获取响应文本

var data = xhr.responseText;

// 判断预期返回的数据格式

if (options.dataType === "json")

data = JSON.parse(data);

// 请求成功时数据处理业务

options.success && options.success(data);

} else {

// 请求失败处理情况

options.error && options.error(xhr.statusText);

}

}

}

} else { // 同步

if (xhr.status === 200) {

// 获取响应文本

var data = xhr.responseText;

// 判断预期返回的数据格式

if (options.dataType === "json")

data = JSON.parse(data);

// 请求成功时数据处理业务

options.success && options.success(data);

} else {

// 请求失败处理情况

options.error && options.error(xhr.statusText);

}

}

}

//封装完成后,根据自身情况选择

// 用于处理get请求

function get(url, data, success, dataType) {

ajax({

type : "get",

url : url,

data : data,

dataType : dataType,

success : success

});

}

// 用于处理post请求

function post(url, data, success, dataType) {

ajax({

type : "post",

url : url,

data : data,

dataType : dataType,

success : success

});

}

// 用于处理get请求,响应数据的格式为json格式

function getJSON(url, data, success) {

ajax({

type : "get",

url : url,

data : data,

dataType : "json",

success : success

});

}

相关文章

  • 原生js ajax网络数据请求 XMLHttprequest、A

    再学封装ajax请求 原生JS,AJAX数据封装 兼容性处理 脚本: 请求操作:

  • promise封装原生ajax、jqueryAjax、axios

    原生js的ajax封装+promise 将原生js的ajax请求单独封装成一个数据请求的模块, 需要的时候直接调用...

  • js 原生ajax的封装

    概念 ajax是前端常用技术,今天用原生js封装了一个ajax函数,类似于jquery库的$.ajax()函数,大...

  • 用原生js封装ajax

    // ajax操作 /*options = { type : "get|post", // 请求方式,默认 "ge...

  • 实现一个AJAX

    AJAX是什么鬼 续篇 今天我们给AJAX封装一下 之前写了篇有关用原生JS写jQuery的博客下面是相关主要代码...

  • 原生JS封装AJAX

    一直以来ajax这一块用的都是第三方,如jquery内置的$.ajax,vue最佳拍档axios等,理论来说这些插...

  • 原生Js封装Ajax

    这是一个点击加载更多的插件,点击more按钮,请求ajax,将依次加载3条数据 html由一个ul和一个butto...

  • 原生js封装ajax

    /** 发送一个 AJAX 请求 @param {String} method 请求方法 @param {...

  • ajax原生js封装

    ajax用jquery使用确实方便,但如果只用ajax,难道我们还会为了使用而引入jquery吗?不仅如此,用原生...

  • 原生js封装AJAX

    函数封装: 2.封装Ajax

网友评论

      本文标题:用原生js封装ajax

      本文链接:https://www.haomeiwen.com/subject/rkvfgxtx.html