谈谈对Jsonp跨域请求方式的理解

               何为跨域？Ajax跨域请求被限制是存在于前端的,是受到浏览器同源策略的限制,当请求与网站的域名,端口号不同的第三方接口时,跨域问题就存在了,访问受到了限制。下面主要谈谈前端跨域请求,后端配合前端的请求做数据返回,也就是通常Jsonp的方式。

假如存在这么一段代码:

那么控制台打印:age:15 name:John

jsonhandle({
        "age" : 15,
        "name": "John",
})

或者说把这段js脚本发布在一台服务器取名为test.js,我的地址为:http://182.254.233.176:8065/testjs/test.js，

那么下面这种写法也能实现

那么我们就可以使用script标签src属性可以跨域的特性对地址进行简单的拼接是否就能实现请求数据的返回呢？

我们在服务器上在创建一个test.php的文件

这就相当于如果前端访问http://182.254.233.176:8065/testjs/test.php?callback=jsonhandle,对比下面的与之前的代码

其实就是就是要php输出:

jsonhandle({
	    "age" : 15,
	    "name": "John",
    })

关键在于对php接收前台参数的然后做拼接和数据格式的返回

我们再来看看前端代码的两种写法:

第一种:

var url="http://182.254.233.176:8065/testjs/test.php?callback=jsonhandle";
      var obj = $('<script><\/script>');
      obj.attr("src",url);
      $("body").append(obj);

第二种:Jquery的$.ajax做的封装

$.ajax({
    type : "get",
    async:true,
    url : "http://182.254.233.176:8065/testjs/test.php",
    dataType: "jsonp",
    jsonp:"callback", //请求php的参数名
    jsonpCallback: "jsonhandle",//要执行的回调函数
    success : function(data) {
        console.log(data);
    },
    complete: function(XMLHttpRequest,textStatus) {    
            if(XMLHttpRequest.readyState==4){
                console.log("完成")
                }
        }
   });

下面看看

两个方法本质都是利用script标签的src可跨域,再对src地址做拼接实现的