zoukankan      html  css  js  c++  java
  • 跨域

    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);
         }
        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;
       }
  • 相关阅读:
    oracle中Blob和Clob类型的区别
    为什么要分库分表
    Enable file editing in Visual Studio's debug mode
    SQL Server Dead Lock Log
    Debug .NET Framework Source
    SQL Server text field里面有换行符的时候copy到excel数据会散乱
    诊断和修复Web测试记录器(Web Test Recorder)问题
    Can't load Microsoft.ReportViewer.ProcessingObjectModel.dll
    'telnet' is not recognized as an internal or external command
    Linq to XML
  • 原文地址:https://www.cnblogs.com/tis100204/p/10302356.html
Copyright © 2011-2022 走看看