今天封装了一个简单的ajax。所以顺便总结一下。
#######ajax概念
- ajax:Asynchronous JavaScript and XML。异步的JavaScript和XML
- 作用：实现网页的异步加载，局部刷新网页。当在向服务器获取新数据时不需要刷新整个网页，提高用户体验。
- 优点：
(1)更新数据而不需要刷新页面： 它能在不刷新整个页面的前提下与服务器通信维护数据，由于ajax是按照需求请求数据，避免发送那些没有改变的数据
(2)异步通信： 它与服务器使用异步的方式通信，不会打断用户的操作（卡死页面）
(3)前后端负载平衡： 可以将后端服务器的一些工作转移给客户端，利用客户端限制的能力来处理，减轻了服务器的负担
(4)数据与呈现分离： 利于分工，降低前后耦合 - 缺点
(1)浏览器历史记录的遗失： 在使用AJAX对页面进行改变后，由于并没有刷新页面，没有改变页面的访问历史，当用户想要回到上一个状态时，无法使用浏览器提供的后退
(2)AJAX的安全问题： AJAX的出现就像建立起了一直通服务器的另一条通道，容易遭受到一些攻击
ajax封装
可以满足基本的需求。后面根据使用情况会一点点更新。
function ajax(opts){
var xhr = new XMLHttpRequest();
var data = '';
for(var key in opts.data){
data += key + "=" + opts.data[key] + "&";
}
data = data.substring(0,data.length-1);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var result = JSON.parse(xhr.responseText);
opts.success(result);
}else{
opts.error();
}
}
}
if(opts.type == "get"){
xhr.open("get",opts.url+"?"+data,true);
xhr.send();
}
if(opts.type == "post"){
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.open("post",opts.url,true);
xhr.send(data);
}
}
调用格式
ajax({
url: '/login', //接口地址
type: 'get', // 类型， post 或者 get,
data: {
username: 'xiaoming',
password: 'abcd1234'
},
success: function(ret){
console.log(ret); // {status: 0}
},
error: function(){
console.log('出错了')
}
})
