Ajax基础知识
原生Ajax
发送ajax请求步骤
1.创建XMLHttpRequest类型对象
2.准备发送，打开与一个网址之间的连接
3.执行发送动作
4.指定xhr状态变化事件处理函数
xhr对象
XMLHttpRequest类型对象
AJAX API中核心提供的是一个XMLHttpRequest类型，所有AJAX操作都需要使用到这个类型。
var xhr=new XMLHttpRequest();
IE6兼容
xhr=new ActiveXObject("Microsoft.XMLHTTP");
open 方法
本质上就是js在web平台发送HTTP请求手段，因此发送出去的请求任然是HTTP请求，同样符合HTTP约定的格式。
语法：xhr.open(method,url)
method:要使用的HTTP方法，比如GET,POST,PUT,DELETE等。
url:要向其发送请求的URL地址，字符串格式。
send()方法发送请求
用于发送HTTP请求
语法：xhr.send(body)
body:在XHR请求中要发送的数据体，根据请求中的类型进行传参
如果为get方法，无需设置数据体，可以传递一个null或者不传参。
setRequestHeader()方法设置请求头
此方法必须在open()和send()两个方法之间调用
语法：xhr.setRequestHeader(hreader,value)；
header:一般设置“Content-Type”，传输数据类型，即服务器需要我们传送的数据类型
value:具体的数据类型，常用“application/x-www-form-urlencoded”和"application/json"
响应状态分析
readyState属性
readyState属性返回一个XMLHttpRequest代理当前所处的状态，由于readyStatechange事件是在xhr对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被多次触发。
readyState 状态描述 说明
0 UNSENT 代理XHR被创建，但尚未调用open()方法
1 OPENED open()方法已经被调用，建立了连接
2 HEADERS_RECEIVED send()方法已经被调用，并且已经可以获取状态和响应头
3 LOADING 响应体下载中，responseText属性可能已经包含部分数据
4 DONE 响应头下载完成，可以直接使用responseText
同步与异步
xhr.open()方法第三个参数要求传入一个布尔值，其作用就是设置此次请求是否采用异步方式执行。
默认为true异步，如果需要同步执行可以通过传递false实现
如果采用同步方式执行，则代码会卡死在xhr.send()这一步。
JSON
JSON是js对象表示法
JSON是一种数据描述手段，类似于js字面量方式
服务端采用JSON格式返回数据，客户端按照JSON格式解析数据
JSON格式数据，与js对象区别：
1.JSON数据不需要存到变量中
2.结束时不需要写分身
3.JSON数据中的属性名必须加引号
将json部署到服务器端：json-server --watch db.json(此处--watch表示监听，后面db.json表示当前的json文件)
GET请求
通常在因此get请求过程中，参数传递都是通过URL地址中的'?'参数传递
一般在GET请求过程中，无需设置请求头
无需设置响应体，可以传null或者不传
POST请求
POST请求过程中，都是采用请求体承载需要提交的数据
需要设置请求头中的Content-Type,以便于服务端接收数据
需要提交到服务端的数据可以通过send方法的参数传递
jQuery中的ajax方法
$.ajax()
常用选项参数介绍
url:请求地址
type:请求方法，默认为"get"
dataType:服务器响应数据类型
content:请求体内容类型，默认'application/x-www-form-urlencoded'
data:需要传递到服务端的数据，如果GET则通过URL传递，如果为POST则通过请求体船体
timeout:请求超时时间
beforeSend:请求发起之前触发
success:请求成功之后触发（响应状态码200）
error:请求失败触发
complete:请求完成触发（不管成功与否）
$.get()方法
GET请求快捷方法
$.get(url,data,callback//回调函数)
$.post()方法
POST请求快捷方法
$.post(url,data,callback//回调函数)
其他请求
put 更改
delete 删除
Axios库
使用script标签引入
Axios API
可以通过向axios() 传递相关配置来创建请求
axios(config) config为对象格式的配置选项
axios(url,config) config可选
常用配置项
url 请求服务器地址
method 创建请求使用的方法如GET
baseURL 传递相对URL前缀，将自动加在url前面
headers 即将被发送的自定义请求头
params 即将与请求一起发送的URL参数
data 作为请求主体被发送的数据
timeout 指定请求超时的毫秒数（0表示无超时时间）
responseType 表示服务器响应的数据类型，默认“json”
全局配置默认值
可以指定将被用在各个请求的配置默认值
axios.defaults.baseURL="api.example.com"
axios.defaluts.headers.post['Content-type']='application/x-www-form-urlencoded';
拦截器
在请求或响应被catch或者then处理前拦截他们。
axios.interceptors.request.use(function(config){
//在发送请求之前做些什么
return config;
},function(error){
//对错误请求做些什么
return Promise.reject(error);
}
)
axios.interceptors.response.use(function(rsponse){
//对相应数据做点什么
return response;
},function(error){
return Promise.reject(error);
})
Axios快速请求法
axios.get(url[,config]),
axios.get("url",{
params:{
id=1;
}
})
axios.post(url[,data[,config]])
axios.post("url",{
"name":nancy,
age:18;
},{
第三个参数
})
XHR 2.0
onload/onprogress（HTML5新内容）
xhr.onload事件：只在请求完成时触发
xhr.onprogress事件：只在请求进行中触发
response属性和responseType属性
以对象的形式表达响应体，其类型取决于responseType的值。可以设置responseType的值，以便通过特定的类型请求数据。
responseType要在调用open()初始化请求之后，在调用send()发送请求到服务器前设置方可生效
跨域和模板引擎应用
同源策略
同源策略是浏览器的一种安全策略，所谓同源是指域名，协议，端口完全相同。
在同源策略下，只有同源的地址才可以互相通过AJAX的方式请求
同源或者不同源说的是个地址之间的关系，不同源地址之间请求称之为跨域请求
跨域解决方案
JSONP原理
JSONP是一种借助于script标签发送跨域请求的技巧
原理：客户端借助script标签请求服务端的一个地址
地址返回一段带有某个全局函数调用的JS脚本
在调用函数中，原本需要返回给客户端的数据通过参数传递给这个函数
这样客户端的函数中就可以通过参数得到原本服务端想要返回的数据
（只能发送get请求）
JQ中的JSONP
jq基本使用$.ajax()
jq中使用JSONP就是将dataType设置为jsonp
cors跨域
cors无需客户端作出任何变化（客户端不用改代码），只是在被请求的服务器端响应的时候添加一个Access-Control-Allw-Origin的响应头，表示这个资源是否允许指定域请求。
Access-Cortrol-allow-Origin的值：
星号 表示允许任意资源访问，不安全
foo.com 允许指定的源访问
模板引擎
作用：减少字符串拼接
在模板里解析json，然后跟html内容拼接，性能更好
template()方法可以调用模板内容
参数一：调用的模板的id
参数二：是一个对象数据，数据会传给模板，对象中的每个属性名在模板中可以直接当变量名使用。
