ajax实现JSONP跨域（ajax的jsonp跨域）

25-04-03 7

想了解ajax实现JSONP跨域的新动态吗？本文将为您提供详细的信息，我们还将为您解答关于ajax的jsonp跨域的相关问题，此外，我们还将为您介绍关于ajaxjsonp跨域、ajaxjsonp跨域乱

想了解ajax实现JSONP跨域的新动态吗？本文将为您提供详细的信息，我们还将为您解答关于ajax的jsonp跨域的相关问题，此外，我们还将为您介绍关于ajax jsonp跨域、ajax jsonp跨域乱码解决方案、Ajax jsonp跨域请求实现方法、ajax jsonp跨域调用的新知识。

本文目录一览：

ajax实现JSONP跨域（ajax的jsonp跨域）
ajax jsonp跨域
ajax jsonp跨域乱码解决方案
Ajax jsonp跨域请求实现方法
ajax jsonp跨域调用

ajax实现JSONP跨域（ajax的jsonp跨域）

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

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

什么是跨域

简单的说，出于安全方面的考虑，页面中的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的应用

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": "name" : 张三,116)">"age": 17});

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

try{foo({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); } 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,key,val) { $("#myDiv").html($("#myDiv").html()+val.cvalue+"</br>"); }); } });

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

jQuery.getJSON("http://search.twitter.com/search.json?callback=?",{ q: "Arsenal" },242)">tweets) { console.info("Twitter returned: ",tweets); });

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

//此时也可以在函数外定义foo方法 foo(data){}//处理data数据 $.getScript('http://www.a.com/user?id=123&callback=foo');

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

$.ajax的参数

type：请求方式 GET/POST

原文链接

ajax jsonp跨域

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

简单理解

利用<script>标签可以跨域，让服务器端返回可执行的Javascript函数，参数为要回发的数据。

像这样

<script>
    function foo(res) {
        console.log(res); // {name: "tom", age: 23}
    }
</script>
<script src="http://localhost:8080/test/demo.php?bar=foo"></script>

php代码

<?php
header(''content-type: application/json'');
$a = array(''name''=>''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不匹配的话也会报错。

ajax jsonp跨域乱码解决方案

在前端页面对要在url中传递的参数进行urlencoder(),是两次编码！！！

在controller中对接收的参数进行解码，一次解码！！！

在controller的@requestmapping()注解中添加属性product:

@RequestMapping(value = "/makeAppointment",produces="text/html;charset=UTF-8")

具体代码如下：

主页（服务端页面vm）:

<html>
<head>
    <Meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
    <script type="text/javascript">

        $(document).ready(function(){

            $("#button").click(function(){
                var name =encodeURI($("#name").val());

                var tel =$("#tel").val();
                var url ="/makeAppointment?name="+encodeURI(name)+"&tel="+tel+"&callback=?";
                $.getJSON(url,function(data,status){
                            $("#spanArea").html(data.userName+"\n "+data.id);
                        });

            });
        });

    </script>
</head>

<body>
<divalign="center">
    <spanid="spanArea">预约页面</span>
<p><span>
    姓名：
</span><input type="text" id="name"></p>
<p><span>
    电话：
</span><input type="text" id="tel"></p>

<button id="button">
    预约</button>
</div>
</body>

</html>

controller代码：

package com.jd.jr.controller;

import com.alibaba.fastjson.JSON;
import com.jd.jr.po.UserPo;
import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.io.UnsupportedEncodingException;
import java.net.URLDecoder;


/**
 * Created by guojiangjiang on 2015/8/7.
 */
@Controller
public class Appointment {
    private static Logger logger = Logger.getLogger(Appointment.class);
    //@RequestMapping(value = "/makeAppointment",produces="text/html;charset=UTF-8")
    @RequestMapping(value = "/makeAppointment",produces="text/html;charset=UTF-8")
    @ResponseBody
    public String getAppointment(String name,String tel,String callback) throws UnsupportedEncodingException {
    //  logger.info("name is: " + URLDecoder.decode(name,"UTF-8") + "tel is : " + URLDecoder.decode(tel,"utf-8"));
        //String names =new String(name.getBytes("iso-8859-1"),"utf-8");

        String names = URLDecoder.decode(name,"utf-8");

        int telep = Integer.parseInt(tel);
        UserPo user = new UserPo();
        user.setId(telep);
        user.setUserName(names);
        String json = JSON.toJSONString(user);


        String result = callback+"("+json+")";
        System.out.println(result);
        return result;
    }
}

跨域页面：

<html>
<head>
    <Meta http-equiv="content-type" content="text/html; charset=gbk">
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript">

        $(document).ready(function(){

            $("#button").click(function(){

                var name =encodeURI($("#name").val());
                var tel =$("#tel").val();
                var url ="http://localhost:8080/makeAppointment?name="+encodeURI(name)+"&tel="+tel+"&callback=?";
                $.getJSON(url,status){

                            $("#spanArea").html(data.userName+"\n "+data.id);

                        });

            });
        });

    </script>
