Ajax-基础

Ajax(Asynchronous JavaScript and XML)（异步的JavaScript 和 XML）

Ajax技术体系点

• 使用CSS和XHTML来表示 
• 使用DOM模型来交互和动态显示 
• 使用XMLHttpRequest来和服务器进行异步通信。(最重要) 
• 使用javascript来绑定和调用

Ajax的原理

• 通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面

Ajax的优点

1. 无刷新更新数据
2. 异步与服务器通信
3. 前端和后端负载平衡
4. 基于标准被广泛支持
5. 界面与应用分离
    

Ajax的缺点

1. Ajax干掉了Back和History功能，即对浏览器机制的破坏。 
2. Ajax的安全问题。 
3. 对搜索引擎支持较弱。 
4. 破坏程序的异常处理机制。 
5. 违背URL和资源定位的初衷。 
6. AAjaxAX不能很好支持移动设备。 
7. 客户端过肥，太多客户端代码造成开发上的成本

Ajax请求八种Callback

1. onSuccess
2. onFailure
3. onUninitialized
4. onLoading
5. onLoaded
6. onInteractive
7. onComplete
8. onException

Ajax请求过程

1. 得到xmlHttpRequest对象；
2. 打开与服务器的连接（需要三个参数:请求方式，url，是否异步）；
3. 发送请求；
4. 在对象的一个事件上注册监听器

Ajax实现方式

• 原生 JS 实现 Ajax

var Ajax={

  get: function(url, fn) {
    // XMLHttpRequest对象用于在后台与服务器交换数据   
    var xhr = new XMLHttpRequest();            
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      // readyState == 4说明请求已完成
      if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { 
        // 从服务器获得数据 
        fn.call(this, xhr.responseText);  
      }
    };
    xhr.send();
  },

  // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
  post: function (url, data, fn) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    // 添加http头，发送信息至服务器时内容编码类型
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn.call(this, xhr.responseText);
      }
    };
    xhr.send(data);
  }

}

• JQuery 实现 Ajax

$.ajax({
    url: ,
    type: '',
    dataType: '',
    data: {          
    },
    success: function(){         
    },
    error: function(){          
    }
 })

参考：

1. 原生js实现Ajax
2. ajax过程详解