Ajax

什么是Ajax（Asynchronous JavaScript and Xml）：
Ajax通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理

什么是HTTP请求？

浏览器与服务器之间，采用HTTP协议通信。

1. 用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出HTTP请求。
2. 服务器端接收到请求，会进行计算，向浏览器返回一个包含事务结果的HTTP响应报文。

为什么要使用Ajax？

• 能够向服务器请求额外的数据而无需加载整个页面，会带来好的用户体验
• Ajax是一种技术方案，可以和后端交换数据，不用刷新页面。

优点：

• 更新数据而不需要刷新页面：它能在不刷新整个页面的前提下与服务器通信维护数据，按照需求请求数据，避免了发送大量的数据。
• 异步通信：与服务器使用异步的方式通信，不会打断用户的操作。
  前后端负载平衡：可以将后端服务器的一些工作转移给客户端，利用客户端限制的能力来处理，减轻了服务器的负担。
• 数据与呈现分离：利于分工，降低前后耦合。

缺点：

• 浏览器历史记录的遗失：在使用Ajax对页面进行改变后，由于没有刷新页面，没有改变页面的访问历史，当用户想要回到上一个状态时，无法使用浏览器提供的后退。
• Ajax的安全问题：Ajax的出现就像建立起了一直通信服务器的另一条通道，容易遭受一些攻击。

如何和后端进行交互呢？

• form表单提交
  通过submit按钮被点击，浏览器会默认将inpiut中的内容提交到form的action的地址上

//会提交到当前域名下的form.html
//缺点：页面会跳转，单项提交，没有后台反馈，影响用户体验。

• ajax
• websocket

Ajax包括以下几个步骤：

1. 创建Ajax对象
2. 发出HTTP请求
3. 接收服务器返回的数据
4. 更新网页数据

接下来通过代码来看一下如何实现一个Ajax

1. 实现一个最简单功能的Ajax

2. 当请求不存在的文件时防止服务器挂掉，看看下面的方法

3. POST方法

4. 封装一个Ajax

XMLHttpRequest实例的属性

readyState

只读属性，用一个正数对应的常量，表示XMLHttpRequest请求当前所处的状态。
0：对用常量UNSET，表示XMLHttpRequest实例已经生成，但是open()方法还没有调用。
1：对应常量OPENED，表示send()方法还没有被调用，任然可以使用setRequestHeader()，设定HTTP请求头信息。
2：对应常量HEADERS_RECEIVED，表示send()方法已经执行，并且头信息和状态码已收到。
3：对应常量LOADING，表示正在接受服务器传来的body部分的数据，如果responseType属性是text或者空字符串，responseText就会包含已经收到的部分信息。
4：对应常量DONE，表示服务器数据已经完全接收，或者本次接收已经失败了。

在通信过程中，每当发生状态变化的时候，readyState属性的值就会发生改变。这个值每一次变化，都会触发readyStatyChange事件。

responseType

responseType属性用来指定服务器返回数据类型。
""：字符串（默认值）
arraybuffer：ArrayBuffer对象
blob：Blob对象
document：Document对象
json：JSON对象
text：字符串

status

status属性为只读属性，表示本次请求所得到的HTTP状态码，它是一个整数。一般来说，如果通信成功的话，这个状态码是200。
200：OK，访问正常
301：Moved Permanently，永久移动
302：Move temporarily，暂时移动
304：Not Modified，未修改
307：Temporary Redirect，暂时重定向
401：Unauthorized，未授权
403：Forbidden，禁止访问
404：Not Found，未发现指定网址
500：Internal Server Error，服务器发生错误
基本只有2xx和304的状态码，表示服务器返回是正常状态。

参考资料

Ajax实践
JavaScript 标准参考教程