类似jQuery的原生JS封装的ajax方法

一，前言：

　　前文，我们介绍了ajax的原理和核心内容，主要讲的是ajax从前端到后端的数据传递的整个过程。

Ajax工作原理和原生JS的ajax封装

　　真正的核心就是这段代码：

var xhr = new XMLHTTPRequest(); xhr.open("method", "url", "async"); xhr.send(null); xhr.onreadystatechange = function(){ if(xhr.readystate == 4){ 　　　if(xhr.status == 200){ 　　　　　console.log(xhr.responseText) 　　　} 　 } }

　　一个对象（XMLHTTPRequest对象）、

　　两个方法（包括open("method", "url", "async")方法和send(content)方法）、

　　三个属性（readystate表示当前请求状态，status表示http请求状态码，responseText表示服务器反馈内容），

　　当然还有一个事件——onreadystatechange ，是在readystate状态改变时触发的事件。具体的内容请点击链接Ajax工作原理。

 

二，正文：

　　先来看看jQuery中Ajax方法的使用：

$.ajax({ type: "GET",            　　//访问服务器的方式，GET/POST
    url: "test.json",       　　//url表示访问的服务器地址
    data: {username: "", content: ""}, 　　　 //data表示传递到后台的数据，使用键值对形式传递
    async: true,            　 //true表示异步，false表示同步
    success: function(data){ console.log(data) }, error: function(err){ console.log(err) } });      

　　

　　那么我们想要封装成类似JQuery的形式，供调用，怎么办呢？

function $Ajax(opt){ opt = opt || {}; opt.type = opt.type || "post"; opt.url = opt.url || ""; opt.async = opt.async || true; opt.data = opt.data || null; opt.success = opt.success || function(){}; opt.error = opt.error || function(){}; var xhr = new XMLHTTPRequest(); var params = {}; for(var key in opt.data){ params.push(key + "=" + opt.data[key]); } var sendData = params.join("&"); if(opt.type.toUpperCase() == "GET"){ xhr.open(opt.type, opt.url + "?" + sendData, opt.async); xhr.send(null); }else{ xhr.open(opt.type, opt.url, opt.async); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8"); xhr.send(sendData); } xhr.onreadystatechange = function(){ if(xhr.readystate == 4){ if(xhr.status == 200){ opt.success && opt.success(xhr.responseText); }else{ opt.error && xhr.error(xhr.status); } } } }          　　

　　

　　已经封装好了，接下来就是调用了，就像jQuery那样使用就行：

$Ajax({ type: "GET", 　 url: "test.json", data: {username: "", content: ""}, async: true, success: function(responseText){ console.log(responseText) }, error: function(status){ console.log(status) } });  

 

二，结语：

　　已经很晚了，没有进行测试，也没有详细进行注释，有时间再完善吧。

详细看这一篇：Ajax工作原理和原生JS的ajax封装