008-02-XMLHttpRequest对象和生命周期及Ajax的优缺点

概述
XMLHttpRequest对象的函数
XMLHttpRequest对象的函数
XMLHttpRequest对象生命周期
Ajax的优缺点
- 1. 优点
- 2. 缺点

概述

XMLHttpRequest对象从创建到销毁存在一个完整的生命周期，在生命周期的每个阶段会调用XMLHttpRequest对象的不同函数，在函数中需要通过XMLHttpRequest对象的特定属性来判断函数执行情况。

XMLHttpRequest对象的函数

abort()函数
1. 如果请求已经发送，则停止当前请求。
getAllResponseHeaders()函数
1. 获取所有HTTP请求的响应头部，作为键值对返回；如果没有收到响应，则返回“null”。
getResponseHeader(“key”)函数
1. 获取指定key的HTTP响应头，如果没有收到响应或者响应中不存在key对应的报头，则返回“null”
open(“method”,”URL”,[asyncFlag],[“userName”],[“password”])函数 — 建立对服务器的调用。
1. method参数表示请求方式，可以为GET、POST或者PUT。
2. URL参数表示请求的路径，可以是相对路径，也可以是绝对路径。
3. 后面3个是可选参数，分别表示是否异步、用户名、密码。其中asyncFlag=true表示异步，asyncFlag=false表示同步，默认值为true。
send(content)函数 — 向服务器发送请求。
setRequestHeader(“key”, “value”)函数
1. 设置请求头中属性为key的值为value。在设置请求头之前需要先调用open()函数，设置的header将随着send()函数一起发送。
  XMLHttpRequest对象的函数
onreadystatechange
1. 状态改变的事件触发器，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数。
readyState — 请求的状态，有5个可取的值。
1. 0，未初始化，XMLHttpRequest对象已创建。
2. 1，open()函数已调用，send()函数未调用，请求还未发送。
3. 2，send()函数已调用，HTTP请求已发送到服务器，未接收到响应。
4. 3，所有响应头接收完成，响应体开始接收但未完成。
5. 4，HTTP响应接收完成。
responseText
1. 接收的数据文本格式的服务器响应体（不包括响应头）。
responseXML
1. 服务器的响应，兼容DOM的XML对象，解析后可得到DOM对象。
status
1. 服务器返回的HTTP状态码，用数字表示，如200表示“成功”，404表示“资源未找到”。
statusTextHTTP
1. 状态码的文本表示，如状态码为200时，对应返回“OK”；状态码为404时，对应返回“Not Found”。

XMLHttpRequest对象生命周期

创建XMLHttPRequest对象
建立连接
1. 当XMLHttPRequest对象创建完毕后，便可以通过open()函数建立连接，它指定了请求的url地址以及通过url传递的参数；数据传输方式，默认值为true，表示采用异步传输方式。
2. var xhr = creatXMLHttp(); xhr.open('post','/admin/w/saveUser', true);
发送请求并传递数据
1. 在使用open()函数建立连接后，便可以使用send()函数发送请求，并传递数据content。由于传递的数据并不是必需的，所以content值可以为空。
2. var content = { userName:'kingx', password: '12345' }; xhr.send(content)
处理响应
1. 在XMLHttpRequest对象中有一个很重要的onreadystatechange属性，它表示XMLHttpRequest对象状态改变的事件触发器，每次readyState的取值变化时，属性onreadystatechange对应的函数都会被执行一次。
2. 当readyState的值为4时代表响应接收完成，需要注意的是响应接收完成并不代表请求是成功的，我们需要通过HTTP请求status状态码来判断，当status值为200时代表请求成功。
3. 因此在onreadystatechange()回调函数中，我们需要同时判断readyState和status两个值才能对响应值做正确的处理。
```
xhr.onreadystatechange = function() {  
// 当readyStatew为4，且状态码为200时代表请求成功
if（xhr.readState === 4 && xhr.status === 200）{
// 处理响应值
document.write(xhr.responesText);
}
}
```
  Ajax的优缺点
  
  Ajax的诞生带来了更好的用户体验，但是它带来的缺陷却容易被人忽视

1. 优点

无刷新更新数据。
1. Ajax的最大优点是在不需要刷新页面的情况下，能够与服务端保持数据通信，这使得Web应用程序能够快速地响应用户请求，避免不必要的等待时间，提高用户体验。
异步通信。
1. Ajax使用异步的方式与服务端通信，能够减少不必要的数据传输，降低网络数据流量，使得响应更加迅速。
前后端分离。
1. Ajax可以使得前后端分离开发更加完善，后端专注于接收请求、响应数据，前端专注于页面逻辑的处理。
前后端负载均衡。
1. 在前后端进行分离开发后，以往由后端处理的数据逻辑，现在也可以交给前端处理，减轻服务端压力。
标准化支持。
1. Ajax是一种基于Web标准化并被浏览器广泛支持的技术，不需要下载额外的插件，只需要客户允许JavaScript在浏览器上执行即可。
  2. 缺点
破坏浏览器的正常后退功能。
1. 浏览器有一个很重要的功能是对历史记录的追溯，通过后退按钮可以退到浏览器之前访问过的页面，但是该按钮却没有办法和JavaScript进行很好的合作，从而导致Ajax对浏览器后退机制的破坏。
安全性问题。
1. Ajax的逻辑可以将前端安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的链接。同时Ajax也难以避免一些已知的安全性弱点，例如跨域脚本攻击、SQL注入攻击和基于Credentials的安全漏洞等。
对搜索引擎支持较弱。
1. 浏览器在进行SEO（Search Engine Optimization，搜索引擎优化）时，会屏蔽掉所有的JavaScript代码，而JavaScript是Ajax技术组成中至关重要的一部分，这就导致了SEO对Ajax支持不友好。
违背URL唯一资源定位的初衷。
1. 由于Ajax请求并不会改变浏览器地址栏的URL，因此对于相同的URL，不同的用户看到的内容可能是不一样的，这就违背了URL定位唯一资源的初衷。

概述

XMLHttpRequest对象的函数

XMLHttpRequest对象的函数

XMLHttpRequest对象生命周期

Ajax的优缺点

1. 优点

2. 缺点