JavaScript原生封装ajax请求和Jquery中的ajax请求，内附详细案例和注释！

• 前言：ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。Ajax 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），当然也可同步，这样就可使网页从服务器请求少量的信息，而不是整个页面。Ajax使我们的项目更小、更快，更友好，在前端开发有很高的地位，也是面试题的热点。
• 注：本次测试是在localhost本地环境。

1、原生ajax

• html前端代码get请求方式

        var xhr = new XMLHttpRequest()   //创建一个ajax实例xhr
		xhr.open("GET","js/text.js",true)     //这里传入三个参数，第一个是请求方式（一般为get和post），第二个参数是请求地址，第三个布尔值，true代表异步，false代表同步
		xhr.send()                                      //发送数据（get用不上，get发送的数据一般在链接后面，形式为键值对）
		xhr.onreadystatechange = function(){      //绑定监听函数
			if(xhr.readyState === 4&& xhr.status === 200){   //判断返回状态码
				var data = xhr.responseText    //请求返回的数据
				var datas = JSON.parse(data)    //因为数据传过来是字符串，这里把它变成对象
				console.log(datas)   //输出对象
			}
		}
		

• 控制台输出
  
• html前端代码post请求方式

        var xhr = new XMLHttpRequest()   //创建一个ajax实例xhr
		xhr.open("POST","js/text.js",true)     //方式变为POST
		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //设置头部信息，放在open方法下面
		xhr.send()                                      //发送数据如果发送数据，可以写在这里面
		xhr.onreadystatechange = function(){      //绑定监听函数
			if(xhr.readyState === 4&& xhr.status === 200){   //判断返回状态码
				var data = xhr.responseText    //请求返回的数据
				var datas = JSON.parse(data)    //因为数据传过来是字符串，这里把它变成对象
				console.log(datas)   //输出对象
			}
		}

• 控制台输出
  
• 被请求js代码

{
	"name":"小明",
	"age":24,
	"array":[1,51,3,4,4,6,64]
}

2、函数封装

• 前端JS代码

            function Ajax(type, url, data, success){
		   
		    var xhr = null;   // 初始化xhr
		    if(window.XMLHttpRequest){    //兼容IE
		        xhr = new XMLHttpRequest();
		    } else {
		        xhr = new ActiveXObject('Microsoft.XMLHTTP')
		    }
		 
		    var type = type.toUpperCase();
		   
		    var random = Math.random(); //创建随机数
		 
		    if(type == 'GET'){
		        if(data){
		            xhr.open('GET', url + '?' + data, true);  //如果有数据就拼接
		        } else {
		            xhr.open('GET', url + '?t=' + random, true);  //如果没有数据就随便
		        }
		        xhr.send();
		 
		    } else if(type == 'POST'){
		        xhr.open('POST', url, true);
		        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		        xhr.send(data);
		    }
		 
		    
		    xhr.onreadystatechange = function(){     // 创建监听函数
		        if(xhr.readyState == 4&&xhr.status == 200){
		                success(xhr.responseText);
		            } 
		        }
		}
		 
		Ajax('get', 'js/text.js', "", function(data){   //调用函数
		    console.log(JSON.parse(data));
		});

• 被请求js代码

{
	"name":"小明",
	"age":24,
	"array":[1,51,3,4,4,6,64]
}

• 控制台输出
  

3、Jquery中的Ajax（先引入Jquery）

• 前端简单的JS代码

$.ajax({
			url:"./js/text.js",    //请求地址
			type:"GET",       //请求方式
			dataType:"json",   //请求数据类型
			success:function(data){   //成功调用方法
				console.log(data)
			},
			error:function(res){    //失败调用方法
				console.log("请求失败！")
			}
		})

• 被请求js代码

{
	"name":"小明",
	"age":24,
	"array":[1,51,3,4,4,6,64]
}

• 控制台输出
  
• 如有不对之处，请大家多多指正，谢谢！