前端通信的桥梁Ajax理解

AJAX简介

1. 是一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。
2. 这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
3. JavaScript是核心语言

为什么使用ajax

它可以在不刷新整个页面的情况下与服务器通信保持原有页面状态，说的简单易懂一点。
举个例子：在我们浏览网页的时候会有两种情况

1. 点击链接，页面白屏，等待跳转到另一个页面。
2. 页面不刷新，局部出现新内容获得更好的用户体验。

工作原理

核心XHR（浏览器内置对象”XMLHttpRequest）

• Ajax功能实现所依赖的对象
  • AJAX就是通过浏览器的内置对象XHMHttpResquest来发送异步请求的，异步请求不会妨碍客户端的任何操作。
  • • 异步
  • XHR相当于是一个通信兵，来负责客户端与服务器之间的通信传输。举个例子：
    • 要打仗了，前方阵地（客服端）不可能只等着通信兵（XHR）传递消息其他什么也不干吧。
    • 所以前方阵地还在干着自己的事情然后派通信兵去请求后方指挥部（服务器）的命令。
    • 指挥部下达命令指挥，通信兵再把命令传到前方阵地。
    • 然后前方阵地再执行命令相关的操作（客户端把数据渲染到页面）。
    • 这也就是Ajax的异步原理。
• 如果是同步
  • 前方阵地和通信兵一起去向服务器请求数据，直到通信兵请求到数据，我才开始渲染页面，在请求的过程中页面一直是白屏等待的。
• XHR属性
  • onreadystatechange
    • 用于指定状态改变时所触发的事件处理器（在设置回调函数的时候经常用到, 所有的状态改变的时候都会触发这个事件处理器）
  • readyState
    • 用于获取请求的状态（ 通过返回的代码是多少来判断当前的状态是什么情况）
    • 返回值：0: 未初始化; 1: 正在加载; 2:已加载; 3:交互中; 4:完成
  • responseText
    • 获取服务器的响应, 表示为字符串（response.getWrite().append("");将这个语句的内容返回到用户页面）
  • responseXML
    • 用于获取服务器的响应, 表示为字符串
  • status
    • 返回Http状态码：200:表示成功; 202:表示请求被接受, 但尚未成功; 400:错误的请求; 404:文件未找到; 500:内部服务器错误
  • statusText
    • 返回Http状态码的文本信息

XHR方法

• open()
  • 发送请求的页面在不刷新的情况能将参数传给一个服务器进行处理, 这个方法就是将这些个参数传送过去
  • 参数
    1. method:用于指定请求的类型 “GET"或者"POST”
    2. url:用于请求的地址, 可相对可绝对
    3. asyncFlag:指定请求方式为同步还是异步, true为异步, false为同步
• send()
  • 将一些参数以键值对的方式传送给服务器, 异步的话将立即返回服务器的响应, 做到不刷新页面进行数据处理就是用来发送参数的,
  • GET方法下可以在url的后面写上参数的值, POST方法下只能在send()方法里面写上参数的键值对
• setRequestHeader(“header”,“value”)
  • 用于为请求的Http头设置值
• getResponseHeader(“headerLabel”)
  • 返回设置的Http头信息
• abort()
  • 使用了这个请求之后会直接停止getResult的回调函数, 让readyState属性的返回值直接为0
• getAllResponseHeaders();
  • 以字符串的形式返回完整的字符串信息

  - ajax优缺点

  • 优点
  1. 提交方式可以通过任意的事件进行触发
  2. 最大的优点就是页面无需刷新，在页面内与服务器通信，非常好的用户体验
  3. 使用异步的方式与服务器通信，不需要中断操作
  4. 可以把以前服务器负担的工作转嫁给客户端，减轻服务器和带宽，可以最大程度减少冗余请求
  5. 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
• 缺点
  1. AJAX干掉了Back和History功能，即对浏览器机制的破坏。
     • 在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。
     • 一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；
     • 用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
  2. 安全问题技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。
     • 这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。
     • ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。
     • 还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。
  3. 对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能

应用场景

1. 数据验证
2. 按需取数据
3. 自动更新页面

AJAX的创建过程

1. 必须基于xhr对象，因此第一步创建xhr对象

2. xhr = new XMLHttpRequest() 规范以后

3. xhr = new ActiveXObject(“Microsoft.XMLHTTP”) IE5及以前

4. 可以做一下兼容性处理

   var xhr;
   if (window.XMLHttpRequest) {
       // code for IE7+, Firefox, Chrome, Opera, Safari
       xhr = new XMLHttpRequest();
   } else {
       // code for IE6, IE5
       xhr = new ActiveXObject("Microsoft.XMLHTTP");
   }
   

2.绑定监听函数

- xhr.readyState 有5个状态，分别对应的是0 1 2 3 4
- 0：没有建立连接，未初始化
- 1：正在加载
- 2：已加载
- 3：交互中
- 4：ajax请求发送并且响应完成

• xhr.status 响应码
  • 1xx：信息类错误
  • 2xx：成功 200
  • 3xx：重定向 304
  • 4xx：客户端错误 404
  • 5xx：服务端错误 基本上就是找后台麻烦去了

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log("数据获取成功！！！");
    }
}

3.建立连接

xhr.open("GET", "xxx.html?t=" + 123, true);

4.发送请求

xhr.send();

5.综合

• 综合

var xhr;
if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xhr = new XMLHttpRequest();
} else {
    // code for IE6, IE5
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log("数据获取成功！！！");
    }
}
xhr.open("GET", "xxx.html?t=" + 123, true);
xhr.send();

最后提一下JSON

• xml（就是用xml自定义的标签形式去模拟js对象）：前后台传递数据的格式
  • 因为解析xml非常麻烦，所以前后端传输数据的格式变成了json
• 就是对象，属性名必须是双引号
• 相关方法
  • JSON.parse() 把json字符串转换成json对象
  • JSON.stringify() 把json对象转换成json字符串