原生js实现对Ajax的封装（仿jquery）

前言
众所周知，jquery在我们日常开发中的使用频率非常高，与js相比，我们省去了冗长的获取元素的代码，不用考虑一些麻烦的兼容问题，更加方便的动画实现，以及更加方便的方法调用让我们觉得jquery真是越用越舒服。但是jquery说到底还是对js的封装，我们不光要用的舒服还要深入理解其中的原理，这样才能更好的使用它。

首先我们封装的函数为了能实现可传入无限多个参数，在使用我们即将封装的函数时，需要使用对象进行传参，形式如下：

//data作为参数传入我们下面封装的函数var data = { //数据 user:"yonghu1", pass:"12345", age:18, //回调函数 success:function （data）{alert（data）; }}

函数封装：

1、封装一个辅助函数，把传进来的对象拼接成url的字符串

function toData（obj）{if （obj == null）{return obj;}var arr = [];for （var i in obj）{var str = i+"="+obj[i];arr.push（str）;}return arr.join（"&"）;}

2、封装Ajax

function ajax（obj）{//指定提交方式的默认值obj.type = obj.type || "get";//设置是否异步，默认为true（异步）obj.async = obj.async || true;//设置数据的默认值obj.data = obj.data || null;if （window.XMLHttpRequest）{//非ievar ajax = new XMLHttpRequest（）;}else{//ievar ajax = new ActiveXObject（"Microsoft.XMLHTTP"）;}//区分get和postif （obj.type == "post"）{ajax.open（obj.type,obj.url,obj.async）;ajax.setRequestHeader（"Content-Type", "application/x-www-form-urlencoded"）;var data = toData（obj.data）;ajax.send（data）;}else{//get test.php?xx=xx&aa=xxvar url = obj.url+"?"+toData（obj.data）;ajax.open（obj.type,url,obj.async）;ajax.send（）;}ajax.onreadystatechange = function （）{if （ajax.readyState == 4）{if （ajax.status>=200&&ajax.status<300 || ajax.status==304）{if （obj.success）{obj.success（ajax.responseText）;}}else{if （obj.error）{obj.error（ajax.status）;}}} }}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。