ajax jsonp跨域

kamushin233 发布于2019-08-22 10:43 / 2232人阅读

摘要：简单理解利用标签可以跨域，让服务器端返回可执行的函数，参数为要回发的数据。另外不声明函数，使用也能拿到返回值。附加一种后端的处理跨域的方式如果的和的不匹配的话也会报错。

JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

简单理解

利用

php代码

"tom","age"=>23);
echo $_GET["bar"]."(".json_encode($a).")";

下面以 $.ajax 的 jsonp 为例：

function foo(res) {
    console.log(res);
}
$.ajax({
    type: "get",
    url: "demo.php",
    dataType: "jsonp",
    jsonp: "bar", // jsonp参数名
    jsonpCallback: "foo", // 自定义回调函数名称
    data: {"firstname": "tom"}
});

看下请求及返回结果

不难看出，返回的是一个有实参的函数调用。

foo({"name":"tom","age":23})

而这个函数是已经在js里声明好的。

处理过程就是$.ajax动态创建script添加src，完事再删除一个过程。

另外不声明jsonpCallback函数，使用success也能拿到返回值。

$.ajax({
    type: "get",
    url: "demo.php",
    dataType: "jsonp",
    jsonp: "bar",
    jsonpCallback: "foo",
    data: {"firstname": "tom"},
    success: function(res) {
        console.log(res);
    }
});

注意：因为jsonp是通过动态添加script标签，在src中添加查询参数callback，再利用js运行机制实现的，所以jsonp只适合GET请求。

附加一种后端的处理跨域的方式：

header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, Accept");

如果request的Accept和response的Content-Type不匹配的话也会报错。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91137.html

再也不学AJAX了！（三）跨域获取资源 ② - JSONP & CORS

摘要：浏览器的同源策略固然保障了互联网世界的数据隐私与数据安全，但是如果当我们需要使用跨域请求资源时，同源策略又会成为开发者的阻碍。我们之前提到过，如果想要绕过浏览器同源策略，实现使用技术跨域获取资源，需要服务端和客户端的协同合作。浏览器的同源策略固然保障了互联网世界的数据隐私与数据安全，但是如果当我们需要使用AJAX跨域请求资源时，同源策略又会成为开发者的阻碍。在本文中，我们会简单介绍需...

enda 2019-08-21 17:55 评论0 收藏0
jsonp 跨域原理分析

摘要：为请求指定一个回调函数名。这主要用来让生成一个独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。在回调函数中，通常我们只需通过判断请求是否完成，如果已完成，再根据判断是否是一个成功的响应。本篇文章借鉴自博客园文章原文地址 AJAX即Asynchronous Javascript And XML（异步JavaScript和XML），是指一种创建交互式网页应用的...

scq000 2019-08-20 17:16 评论0 收藏0
JSONP跨域访问API接口深入理解

摘要：说明关于跨域问题的解决方案多达七八种，你不要说哪有这么多，我不跟你较真哈，你也别跟我较真哈自行百度或这里不会跟你说那么多种只说使用最多的一种你要非说用的不是最多的我不信哦你信好了哈哈你开心就好关于跨域浏览器的同源策略要了解什么是跨域你需要了说明关于跨域问题的解决方案多达七、八种，你不要说哪有这么多，我不跟你较真哈，你也别跟我较真哈, ?！自行百度或 Google, 这里不会跟你...

tunny 2019-06-28 18:28 评论0 收藏0
ajax跨域，这应该是最全的解决方案了

摘要：关于，强烈推荐阅读跨域资源共享详解阮一峰另外，这里也整理了一个实现原理图简化版如何判断是否是简单请求浏览器将请求分成两类简单请求和非简单请求。前言从刚接触前端开发起，跨域这个词就一直以很高的频率在身边重复出现，一直到现在，已经调试过N个跨域相关的问题了，16年时也整理过一篇相关文章，但是感觉还是差了点什么，于是现在重新梳理了一下。个人见识有限，如有差错，请多多见谅，欢迎提出iss...

ytwman 2019-08-22 11:21 评论0 收藏0
AJAX 跨域解析

摘要：这里只讲解了两种常见的跨域方式，因为存在一些弊端，因此推荐使用等方式来解决跨域问题。一、什么是 AJAX 跨域问题同源策略规定，AJAX 请求（XMLHttpRequest）只能发给同源的网址，否则就会出错。所谓的同源策略是指 3 个相同：协议相同、域名相同、端口相同。比如 http://www.example.com/index.html 这个网址，协议是http ，域名是 w...

tinylcy 2019-08-23 12:14 评论0 收藏0
AJAX跨域完全讲解

摘要：跨域完全讲解今天在慕课网上学习了跨域完全讲解我在收集面试题的时候其实就已经有过跨域的问题的了，当时候知道了为什么会存在跨域，以及跨域解决的方案有哪些，今天随着课程的学习，又加深了跨域的理解，以此记录下来。 AJAX跨域完全讲解今天在慕课网上学习了AJAX跨域完全讲解：https://www.imooc.com/learn/947 我在收集AJAX面试题的时候其实就已经有过AJAX跨域...

alexnevsky 2019-08-22 15:00 评论0 收藏0