13518219792
小编给大家分享一下如何实现JavaScript原生封装ajax请求和Jquery中的ajax请求，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
为治多等地区用户提供了全套网页设计制作服务，及治多网站建设行业解决方案。主营业务为成都网站设计、做网站、治多网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
1、原生ajax
（1）html前端代码get请求方式创建一个ajax实例xhr open()方法传入三个参数，第一个是请求方式（一般为get和post），第二个参数是请求地址，第三个布尔值，true代表异步，false代表同步 send发送数据（get用不上，get发送的数据一般在链接后面，所以为显式传值，形式为键值对）绑定监听函数判断状态码 xhr.responseText得到返回数据
var xhr = new XMLHttpRequest()
xhr.open("GET","js/text.js",true)
xhr.send()
xhr.onreadystatechange = function(){ //
if(xhr.readyState === 4&& xhr.status === 200){
var data = xhr.responseText
var datas = JSON.parse(data)
console.log(datas)
}
}控制台输出
（2）html前端代码post请求方式 post传递方式需要设置头信息，实测简单的请求不设置也是可以这里的传值是放在send()方法里面的，所以为隐式传值，其他的都和get相同
var xhr = new XMLHttpRequest()
xhr.open("POST","js/text.js",true)
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4&& xhr.status === 200){
var data = xhr.responseText
var datas = JSON.parse(data)
console.log(datas)
}
}控制台输出
（3）被请求js代码
{
"name":"小明",
"age":24,
"array":[1,51,3,4,4,6,64]
}2、函数封装 这里函数封装的一个ajax方法，用的时候直接调用该方法，传入设置参数即可
参数有请求类型type,请求地址url，传入数据data（本案例无，没有也需要“”占位），请求成功返回函数success（也可多加一个失败返回函数）
（1）前端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));
});（2）被请求js代码
{
"name":"小明",
"age":24,
"array":[1,51,3,4,4,6,64]
}控制台输出
3、Jquery中的Ajax（先引入Jquery）（1）前端简单的JS代码 jquery中的ajax是被库封装好了的，我们直接用即可，下面是简单的ajax请求，它也有很多参数，但基础的就这些了
$.ajax({
url:"./js/text.js",
type:"GET",
dataType:"json",
success:function(data){
console.log(data)
},
error:function(res){
console.log("请求失败！")
}
})（2）被请求js代码
{
"name":"小明",
"age":24,
"array":[1,51,3,4,4,6,64]
}控制台输出
看完了这篇文章，相信你对“如何实现JavaScript原生封装ajax请求和Jquery中的ajax请求”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
