Ajax

关于Ajax

什么是？
Ajax主要是用来实现客户端服务器异步通信效果，实现页面局部刷新的技术
原理
通过创建异步对象XMLHttpRequest想服务器发送异步请求，从服务器获取数据，再利用js操作Dom
如何创建

var xhr=new XMLHttpRequest(); //创建对象
xhr.open('请求方式','请求路径') //设置请求行
xhr.setRequestHeader('nihao','good')//设置请求头，键名 值
xhr.send(null)//请求主体发送
xhr.onload=function(){
	//responseText用来获取返回数据
}//注册回调函数
xhr.onreadystatechange=function(){}//状态改变时触发

关于get和post传值
1.get传值是拼接再url中,格式url?name=‘jackson’&skill=‘dance’
2.post传值发送的数据再send中，格式：key=value&key=value
readyState和status
*****readyState：状态值，指Ajax执行时经历的几种状态。改变时，会触发onreadychange事件
0 表示未打开
1 表示未发送
2 表示已获响应头
3 表示正下载
4 表示请求完成
*****status:状态码，整体状态，表示响应的状态
常见状态码:
*200–成功
*404–找不到页面
*301–资源被永久移动到其他url
*400–客户端请求有语法错误，请求无效
*410–资源永久删除
*500–服务器发生不可预期的错误
*503–服务器无法处理客户端的请求
*304–自从上次请求后，请求的网页未修改过
Ajax的优缺点
***优点:
1.不刷新页面更新数据
2.异步与服务器进行通信
3.前后端负载平衡
4.界面与应用分离
***缺点：
1.有安全问题，暴露了与服务器交互的细节
2.破坏程序的异常机制
使用promise封装Ajax请求

//get
function getUrl(method,url,data){
    var p=new Promise((resolve,reject){
        var xhr=new XMLHttpRequest();
        xhr.open(method,'xxx.php?'+data);
        xhr.setRequestHeader('nihao','good');
        xhr.onreadystatechange=function(){
            if(xhr.onready==4){
                if(xhr.status==200){
                    resolve(xhr.responseText)
                }else{
                    reject(err);
                }
            }
        }
        xhr.send();
        return p;
    })
}
//post
function getUrl(method,url,data){
    var p=new Promise((resolve,reject){
        var xhr=new XMLHttpRequest();
        xhr.open(method,'xxx.php?');
        xhr.setRequestHeader('nihao','good');
        xhr.onreadystatechange=function(){
            if(xhr.onready==4){
                if(xhr.status==200){
                    resolve(xhr.responseText)
                }else{
                    reject(err);
                }
            }
        }
        xhr.send(data);
        return p;
    })
}