ajax实现JSONP跨域

AJAX的一大限制是不允许跨域请求。 不过通过使用JSONP来实现。JSONP是一种通过脚本标记注入的方式，它是可以引用跨域URL的js脚本，不过需要提供一个回调函数（必须在您自己的页面上），因此，你可以自己处理结果

什么是跨域

简单的说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果

具体策略限制情况可看下表：

什么是JSONP？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，而JSONP（JSON with Padding）则是JSON 的一种“使用模式”，通过这种模式可以实现数据的跨域获取

JSONP的应用

JSONP在开放API中可以起到非常重要的作用，开放API是运用在开发者自己的应用上，而许多应用往往是在开发者的服务器上，因此跨域请求数据成为开发者们所需要解决的一大问题，广大开放平台应该实现对JSONP的支持，这一点新浪微博开放平台便做的非常好（虽然某些API里没有说明，但实际上是可以使用JSONP方式调用的）

JSONP跨域的原理

同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略，我们可以实现跨域请求数据，当然，也需要服务端的配合。当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而我们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码

举个例子，假如需要从服务器（http://www.a.com/user?id=123）获取的数据如下：

{"id": 123, "name" : 张三, "age": 17} 

那么，使用JSONP方式请求（http://www.a.com/user?id=123?callback=foo）的数据将会是如下：

foo({"id": 123, "name" : 张三, "age": 17});

当然，如果服务端考虑得更加充分，返回的数据可能如下：

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)

在jQuery中如何通过JSONP来跨域获取数据

第一种方法是在ajax函数中设置dataType为jsonp：

$.ajax({ 

 type:"get", 

 data:"random="+Math.random(), 

 url:url, 

 dataType:"jsonp", 

 jsonp:"callback", 

 success:function(data){ //处理data数据

 $.each(data, function(key, val) { 

 $("#myDiv").html($("#myDiv").html()+val.cvalue+" /br 

 }); 

}); 

第二种方法是利用getJSON来实现，只要在地址中加上callback=?参数即可：

jQuery.getJSON("http://search.twitter.com/search.json?callback=?",{ 

 q: "Arsenal" 

},function(tweets) { 

 console.info("Twitter returned: ",tweets); 

});

也可以简单地使用getScript方法：

//此时也可以在函数外定义foo方法

function foo(data){}//处理data数据

$.getScript(http://www.a.com/user?id=123 callback=foo);

jquery中的ajax方法怎样通过JSONP进行远程调用 $.ajax的参数

type：请求方式 GET/POST

url: 请求地址

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

dataType：返回的数据类型

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

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

success：调用成功执行的函数

error：异常处理函数

jquery ajax jsonp跨域调用实例代码

使用GET方式和POST方式都可以进行跨域调用客户端代码如下：

 %@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApp.WebForm1" % 

 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 

 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,//processData的默认值是true,用于对data参数进行序列化处理

 timeout: 15000,

 dataType: "jsonp", // not "json" well parse

 jsonp: "jsonpcallback",

 success: function(result) {

 alert(result.value1);

 /script 

 /head 

 body 

 form id="form1" runat="server" div /div /form 

 p input id="Button1" type="button" value="button" / /p 

 /body 

 /html 

客户端使用jsonp来传输数据

@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } 

 script type="text/javascript" 

functionSendData() 

$.ajax({ 

 type: "get", 

 async: false, 

 url: "/home/ReturnJson", 

 dataType: "jsonp", 

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

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

 success: function(data){ 

 alert(data.name); 

 error: function(){ 

 alert(fail); 

functionreceive(data) { 

 alert(data.age); 

 /script 

 input type="button" value="提交" / 

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