美文网首页
ajax跨域的几种方式

ajax跨域的几种方式

作者: 青色琉璃 | 来源:发表于2020-04-14 15:58 被阅读0次

    url:http://localhost/CORS/ajax/index.html

    文件目录:


    1586850844.png

    一,首先,ajax使用:

    // 创建对象
    var ajax = new XMLHttpRequest();
    
    // 建立连接
    ajax.open("GET", "http://192.168.1.3/CORS/ajax/test.json", true);
    
    // 发送请求
    ajax.send();
    
    // 接收数据
    ajax.onreadystatechange = function() {
      if (ajax.readyState === 4 && ajax.status === 200) {
        var data = JSON.parse(ajax.responseText);
        console.log(data);
      }
    };
    

    \color{#FF3030}{跨域形成原因:}
    XMLHttpRequest对象可以实现跨域,但是浏览器不允许,这是个伪命题

    \color{#FF3030}{解决方案:}
    1,服务器代理:简单粗暴,向后端发送一个url,然后又后端代理获取其他域名下的内容,然后再把获取的内容返回到前端,这种属于后端跨域,不属于前端
    2,jsonp跨域
    json:一种轻量级的数据交换格式
    jsonp:是json的一种使用模式,用jsonp抓取的资料并不是json,而是任意javascript

    二,js使用jsonp:

    <button onclick="jsClick()">js发送请求</button>
        
        function createScript() {
            var eleScript = document.createElement("script");
            eleScript.type = "text/javascript";
            eleScript.src = "http://192.168.1.3/CORS/ajax/test.php?callback=test";
            document.getElementsByTagName("head")[0].appendChild(eleScript);
          }
    
          // 传入的回调
          function test(name) {
            console.log("跨域:" + name);
          }
    
          function jsClick() {
            // 问题,创建之后没有删除
            createScript();
          }
    

    jsonp原理:创建script标签,src指向后端地址,在后端调用前端传过去的方法,不过这个简单写法有个问题:script标签没有删除,需要手动删除

    1586850901.png 1586850935.png

    有点尴尬

    三,jquery方法:

    <button onclick="jqueryClick()">jquery发送请求</button>
        
        function jqueryClick() {
            $.ajax({
              type: "get",
              url: "http://192.168.1.3/CORS/ajax/test.php?callback=test",
              dataType: "jsonp",
              jsonp: "callback",   // 传回调的方式有几种
              success: function(data) {
                alert("jquery:" + data);
              }
            });
          }
    

    前端 -- 浏览器创建临时函数 -- 后端 -- 调用临时方法 -- 使用success中的回调方法 -- 销毁临时函数

    1586850976.png

    script标签也会被销毁

    其他跨域方式:https://juejin.im/post/5c23993de51d457b8c1f4ee1#heading-12

    相关文章

      网友评论

          本文标题:ajax跨域的几种方式

          本文链接:https://www.haomeiwen.com/subject/dgrtvhtx.html