jsday24

 

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;
}

 

 

转载于:https://www.cnblogs.com/cqdd/p/10315320.html