JavaScript之Ajax初探

一.关于Ajax

什么是Ajax呢？

• 它是一种新的技术，它可以创建更好、更快且交互性更强的 web 应用程序。
• Ajax 主要在 web 浏览器与 web 服务器之间来发送和接收数据
• 它的基本原理大致就是这种模式：HTML 和 CSS 呈现数据和样式，DOM和相关方法支持页面实时更新，XHR 支持与服务器通信，JavaScript安排整体显示。

使用Ajax的优点？

• 页面无需刷新，就可以实现数据传输，用户体验良好
• 使用异步方式与服务器通信，具有更加迅速的响应能力
• Ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

使用Ajax的缺点？

• ajax不支持浏览器back按钮
• 安全问题 AJAX暴露了与服务器交互的细节
• 对搜索引擎的支持比较弱，不利于SEO
• 不容易调试

一般用于哪些场景？

• 数据验证
• 自动更新页面
• 按需求获取数据

二.如何创建Ajax

1.创建连接

var xhr=null;
 xhr = new XMLHttpRequest() ;

2.连接服务器

xhr.open('get', url, true) ;

3.发送请求

  xhr.send(null); 

4.接受请求

 xhr.onreadystatechange = function(){ 
    if(xhr.readyState == 4){ 
      if(xhr.status == 200){ 
        success(xhr.responseText); 
      } else { 
      // fail fail && fail(xhr.status); 
      } 
    } 
  }

三.回调方法

• onSuccess

• onFailure

• onUninitialized

• onLoading

• onLoaded

• onInteractive

• onComplete

• onException