</head>

<body>
<divalign="center">
    <spanid="spanArea">预约页面</span>
<p><span>
    姓名：
</span><input type="text" id="name"></p>
<p><span>
    电话：
</span><input type="text" id="tel"></p>

<button id="button">
    预约</button>
</div>
</body>

</html>

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代码。

跨域: js有一个同源限制,简单说来源不一样的话就无法相互间交互.那么怎么算来源不一样呢, 举个例子:浏览器访问-->服务器A--->得到页面A---页面A中的js脚本只能访问服务器A的资源(相同域名和端口,此外域名与对应的ip也算不同源,要么都域名,要么都ip).

以上就是js的跨域问题,但是这里需要注意一点的是服务器A是没有跨域的问题的,这个只有js存在这个问题,也就是说: 页面A中js-->服务器A--->跨域资源,这个路径是可以.只有页面A中的js--->跨域资源,这个路径是不行的.

然后说一下解决方案中的jsonp,这个不是一种格式,而是一种解决方案.

jsonp的原理:js虽然有同源限制,但是引入js文件的时候却没有这个限制,也就是说:

<script type="text/javascript" src="xxx/xxxx.js"></script>

其中src属性引入js文件的时候是没有同源限制的,此时是可以引入域外资源的.jsonp的原理就在这里,通过动态的创建一个以上那行js引入语句,通过其src属性访问域外资源.而域外资源服务器只要返回一个能被解析为js语句的字符串即可达到返回结果的目的,形如:

callback({"key":"value",...})

其中callback是需要事先约定的名字,绿字部分为要返回到json字符串,然后拼接成以上那种形式直接返回即可.这样页面中的js从服务端接收到这个拼接的字符串后,就会直接执行本地的名为callback的js方法,这也就是为何callback这个需要事先约定的原因,需要保证页面侧要存在这个js方法,这个方法传入的参数就为服务器侧的返回值.

ajax是支持jsonp的,所以以上那些麻烦事情都会替我们做,写法如下:

$.ajax({
     type: ''GET'',
     url: "http://127.0.0.1:8080/xxx/xxx",
     async: false,
     dataType: "jsonp",
     jsonp: "callback",
     success: function(result){
       .....
     },
     timeout:3000 
  });

红字部分标识我们使用jsonp的方式调用,实际上此时这个已经不是传统意义上的ajax的get请求了,它的真实实现方式就是我们上文中说的那样.其中红字部分的callback为我们要和服务器端进行沟通的部分,这个请求发送到服务器端,实际上这样的:

http://127.0.0.1:8080/xxx/xxx?callback=jqueryxxxx

服务器端需要通过callback来取值(类似用request.getParameter("callback")),也就是取后面的jqueryxxxx等自动生成的值,这个值实际上就是对应的我们发送请求的ajax方法中的success回调方法,服务器端如果返回

jqueryxxxx({"ret":"ok"})

页面中会自动执行success方法,且将{"ret":"ok"}传给success方法的参数result.

以上就是ajax通过jsonp的方式实现跨域访问的过程.可以看出基本不用我们做什么额外操作,全都封装好了.

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

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

$.ajax({
    dataType: ''jsonp'',
    url: ''http://www.a.com/user?id=123'',
    success: function(data){
        //处理data数据
    }
});

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

$.getJSON(''http://www.a.com/user?id=123&callback=?'', function(data){
    //处理data数据
});

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

//此时也可以在函数外定义foo方法
function foo(data){
    //处理data数据
}
$.getJSON(''http://www.a.com/user?id=123&callback=foo'');

JSONP的应用

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

您可能感兴趣的文章: