1、梳理知识点
ajax请求服务器数据的步骤
ajax.onreadystatechange = function(){ status readyState }
ajax缓存 ：
ajax从服务器获取数据都是 字符串 JSON.parse
ajax访问接口 ：
ajax封装 : 服务器返回的数据 通过回调函数调用传回
2、ajax的Post方式
post可以从服务器获取数据 也 可以向服务器发送数据
获取数据和get方式没有区别
发送数据时，post方式需要在open(连接服务器之后)设置请求头
代码：
var ajax = new XMLHttpRequest();
ajax.open("post","ajaxPost.php");
连接服务器之后，设置post提交时的请求头
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
ajax.send("键=值&键=值"); 在ajax.send("键=值&键=值")中设置发送的数据
ajax.onreadystatechange = function(){
if( ajax.status==200&&ajax.readyState==4 ){
alert( ajax.responseText );
}
}
3、同源策略
同源 ：同一个来源
ajax请求数据时 ， 要保证 协议 域名 端口号 完全一致才可以请求数据
同源策略 ： 同源策略是浏览器的一个行业标准，为了保证用户数据的安全
受同源策略的影响，ajax不能跨域访问数据
4、jsonp 跨域（前端的跨域方式）
跨域原理 ：
1、通过动态创建script标签 添加到body中
2、设置script标签的src值为一个接口路径
3、接口上带一个参数，表示回调函数，通过这个回调函数可以获取服务器数据
jsonp接口：
1、接口上必须携带一个参数 表示回调函数 callback / cb
2、访问jsonp的接口得到的数据是 object 类型 使用时不需要进行类型转换
代码：
document.onclick = function(){
var sc = document.createElement("script");
document.body.appendChild(sc);
}
callback回调函数
function fn(msg){
//msg 服务器调用函数时 返回的结果
console.log( msg );
}
5、cors跨域 --- 由服务器解决的跨域
通过ajax请求服务器数据， 服务器上跨域处理跨域问题
需要要php服务器文件中设置头文件，其值是（*），
header("Access-Control-Allow-Origin:*");
表示任何域下都可以访问该接口
6、promise 对象
promise --- 承诺
定义 :
var pro = new Promise(function(success,failed){
通知promis对象承诺的结果
success（可传参）；
})
promise对象的三种状态 ：
pending 进行中
resolved 已解决
rejected 未解决
promise对象如果执行 success, 表示承诺的事成功了， 紧接下来执行 then方法
then方法使用 ： then(function(接收参数){成功后执行},function(){ 失败后执行 })
或 then（function（）{成功后执行}）
promise对象如果执行 failed, 表示承诺的事失败了， 紧接下来执行 catch方法
catch方法使用：catch（function（）{失败后执行}）
或then(function(){成功后执行},function(){ 失败后执行 })
特点 ：
promise对象一旦状态发生改变 就 不可逆
使用promise对象封装一个ajaxGet函数
function promiseAjax(url,data){
var pro = new Promise(function(success,failed){
承诺一件事 ： 使用ajax请求服务器的数据
var ajax = new XMLHttpRequest();
if( data ){
url = url + "?" + data;
}
ajax.open("get",url);
ajax.send();
ajax.onreadystatechange = function(){
if( ajax.readyState == 4 && ajax.status == 200 ){
说明承诺的事情 ： 请求服务器数据 成功
success(ajax.responseText);
}
}
经过一段时间后 如果没有执行success方法 说明承诺的事情没有成功
setTimeout(function(){
failed("失败了");
},5000)
})
将promise对象返回
return pro;
}