【web】 ajax

ajax

原生ajax

解决了什么问题？

在不刷新网页的情况下去更新数据

兼容写法：

if(window.ActiveXObject){
ajax new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
ajax new XMLHttpRequest();}

E6不兼容：
XMLHttpRequest

步骤

新建

var xhr=new XMLHttpRequest();

配置

• xhr.open(请求方式，请求地址，是否异步)

e.g. xhr.open('GET','http://jsonplaceholder.typicode.com/posts'),第三个参数不写就是true 异步

• 同步
  • ajax.open(“get”,”xxx.php”,false);
  • ajax.open(“post”,xxx.php,false)
    • ajax.setRequestHeader(“Content-.Type”,“application/,x-ww-form-urlencoded”);
• 异步
  • ajax.open(“get”,”xx.php”,true)
  • ajax.open(“post”,Xxx.php,true)
    • ajax.setRequestHeader(“Content-.Type”,“application/,x-ww-form-urlencoded”);
  • 发送后状态值readystate
    • 0 对象已建立，还未初始化，未调用send
    • 1 open已调用，未调用send
    • 2 send已调用，其它未知
    • 3 请求已发送，正在接收数据
    • 4 表示数据已经收到

响应

xhr.onreadystatechange=function(){ console.log(ajax.responseText);}

发送

xhr.send();

• 发送后返回四种参数
  • responseText 作为响应的主体返回的文本
  • responseXML
  • status
    • 200成功
    • 202请求接受，处理未完成
    • 400语法错误
    • 404找不到指定ur
    • 500内部服务器错误
  • statusText 跨浏览器时可能不太一致

什么是同步异步

（js是单线程，但是处理的时间点不同就有异步）

• 同步：上一个任务结束下一个任务再开始

    比如alert弹窗，或者登录注册流程（淘宝：先登录上去才能购买）
  

• 异步：按顺序开始不一定按顺序结束

    比如图片加载，上传下载等任务