# AJAX
Ajax是一种创建交互式网页应用的网页开发技术,当需要从服务器获取数据，并刷新页面的操作，如果不采用AJAX，则需要用提交整个表单的方式，当提交表单时，发送请求给服务器，页面需要等待服务器发送完response后，页面才能恢复操作。
# 什么是Ajax
而
Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
AJAX 是异步的JavaScript和XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest 对象与服务器通信
它可以使用JSON，XML，HTML和文本等多种格式发送和接收。
AJAX最吸引人的就是它的“异步”特性，也就是说AJAX可以在不重新加载整个页面的情况下，与服务器交换数据。这种异步交互的方式，使用户单击后，不必刷新页面也能获取新数据。使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
# 用来做什么
Ajax的唯一功能：发送数据和接收数据
你可以使用AJAX最主要的两个特性做下列事：
- 在不重新加载页面的情况下发送请求给服务器。
- 接受并使用从服务器发来的数据。
# Aajx原理
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Ajax是告诉浏览器给我要发送一个HTTP请求，你给我新开个线程去执行下，完事后告诉我一声，我在其他function中执行后续操作（回调）。在线程返回结果前，我可以继续做其他事情。（异步）
# 应用场景
- 对数据进行过滤和操纵相关数据的场景
- 添加/删除树节点
- 添加/删除列表中的某一行记录
- 切换下拉列表item
- 注册用户名重名的校验
# Ajax使用方法
# 1. 实例化ajax对象
var xhr = new XMLHttpRequest();
| Header One | Header Two |
|---|---|
| xhr.abort | 取消ajax请求的方法 |
# 2. open() 用于配置请求
| 参数 | 值 |
|---|---|
| request-type | 发送请求的类型,典型的值是 GET 或 POST，默认为GET |
| url | 要连接的 URL |
| asynch | 如果希望使用异步连接则为 true，否则为 false。该参数是可选的，默认为 true |
| username | 如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值 |
| password | 如果需要身份验证，则可以在此指定口令。该可选参数没有默认值 |
- 同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事
- 异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕
# 3. send() 用于发送请求
- GET方式：如果不需要通过 send() 传递数据，则只要传递 null 作为该方法的参数即可，将传递的数据放在url地址后面进行传递。
- POST方式：需要先设置请求头信息，然后将需要发送的数据放到send()的参数中进行发送。 (注：头部的设置必须在open()和send()之间)
// GET方式：
xhr.open(url+'?name=zhangsan&pwd=123456')
xhr.send(null);
// POST方式：
xhr.open(url)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send('name=zhangsan&pwd=123456');
# 4. onreadystatechange
- 每次Ajax请求状态改变时都会触发这个事件
- readyState： 请求的状态。有5个可取值
| 值 | 含义 |
|---|---|
| 0 | （未初始化）还没有调用send()方法 |
| 1 | （正在载入）已调用send()方法，正在发送请求 |
| 2 | （载入完成）send()方法执行完成，已经接收到全部响应内容 |
| 3 | （交互中）正在解析响应内容 |
| 4 | （完成）响应内容解析完成，可以在客户端调用了 |
# 5. status
当readyState 的值为4的时候，说明我们和服务器的交互是成功的，但是如何判断页面返回的数据是成功的呢？我们需要再来检测一下服务器的HTTP状态码，状态码保存在一个属性status上
| 值 | 含义 |
|---|---|
| 200 | OK 一切正常 |
| 304 | Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用 |
| 404 | Not Found 无法找到指定位置的资源 |
| 5xx | 服务器错误 |
响应
- response 响应实体的类型由 responseType 来指定， 可以是 ArrayBuffer， Blob， Document， JavaScript 对象 (即 "json")， 或者是字符串。如果请求未完成或失败，则该值为 null。
- responesType 设置该值能够改变响应类型。就是告诉服务器你期望的响应格式。
- responseText 此次请求的响应为文本，或是当请求未成功或还未发送时为 null。
- responseXML 本次请求的响应是一个 Document 对象，如果是以下情况则值为 null：请求未成功，请求未发送，或响应无法被解析成 XML 或 HTML。当响应为text/xml 流时会被解析。
upload 可以在 upload 上添加一个事件监听来跟踪上传过程。
ajax对象和upload对象拥有相同的事件
| 事件 | 含义 |
|---|---|
| onabort | 当发生中止事件时触发的事件 |
| onerror | 当发生加载错误是触发的事件 |
| onload | 当加载结束后触发的事件，不论成功与否 |
| onloadend | 加载结束后触发的事件 |
| onloadstart | 当加载开始时触发的事件 |
| onprogress | 在加载过程中不断触发的事件 |
| ontimeout | 加载超时后执行的事件 |
xhr.upload.onprogress=function(e){
//获取当前上传进度传递到progress中显示
progress.value=parseInt(e.loaded/e.total*100)
}
# get和post的区别
- 功能
- get是从服务器上获取数据 (查)
- post是向服务器传送数据，用于创建资源 (增)
- 数据量
- get受限于浏览器url长度，IE对URL长度的限制是2083字节(2K+35)，其他浏览器的限制取决于操作系统的支持
- post传送的数据量较大，一般被默认为不受限制
- 安全性
- GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。
- POST方式相对来说就可以避免这些问题。
若符合下列任一情况，则用POST方法：
- 请求的结果有持续性的副作用，例如，数据库内添加新的数据行。
- 若使用GET方法，则表单上收集的数据可能让URL过长。
- 要传送的数据不是采用7位的ASCII编码。
若符合下列任一情况，则用GET方法：
- 请求是为了查找资源，HTML表单数据仅用来帮助搜索。
- 请求结果无持续性的副作用，如进行搜索。
- 收集的数据及HTML表单内的输入字段名称的总长不超过1024个字符。