跨域

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

          sc.src = "http://127.0.0.1/ajax1811Day2/jsonp.php?callback=fn";

     }

    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;

   }