理解ajax

1. 它是指异步的JavaScript和XML。
2. 它是一门技术而不是新的编程语言。
3. 无刷新整个页面在网页中更新一部分数据。
4. 它的核心是XMLHttpRequest对象。

ajax的原理

他是多种技术的集合体，核心是创建XMLHttpRequest请求对象（支持异步请求的技术，简单来说就是JavaScript可以及时向服务器提出请求和处理响应，而不阻塞用户，达到无刷新效果。）

• XMLHttpRequest用来在浏览器和服务器之间通信
• JavaScript负责调用XMLHttpRequest对象进行与后台交互的媒介。
• XML一中数据格式，服务器应答传递消息的格式。还可以使json。
• 使用DOM模型来交互和动态显示。

比较异步和同步

异步传输基于字符，同步传输基于比特。

• 同步用户提交请求后需要等待服务器处理完成后，客户端才能做其他事情。浏览器访问服务器请求，用户看得到页面刷新，数据更新。
• 异步服务器处理浏览器请求的过程当中，浏览器可以去处理其他事情。等请求完后，页面不刷新也能看到新内容。

ajax的过程

1. 创建XMLHttpRequest对象，即创建异步调用对象。
2. 创建一个新的HTTP请求，指定请求的方法，URL，以及是否异步处理请求。open（）
3. 设置响应http请求状态变化的函数。onreadystatechange（）。
4. 发送http请求。send（）
5. 获取异步调用返回的数据
6. 使用JavaScript和DOM实现局部刷新。

XMLHttpRequest 的属性

Onreadystatechange每次状态改变所触发的事件处理程序。
responseText从服务器返回数字的字符串形式。
responseXML从服务器返回DOM兼容的文档数据对象。
status从服务器返回的HTTP状态码。
statusText状态码的字符串信息。
readyState对象状态值

• 0未初始化，对象已建立，但尚未调用open方法。
• 1初始化，尚未调用send方法
• 2发送数据，send方法已调用，但当前的状态及http头未知。
• 3数据传送中，已接收部分数据，但响应及http头不全，这时调用responseText获取数据会出错。
• 4数据接收完毕，可以通过responseText获取完整的响应数据。

ajax的优缺点

• 优点

1. 页面无刷新，在页面内与服务器通信，给用户的体验非常好。
2. 使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
3. 减轻服务器负担，节约带宽，按需获取数据，减少冗余请求。

• 缺点

1. 破坏浏览器的后退机制。
2. 安全问题开发者在不经意间暴露比以前更多的数据和服务器逻辑，ajax的逻辑对客户端的安全扫描技术隐藏起来，允许黑客聪远端服务器建立新的攻击。
3. 对搜索引擎的支持比较弱。
4. 破坏了程序的异常机制。
5. 违背了URL和资源定位的初衷。
6. 一些手持设备现在还不是很好的支持ajax。

ajax的几种框架

• jQuery
  jQuery是一个快速简洁的JavaScript框架。对原生XHR封装。另外还增加了jsonp的支持，让ajax请求可以支持跨域请求。它的原理是动态创建一个script标签，利用了src特性请求任何一个网站资源。
• axios
  他是一个基于promise的http库。
  它的特性是：

1. 从浏览器中创建XMLHttpRequest对象
2. node.js发出http请求
3. 支持promise API
4. 拦截请求和响应
5. 转换请求和响应数据
6. 取消请求
7. 自动转换json数据
8. 客户端支持CSRF/XSRF

• fetch
  近年来提及将要取代XHR技术的标准，它是一个HTML5的API。基于promise的语法结构，有更多扩展的可能性。

flash 和ajax的对比

flash适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。
ajax对CSS和文本支持很好，支持搜索，多媒体、矢量图形，机器访问不足。