- 前言：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) //输出对象
}
}
-
控制台输出
image - 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) //输出对象
}
}
-
控制台输出
image - 被请求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]
}
-
控制台输出
image
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]
}
- 控制台输出
image
- 如有不对之处，请大家多多指正，谢谢！
