jquery ajax jsonp跨域调⽤实例代码

jquery ajax jsonp跨域调⽤实例代码
什么是跨域?
简单的来说,出于安全⽅⾯的考虑,页⾯中的JavaScript⽆法访问其他服务器上的数
据,即“同源策略”。⽽跨域就是通过某些⼿段来绕过同源策略限制,实现不同服务器
之间通信的效果。
具体策略限制情况可看下表:
URL 说明 允许通信
http://www.a.com/a.js
http://www.a.com/b.js
同⼀域名下 允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js
同⼀域名下不同⽂件夹 允许
http://www.a.com:8000/a.js
http://www.a.com/b.js
同⼀域名,不同端⼜ 不允许
http://www.a.com/a.js
https://www.a.com/b.js
同⼀域名,不同协议 不允许
http://www.a.com/a.js
http://127.0.0.100/b.js
域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js
主域相同,⼦域不同 不允许
http://www.a.com/a.js
http://a.com/b.js
同⼀域名,不同⼆级域名(同上)不允许
http://www.a.com/a.js
http://www.b.com/b.js
不同域名 不允许
什么是JSONP?
JSON(JavaScript Object Notation) 是⼀种轻量级的数据交换格式,⽽JSONP(JSON
with Padding)则是JSON 的⼀种“使⽤模式”,通过这种模式可以实现数据的跨域获
取。
JSONP跨域的原理
在同源策略下,在某个服务器下的页⾯是⽆法获取到该服务器以外的数据的,但
img、iframe、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上
的数据。利⽤script标签的开放策略,我们可以实现跨域请求数据,当然,也需要服务
端的配合。当我们正常地请求⼀个JSON数据的时候,服务端返回的是⼀串JSON类型
的数据,⽽我们使⽤JSONP模式来请求数据的时候,服务端返回的是⼀段可执⾏的
JavaScript代码。
举个例⼦,假如需要从服务器(http://www.a.com/user?id=123)获取的数据如下:
1. {"id": 123, "name" : 张三, "age": 17}
那么,使⽤JSONP⽅式请求(http://www.a.com/user?id=123?callback=foo)的数据将会
是如下:
1. foo({"id": 123, "name" : 张三, "age": 17});
当然,如果服务端考虑得更加充分,返回的数据可能如下:
1. try{foo({"id": 123, "name" : 张三, "age": 17});}catch(e){}
这时候我们只要定义⼀个foo()函数,并动态地创建⼀个script标签,使其的src属性为
http://www.a.com/user?id=123?callback=foo:
function executeJsonp(url){
  var eleScript= document.createElement("script");
  eleScript.type = "text/javascript";
  eleScript.src = url;
  document.getElementsByTagName("head")[0].appendChild(eleScript);
}
function foo(data){
for(var p in data){
console.log(data[p]);
}
}
var url = "http://www.a.com/user?id=123?callback=foo";
executeJsonp(url)
便可以使⽤foo函数来调⽤返回的数据了。
在jQuery中如何通过JSONP来跨域获取数据
第⼀种⽅法是在ajax函数中设置dataType为'jsonp':
1. $.ajax({
2. dataType: 'jsonp',
3. url: 'http://www.a.com/user?id=123',
4. success: function(data){
5. //处理data数据
6. }
7. });
第⼆种⽅法是利⽤getJSON来实现,只要在地址中加上callback=?参数即可:
1. $.getJSON('http://www.a.com/user?id=123&callback=?', function
2. //处理data数据
3. });
也可以简单地使⽤getScript⽅法:
1. //此时也可以在函数外定义foo⽅法
2. function foo(data){
3. //处理data数据
4. }
5. $.getJSON('http://www.a.com/user?id=123&callback=foo');
JSONP的应⽤
JSONP在开放API中可以起到⾮常重要的作⽤,开放API是运⽤在开发者⾃⼰的应⽤
上,⽽许多应⽤往往是在开发者的服务器上⽽不是在新浪微博的服务器上,因此跨域
请求数据成为开发者们所需要解决的⼀⼤问题,⼴⼤开放平台应该实现对JSONP的⽀
持,这⼀点新浪微博开放平台便做的⾮常好(虽然某些API⾥没有说明,但实际上是
可以使⽤JSONP⽅式调⽤的)。
jquery ajax jsonp跨域调⽤实例代码
使⽤GET⽅式和POST⽅式都可以进⾏跨域调⽤
客户端代码
代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function aa() {
$.ajax({
url: "http://localhost:12079/WebForm2.aspx",
data: "p1=1&p2=2&callback=?",
type: "post",
processData: false,
timeout: 15000,
dataType: "jsonp", // not "json" we'll parse
jsonp: "jsonpcallback",
success: function(result) {
alert(result.value1);
}
});
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
<p>
<input id="Button1" type="button" value="button" οnclick="a
</body>
</html>
服务器端代码
代码如下:
public partial class WebForm2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string callback = Request["callback"];
string v1="1";
string v2="2";
string response = "{\"value1\":\"" + v1 + "\",\"value2\
string call = callback + "(" + response + ")";
Response.Write(call);
Response.End();
}
}
客户端页⾯和服务器端页⾯在两个项⽬中,以便进⾏跨域调⽤测试。
跨域实例代码(需要加载jquery,页⾯为utf-8编码):
代码如下:
<!--拉勾招聘数据-->
<script type="text/javascript">
function success_jsonpCallback(data){
var html = '';
var pos = '';
html += '<ul>';
jQuery.each(data, function(k, v) {
if(k<10){
pos = '【' + v.city+ '】' + v.positionName + '('+ 
if(pos.length > 20){
pos = pos.substring(0,19)+'...';
}
html += '<li><a href="'+v.posiitonDetailUrl+'"
}
});
html += '</ul><div class="more-link"><a href="http://www.lagou.
jQuery('#lagouData').html(html);
}
function getLagouData() {
jQuery.ajax({
async:false,
url: "http://www.lagou.com/join/listW3cplus?kd=%E5%89%8D%E7%AB
type: "GET",
dataType: "jsonp",
jsonpCallback: 'success_jsonpCallback',
contentType: "application/jsonp; charset=utf-8",
success: function(data) {
success_jsonpCallback(data);
}
});
}
getLagouData();
</script>
<div id="lagouData"></div>
jsonp代码:
代码如下:
success_jsonpCallback([{"city":"⼴州","companyName":"POCO.CN","creat
W3Cschool(www.w3cschool.cn)最⼤的技术知识分享与学习平台
此篇内容来⾃于w3cschool.cn⽹站⽤户上传并发布。
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
C语言是一种广泛使用的编程语言,它具有高效、灵活、可移植性强等特点,被广泛应用于操作系统、嵌入式系统、数据库、编译器等领的开发。C语言的基本语法包括变量、数据类型、运算符、控制结构(如if语句、循环语句等)、函数、指针等。下面详细介绍C语言的基本概念和语法。 1. 变量和数据类型 在C语言中,变量用于存储数据,数据类型用于定义变量的类型和范围。C语言支持多种数据类型,包括基本数据类型(如int、float、char等)和复合数据类型(如结构体、联合等)。 2. 运算符 C语言中常用的运算符包括算术运算符(如+、、、/等)、关系运算符(如==、!=、、=、<、<=等)、逻辑运算符(如&&、||、!等)。此外,还有位运算符(如&、|、^等)和指针运算符(如、等)。 3. 控制结构 C语言中常用的控制结构包括if语句、循环语句(如for、while等)和switch语句。通过这些控制结构,可以实现程序的分支、循环和多路选择等功能。 4. 函数 函数是C语言中用于封装代码的单元,可以实现代码的复用和模块化。C语言中定义函数使用关键字“void”或返回值类型(如int、float等),并通过“{”和“}”括起来的代码块来实现函数的功能。 5. 指针 指针是C语言中用于存储变量地址的变量。通过指针,可以实现对内存的间接访问和修改。C语言中定义指针使用星号()符号,指向数组、字符串和结构体等数据结构时,还需要注意数组名和字符串常量的特殊性质。 6. 数组和字符串 数组是C语言中用于存储同类型数据的结构,可以通过索引访问和修改数组中的元素。字符串是C语言中用于存储文本数据的特殊类型,通常以字符串常量的形式出现,用双引号("...")括起来,末尾自动添加'\0'字符。 7. 结构体和联合 结构体和联合是C语言中用于存储不同类型数据的复合数据类型。结构体由多个成员组成,每个成员可以是不同的数据类型;联合由多个变量组成,它们共用同一块内存空间。通过结构体和联合,可以实现数据的封装和抽象。 8. 文件操作 C语言中通过文件操作函数(如fopen、fclose、fread、fwrite等)实现对文件的读写操作。文件操作函数通常返回文件指针,用于表示打开的文件。通过文件指针,可以进行文件的定位、读写等操作。 总之,C语言是一种功能强大、灵活高效的编程语言,广泛应用于各种领。掌握C语言的基本语法和数据结构,可以为编程学习和实践打下坚实的基础。
该资源内项目源码是个人的课程设计、毕业设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 该资源内项目源码是个人的课程设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值