使用jQuery+JSONP获取跨域资源

客官°小女子只卖身不卖艺 2022-06-13 14:44 79阅读 0赞

对于经常用jQuery的开发者来说，能注意到jQuery封装的$.ajax中有一个dataType属性，如果将该属性设置成dataType:"jsonp"，就能实现JSONP跨域了。需要了解的一点是，虽然jQuery将JSONP封装在$.ajax中，但是其本质与$.ajax不一样的

**实现方法不一样，ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本**

附上简单的例子

通过jQuery的`$.ajax`实现跨域的代码参考如下：

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>JSONP</title>  
<script type="text/javascript" src='jquery-3.2.1.min.js'></script>  
</head>  
<body>  
</body>  
<script type="text/javascript">  
    $.ajax(\{  
        url: "http://freegeoip.net/json/",  
        type: "get",  
        dataType : "jsonp",  
        contentType: "application/json",  
        jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)  
        jsonpCallback:"jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据  
        success: function (data) \{  
            console.log(JSON.stringify(data));  
            console.log('you are at IP address: '+data.ip);  
            console.log('you are at IP address: '+data.country\_name);  
        \},  
        error: function () \{  
        \}  
    \});  
    function jsonpCallback(res)\{  
    alert(JSON.stringify(res))  
    \}  
</script>  
</html>

发表评论取消回复

表情：

评论列表（有 0 条评论，79人围观）

还没有评论，来说两句吧...

相关阅读

相关 CORS跨域资源共享

跨域资源共享(CORS)是一种放宽同源策略的机制，它允许浏览器向跨源服务器，发出请求XMLHttpRequest（XHR），从而克服了 AJAX 只能同源使用的限制，以使不同的

灰太狼/ 2024年03月22日 17:33/ 0 赞/ 75 阅读

相关 CORS（跨域资源共享）

再也不会对 CORS 感到沮丧。了解什么是跨域资源共享、它存在的原因以及如何接受它。什么是 CORS？ CORS 或跨域资源共享是一种可选的浏览器功能，网站可以使用它

今天药忘吃喽~/ 2023年09月27日 08:16/ 0 赞/ 132 阅读

相关 img标签图像cors跨域获取资源

先说一下问题背景：先用`img`标签展示了某一图像资源，然后后续业务中用`get`请求获取同一图像资源（存在跨域），但是由于对图像有缓存，`img`标签获取资源时的请求`res

╰+攻爆jí腚メ/ 2022年10月30日 06:30/ 0 赞/ 53 阅读

相关 Javascript跨域访问资源

Javascript跨域访问资源 [![上一篇][toolbar_previous.gif]javascript字符串][toolbar_previous.gif_jav

墨蓝/ 2022年07月15日 15:21/ 0 赞/ 169 阅读

相关【TaoTao】使用JQueryJsonp 完美解决JS跨域问题

问题描述：我有一段资源.json文件是放到后台的taotao-rest提供服务的接口项目当中，我前台另起了一个maven的项目tao

╰半夏微凉°/ 2022年07月11日 04:26/ 0 赞/ 213 阅读

相关使用jQuery+JSONP获取跨域资源

对于经常用jQuery的开发者来说，能注意到jQuery封装的$.ajax中有一个dataType属性，如果将该属性设置成dataType:"jsonp"，就能实现JSONP跨

客官°小女子只卖身不卖艺/ 2022年06月13日 14:44/ 0 赞/ 80 阅读

相关跨域资源共享CORS

![SouthEast][] [SouthEast]: /images/20220601/bdfc9e7c83da408f9a8513fb5d972c3a.png

朱雀/ 2022年06月01日 03:14/ 0 赞/ 252 阅读

相关 CORS(跨域资源共享)

问题说明：通过vue构建了一个项目，访问自己写的接口。下面问题： Response to preflight request doesn't pass access

绝地灬酷狼/ 2022年05月18日 06:18/ 0 赞/ 234 阅读

相关跨域资源共享

同源跨域跨域浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨

心已赠人/ 2022年03月17日 01:24/ 0 赞/ 262 阅读

相关跨域资源共享CORS

转自[跨域资源共享CORS][CORS] 本人是一个应届生，面试的时候经常会被问到跨域的问题，CORS当然也是解决跨域的方法之一了。但是当面试官继续问：“CORS跨域是怎

分手后的思念是犯贱/ 2022年03月16日 16:20/ 0 赞/ 291 阅读