AJAX(上)
异步的Javascript and xml,是一种网页的局部刷新技术,即在请求后台时,页面全局不会进行刷新,只是页面某一部分刷新,应用场景十分广泛,比如:表单验证,分页,前端数据展示。ajax不是一项新技术,在js的基础上实现新应用,全局通过一个XMLHttpRequest的对象实现跟后台交互。
AJAX使用步骤:
-
创建一个XMLHttpRequest对象
-
打开连接(请求后他)
-
发送请求
-
当请求状态发生改变时触发回调函数
- 判断请求状态(readyState:4)
- 判断响应状态(status:200)
- 获取服务端数据(responseText)
创建XMLHttpRequest对象
var xhr;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
####打开连接
xhr.open('GET','请求地址');
####发送请求1 - get请求
xhr.send(null);
####发送请求2 - post请求
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send(data);//data表示需要提交的数据
####当准备状态发生改变时触发回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState == 4 && xhr.status == 200){
//获取服务端响应的数据
var data = xhr.responseText;
}
}
AJAX封装
为了让使用ajax变得更简单,这里可以通过封装的思想将ajax请求封装为一个函数,这样,以后对ajax的使用就只需要少量的代码即可完成:
####封装AJAX工具函数(base.js)
function ajax(method,url,data,callback){
var xhr = null;
//创建XMLHttpRequest对象(考虑浏览器兼容性)
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');//IE5,IE6
}
//打开连接
xhr.open(method,url);
//判断method是否post
if(method.toLowerCase() === 'post'){
//对于post请求需要设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
}
//发送请求
xhr.send(data);
//设置当请求状态发生改变时触发回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState == 4 && xhr.status == 200){
var data = xhr.responseText;
//通过回调机制将数据传递到外部
callback(data);
}
}
}
####使用封装的工具函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="load">加载数据</button>
<!-- 引入js插件 -->
<script src="js/base.js"></script>
<script>
var btn = document.getElementById('load');
btn.addEventListener('click',function(){
//发送ajax请求
ajax('get','http://hk.softeem.top/mymusic/list',null,function(data){
//将json字符串转换为JS对象
data = JSON.pase(data);
console.info(data);
})
})
</script>
</body>
</html>