关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用

首先介绍下$.ajax的参数

type:请求方式 GET/POST

url:请求地址

async:布尔类型,默认为true 表示请求是否为异步,如果为false表示为同步。

dataType:返回的数据类型

jsonp:传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)

jsonpCallback:自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据

success:调用成功执行的函数

error:异常处理函数

1.示例1

服务器端我们采用MVC的ACTION来返回数据

01 public class HomeController : Controller 
02    
03        // 
04        // GET: /Home/ 
05    
06        public ActionResult Index() 
07        
08            returnView(); 
09        
10    
11        public ActionResult ReturnJson() 
12        
13            string callback = Request.QueryString["callback"]; 
14            string json = "{'name':'张三','age':'20'}"
15            string result = string.Format("{0}({1})", callback, json); 
16            returnContent(result); 
17        
18    
19    }
 

客户端使用jsonp来传输数据

01 @{ 
02     ViewBag.Title = "Index"
03     Layout = "~/Views/Shared/_Layout.cshtml"
04
05    
06 <script src="~/Scripts/jquery-1.7.1.min.js"type="text/javascript"> </script> 
07  <script type="text/javascript"
08      functionSendData() 
09      
10          $.ajax({ 
11              type: "get"
12              async: false
13              url: "/home/ReturnJson"
14              dataType: "jsonp"
15              success: function(data){ 
16                  alert(data.name); 
17              }, 
18              error: function(){ 
19                  alert('fail'); 
20              
21          }); 
22      
23    
24    
25  </script> 
26    
27 <input  type="button" value="提交" onclick="SendData();"/>
 

点击提交按钮后,发现服务器端的Request.QueryString["callback"]返回一个随机函数名。这样就被设置成JSONP格式来传递数据了

2.自定义函数名

可以在传递过程中自定义函数名,只要使用jsonpCallback参数就可以了。

jsonp:表示传递的参数,默认为callback,我们也可以自定义,服务器段通过此参数,获取自定义的函数名称,服务器这样获取 Request.QueryString["callback"]

jsonpCallback表示传递的参数值,也就是回调的函数名称,这是自定义的名称。

01 <script type="text/javascript"
02     functionSendData() { 
03         $.ajax({ 
04             type: "get"
05             async: false
06             url: "/home/ReturnJson"
07             dataType: "jsonp"
08             jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) 
09             jsonpCallback: "receive",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据 
10             success: function(data) { 
11                 alert(data.name); 
12             }, 
13             error: function() { 
14                 alert('fail'); 
15             
16         }); 
17     
18    
19     functionreceive(data) { 
20         alert(data.age); 
21     
22 </script>

jquery使用jsonp进行跨域调用的更多相关文章

  1. C# WebClient、jQuery ajax jsonp实现跨域

    WebClient 无传输数据获取 Uri uri = new Uri(allURL); WebClient wc = new WebClient(); wc.Encoding = System.Te ...

  2. jQuery中jsonp的跨域处理,no access-control-allow-origin,unexpected token

    引言 ajax跨域就无法成功获取数据了,需要通过jsonp来处理 报错如下 1.改为jsonp var targeturl = ajaxurl+"?g=Api&m="+m+ ...

  3. jquery ajax jsonp跨域调用实例代码

    今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...

  4. jquery中的jsonp跨域调用

                                                    jquery jsonp跨域调用接口

  5. jquery中的jsonp跨域调用(接口)

                                                                           jquery jsonp跨域调用接口

  6. 使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码】

    项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...

  7. 实现jquery.ajax及原生的XMLHttpRequest跨域调用WCF服务的方法

    关于ajax跨域调用WCF服务的方法很多,经过我反复的代码测试,认为如下方法是最为简便的,当然也不能说别人的方法是错误的,下面就来上代码,WCF服务定义还是延用上次的,如: namespace Wcf ...

  8. jquery Ajax跨域调用WebServices方法

    由于公司需要开发一个手机页面,想提供给同事直接在手机上可以查询SAP资料.数据需要使用js调用webserver来获取. 因为初次使用Jquery调用Webserver,所以期间并不顺利.测试调用We ...

  9. AJAX跨域调用相关知识-CORS和JSONP(引)

    AJAX跨域调用相关知识-CORS和JSONP 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常 ...

随机推荐

  1. 【Java】数组的打印输出

    import java.util.Arrays; public class Test { public static void main(String[] args) { int[] a = { 1, ...

  2. poj2078 Matrix(DFS)

    题目链接 http://poj.org/problem?id=2078 题意 输入一个n×n的矩阵,可以对矩阵的每行进行任意次的循环右移操作,行的每一次右移后,计算矩阵中每一列的和的最大值,输出这些最 ...

  3. Lock接口简介

    在Java多线程编程中,我们经常使用synchronized关键字来实现同步,控制多线程对变量的访问,来避免并发问题. 但是有的时候,synchronized关键字会显得过于沉重,不够灵活.synch ...

  4. 【数学】Codeforces Round #470 (Div2) B

    题目链接:http://codeforces.com/contest/948/problem/B 题目大意:有一个大于等于3的数X0,任意选择一个小于X0的质数P0,乘以一个数k使k*P0>=X ...

  5. king's trouble II SCU - 4488

    Time Limit: 1000 MS Memory Limit: 131072 K Description Long time ago, a king occupied a vast territo ...

  6. HDU 6166 Spfa

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6166 题意:给出一个n个点的有向图.然后给你k个点,求这k个点任意两点之间的最短路的最小值.思路: 以 ...

  7. 【BZOJ 3443】 3443: 装备合成 (离线+线段树)

    3443: 装备合成 Time Limit: 15 Sec  Memory Limit: 128 MBSubmit: 63  Solved: 31 Description [背景]     lll69 ...

  8. [USACO06FEC]Milk Patterns --- 后缀数组

    [USACO06FEC]Milk Patterns 题目描述: Farmer John has noticed that the quality of milk given by his cows v ...

  9. BZOJ1002: [FJOI2007]轮状病毒 (DP)

    标准做法似乎应该是计算生成树数量的基尔霍夫矩阵之类的.. 我看到的做法是一个神奇的高精度dp,当然以后这个blahblahblah矩阵还是要搞一下..   参考(抄袭)网址   这个dp的原理就是把环 ...

  10. hdu 1533 KM或费用流

    以前用KM写过,现在再用费用流写. #include <iostream> #include <cstdio> #include <cstring> #includ ...