Jsonp完成js跨域请求

时间：2022-11-21 22:07:42

    js中的ajax请求是不能完成跨域请求的，这是JavaScript语言决定的。不过有时候确实需要跨域请求文件，那么应该如何实现呢？


    要想知道跨域请求的解决办法，首先得知道什么是跨域。跨域问题是JavaScript语言安全限制的同源策略造成的，JavaScript的同源策略要求一段脚本只能读取同一来源的窗口和文档的属性，也就是说主机名、协议和端口号都相同。由此可见，跨域分为两种情况，最直接的就是域名不同，其次就是域名相同时，其他条件不同。例如：域名相同，端口号不同；域名相同，协议不同；主域相同，子域不同；与域名相同个IP地址。


    解决js的跨域问题，主要采用的是jsonp的方式。


    jsonp实际上是采用了JavaScript的漏洞，虽然JavaScript不能跨域访问，但是HTML DOM标签可以跨域。采用jsonp的方式，其实就是在进行跨域访问时，在脚本中创建一个script标签，使得该标签的地址指向要跨域访问的地址。例如：

$.ajax({ 
     async: false, 
     url: "http://localhost:8081/WEB-INF/category.json", 
     type: "GET", 
     dataType: 'jsonp', 
     //jsonp的值自定义,如果使用jsoncallback,那么服务器端,要返回一个jsoncallback的值对应的对象. 
     jsonp: 'jsoncallback', 
     //服务器段返回的对象包含name,data属性. 
     success: function (json) { 
         alert(json.data); 
     }
});


    此时就是创建script标签，标签地址指向json文件： 


<script src="http://localhost:8080/WEB-INF/category.json"></script>


    jsonp方式要求返回的数据是json格式。


    jquery封装了getJSONP方法，传入跨域请求的地址即可访问要访问的文件。

$.getJSONP("htpp://localhost:8081/WEB-INF/category.json")

标签：

相关文章