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

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

为了更加灵活，现在将你自己在客户端定义的回调函数的函数名传送给服务端，服务端则会返回以你定义的回调函数名的方法，将获取的json数据传入这个方法完成回调：

function f(){
     addScriptTag("http://127.0.0.1:7766/SendAjax/?callbacks=func")
  }

将视图views改为

def SendAjax(request):
 
  import json
 
  dic={"k1":"v1"}
 
  print("callbacks:",request.GET.get("callbacks"))  
  callbacks=request.GET.get("callbacks")  #注意要在服务端得到回调函数名的名字
 
  return HttpResponse("%s('%s')"%(callbacks,json.dumps(dic)))

四、jQuery对JSONP的实现

getJSON

jQuery框架也当然支持JSONP，可以使用$.getJSON(url,[data],[callback])方法

<button onclick="f()">sendAjax</button>

<script>

  function f(){
     $.getJSON("http://127.0.0.1:7766/SendAjax/?callbacks=?",function(arg){
      alert("hello"+arg)
    }); 匿名函数
  }
  
</script>

8002的views不改动。

结果是一样的，要注意的是在url的后面必须添加一个callback参数，这样getJSON方法才会知道是用JSONP方式去访问服务，callback后面的那个？是内部自动生成的一个回调函数名。

此外，如果说我们想指定自己的回调函数名，或者说服务上规定了固定回调函数名该怎么办呢？我们可以使用$.ajax方法来实现

$.ajax

<script>

  function f(){
     $.ajax({
        url:"http://127.0.0.1:7766/SendAjax/",
        dataType:"jsonp",  
        jsonp: 'callbacks',  #键
　　　　　　　　　 jsonpCallback:"SayHi" #函数的名字
 }); } function SayHi(arg){ alert(arg); } </script>

8002的views不改动。

当然，最简单的形式还是通过回调函数来处理：

<script>

  function f(){

      $.ajax({
        url:"http://127.0.0.1:7766/SendAjax/",
        dataType:"jsonp",      //必须有，告诉server，这次访问要的是一个jsonp的结果。
        jsonp: 'callbacks',     //jQuery帮助随机生成的：callbacks="wner"
        success:function(data){
          alert("hi "+data)
       }
     });

    }

</script>

jsonp: 'callbacks'就是定义一个存放回调函数的键，jsonpCallback是前端定义好的回调函数方法名'SayHi'，server端接受callback键对应值后就可以在其中填充数据打包返回了;

jsonpCallback参数可以不定义，jquery会自动定义一个随机名发过去，那前端就得用回调函数来处理对应数据了。利用jQuery可以很方便的实现JSONP来进行跨域访问。　　

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

相关推荐