Js跨域请求jquery的jsonp方式

JSONP：

由于同源策略，一般来说位于 server1.example.com 的网页与不是 server1.example.com 的服务器沟通，而 HTML 的 <script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

JQuery实现方式：

例如可以成功执行的代码

<!DOCTYPE HTML>
<html><head><title>Untitled Page</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script type="text/javascript">jQuery(document).ready(function(){$.ajax({type: "get",async: false,url: "ajax.ashx",dataType: "jsonp",jsonp: "callbackparam",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
                    jsonpCallback: "success_jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
                    success: function(json){alert(json);alert(json[0].name);},error: function(){alert('fail');}});var a = "firstName Brett";alert(a);});</script></head><body></body>
</html>

firebug界面如下：

ajax请求参数说明：

dataType String

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

"xml": 返回 XML 文档，可用 jQuery 处理。

"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)

"json": 返回 JSON 数据。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

"text": 返回纯文本字符串

在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。

ajax jsonp与普通的ajax请求的主要区别在于——请求响应结果的处理。如上面代码所示的响应结果为：

success_jsonpCallback([{name: "John"
}]);// ————其实就是，调用jsonp回调函数success_jsonpCallback,并将要响应的字符串或json传入此方法(作为参数值)，其底层的实现，大概的猜想应该是：
function success_jsonpCallback(data){success(data);
}

服务器代码：

例如

转载于:https://www.cnblogs.com/dengnan/archive/2013/03/19/2969320.html

Js跨域请求jquery的jsonp方式相关推荐

js跨域请求方式 ---- JSONP原理解析
这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下跨域请求数据解决方案主要有如下解决方法: 1 2 3 4 5 JSONP方式表单POST方式服务器代理 Html5的X ...
Node.js跨域请求解决方案
Node.js跨域请求解决方案一.缘由: 初到公司,老大让去解决之前项目客户提出的一个小问题,对某一模块进行访问验证,之前的项目是PHP做的,对此不了解,因此不打算先学习PHP再去解决问题,考虑到客 ...
JS跨域请求解决方案-CORS
文章目录 JS跨域请求解决方案-CORS 1.JS跨域请求测试JavaScript的跨域请求(失败) 2. 跨域解决方案CORS 普通实现方法 springMVC的跨域请求注解 3.分布式Id解决方 ...
js跨域交互(jQuery+php)之jsonp使用心得
jsonp是什么? 说到jsonp,你可能最先想到JSON:它还真和JSON有关系: JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏 ...
jsonp跨域请求（PHP后端方式）
一.什么是跨域? 前言在了解什么是跨域之前,我们先需要知道为什么跨域? 为什么跨域?这就涉及到绕不开的一个话题--同源策略. 为了web安全,同源指的是协议.端口号.域名三者皆要相同的情况下,访问是 ...
Node.JS跨域请求配置方案
今天在用node开发的过程中,再次遇到同源策略的问题: 在客户端调用服务端获取数据时,Chrome 浏览器中报错如下: Access to XMLHttpRequest at 'http://loca ...
前端跨域请求get_解决前端跨域请求的几种方式
利用 JSONP 实现跨域调用说道跨域调用,可能大家首先想到的或者听说过的就是 JSONP 了. 1.1 什么是JSONP JSONP 是 JSON 的一种使用模式,可以解决主流浏览器的跨域数据访问 ...
使用YQL解决跨域请求json转jsonp问题
一.跨域报错首先,是跨域请求的问题,jQuery默认不支持跨域请求,报错如下: index.html:1 XMLHttpRequest cannot load http://www.weather. ...
跨域请求（使用jsonp实现跨域请求）百度地图api证逆地址解析获取周边信息（pois）
新手程序员,新手博客,如果那里写的不好,还请大神们补充,指错最近项目里面需要做一个电子围栏的功能,我这边做的就是需要把商户的地址的经纬度存进数据库,本来这些从百度地图API里面有Demo可以看,但是 ...

Js跨域请求jquery的jsonp方式

Js跨域请求jquery的jsonp方式相关推荐

最新文章

热门文章