1、梳理知识点
①ajax作用 页面无刷新
②ajax的异步 : 同时分开执行
③get/post :
④ajax如何请求服务器数据
status 200 404 500 400
readyState 0 1 2 3 4
⑤服务器传回的数据是字符串 需要转换 JSON.parse( )
⑥ie传中文 encodeURI()
⑦ajax缓存
⑧接口 url
2、ajaxPost
从服务器获取数据 同get
向服务器发送数据时 需要设置请求头 ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
(ajax使用post提交数据需要设置请求头)
3、同源策略
同源 :同一个来源 , 协议 域名 端口号
http://localhost:80
http://localhost:8020
当使用ajax请求服务器数据时,需要保证 协议 域名 和端口号要和ajax请求的路径保持一致
同源策略 是浏览器的一个安全机制 , 为了保证用户数据的安全
ajax受 同源策略的影响 不能跨域
4、jsonp跨域(前端跨域)
json with padding
jsonp跨域原理 :
①动态创建script标签 添加到body中
②设置script标签的src属性 , 属性值是一个接口 , 接口上有一个特殊参数,表示回调函数
③服务器通过对回调函数的调用 使用参数传递的方式将服务器处理的结果传回到客户端
jsonp接口和ajax接口区别 :
①jsonp的接口一定会有一个回调函数 ajax接口没有
②jsonp接口返回的数据类型是object ajax接口返回字符串
③jsonp接口只支持get方式传递数据 路径传值
5、promise对象 (ajax封装,使用promise对象)
promise :承诺 构造函数
promise对象的三个状态 :
pending 进行中
resolved 已解决
rejected 失败
promise对象承诺执行成功后,会自动执行then方法 then方法第一个参数表示成功后执行参数,第二个参数表示失败后执行的参数
失败后还有可能会执行catch方法
promise对象的状态一旦发生改变 就不可逆
ajax封装
function ajaxGet(url,callback){ var xhr = null; if( window.XMLHttpRequest ){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.open("get",url); xhr.send(); xhr.onreadystatechange = function(){ if( xhr.readyState==4 && xhr.status == 200 ){ //服务器返回的数据 var res = xhr.responseText; //当得到服务器返回的结果后 处理的功能是可变 callback(xhr.responseText); } }}//ajax封装 使用promise对象function ajaxPromise(url){ var pro = new Promise(function(succ,failed){ var ajax = new XMLHttpRequest(); ajax.open( "get" , url ); ajax.send(); ajax.onreadystatechange = function(){ if( ajax.readyState == 4 && ajax.status == 200 ){ //成功了 ajax.responseText succ(ajax.responseText);//通知promise对象ajax请求服务器的数据成功了 } } //承诺多久后如果没有通知promise对象成功 就通知失败 setTimeout( function(){ failed("请求服务器失败"); },5000 ) }) return pro;}