Ajax总结

今天封装了一个简单的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('出错了')
    }
})