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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
