JS实现的ajax和同源策略(实例讲解)(8)

日期：2020-05-11 栏目：程序人生浏览：次

<script src="http://127.0.0.1:8080/ajax_send2/">
  项目二
</script>

只有发ajax的时候给拦截了，所以要解决的问题只是针对ajax请求能够实现跨域请求

解决同源策源的两个方法：

1、jsonp（将JSON数据填充进回调函数，这就是JSONP的JSON+Padding的含义。）

jsonp是json用来跨域的一个东西。原理是通过script标签的跨域特性来绕过同源策略。

思考：这算怎么回事？

<script src="http://code.jquery.com/jquery-latest.js"></script>

借助script标签，实现跨域请求，示例：

所以只是单纯的返回一个也没有什么意义，我们需要的是数据

如下：可以返回一个字典，不过也可以返回其他的（简单的解决了跨域，利用script）

项目一：

<body>
<h1>项目一</h1>
<button class="send_jsonp">jsonp</button>
<script>
  $(".send_jsonp").click(function () {
    $.ajax({
      url:"",
      success:function (data) {
        console.log(data)
      }
    })
  });

  function func(arg) {
    console.log(arg)
  }
</script>
<script src="http://127.0.0.1:8080/ajax_send2/"></script>
</body>

项目二：

def ajax_send2(request):
  import json
  print(222222)
  # return HttpResponse("func('name')")
  s = {"name":"haiyan","age":12}
  # return HttpResponse("func('name')")
  return HttpResponse("func('%s')"%json.dumps(s))  #返回一个func()字符串，正好自己的ajax里面有个func函数，就去执行func函数了，
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　arg就是传的形参

这样就会取到值了

这其实就是JSONP的简单实现模式，或者说是JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。

将JSON数据填充进回调函数，这就是JSONP的JSON+Padding的含义。

但是以上的方式也有不足，回调函数的名字和返回的那个名字的一致。并且一般情况下，我们希望这个script标签能够动态的调用，而不是像上面因为固定在html里面所以没等页面显示就执行了，很不灵活。我们可以通过javascript动态的创建script标签，这样我们就可以灵活调用远程服务了。

解决办法：javascript动态的创建script标签

===========================jQuery实现=====================
{#  创建一个script标签，让他请求一次，请求完了删除他#}
  //动态生成一个script标签,直接可以定义个函数，放在函数里面
  function add_script(url) {
    var ele_script = $("<script>");
    ele_script.attr("src",url);
    ele_script.attr("id","script");
    $("body").append(ele_script);
    $("#script").remove()
  }
  $(".kuayu").click(function () {
    add_script("http://127.0.0.1:8080/ajax_send2/")
  });


</script>



==================js实现==========================
<button onclick="f()">sendAjax</button>

<script>
  function addScriptTag(src){
     var script = document.createElement('script');
     script.setAttribute("type","text/javascript");
     script.src = src;
     document.body.appendChild(script);
     document.body.removeChild(script);
  }


  function func(name){
    alert("hello"+name)
  }

  function f(){
     addScriptTag("http://127.0.0.1:7766/SendAjax/")
  }
</script>

转载注明出处：http://www.heiqu.com/1125.html

JS实现的ajax和同源策略(实例讲解)(8)

相关推荐