JSONP实现Ajax跨域请求

时间：2022-09-06 15:50:04

前言

由于浏览器存在同源策略的机制,所谓同源策略就是阻止从一个源(域名,包括同一个根域名下的不同二级域名)加载的文档或者脚本获取/或者设置另一个源加载的文档属性.

但比较特别的是:由于同源策略是浏览器的限制,所以请求的响应和发送是可以进行的,只不过浏览器不支持罢了.

同源策略限制

浏览器的同源策略并不是对所有的请求都有限制的:

  • 限制:XmlHttpRequest
  • 不限制:img iframe script等等具有src属性的标签

利用src属性标签实现跨域请求

基本思路

利用script标签,src导入目标域名的接口,在文档数的head标签中添加一行script标签,得到内容后将scprit标签删除,返回的解析后的参数即为得到的数据.

利用script标签实现跨域代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <h1>Index</h1>

    <input type="button" onclick="Ajax();" value="普通AJax"/>

    <input type="button" onclick="Ajax2();" value="跨域普通AJax"/>

    <input type="button" onclick="Ajax3();" value="跨域牛逼AJax"/>

    <input type="button" onclick="Ajax4();" value="江西TV"/>

    <script src="/static/jquery-2.1.4.min.js"></script>

    <script>

    		// 原生ajax,测试无效

        function Ajax(){

            $.ajax({

                url: '/get_data/',

                type: 'POST',

                data: {'k1': 'v1'},

                success: function (arg) {

                    alert(arg);

                }

            })

        }

			// 使用ajax跨域请求,测试无效

        function Ajax2(){

            $.ajax({

                url: 'http://wupeiqi.com:8001/api/',

                type: 'GET',

                data: {'k1': 'v1'},

                success: function (arg) {

                    alert(arg);

                }

            })

        }

        // 利用script标签,得到数据

        function Ajax3(){

            // script

            // alert(api)

            var tag = document.createElement('script');

            tag.src = 'http://wupeiqi.com:8001/api/';

            document.head.appendChild(tag);

            document.head.removeChild(tag);

        }

        function fafafa(arg){

            console.log(arg);

        }

        // 例子,获取江西卫视的节目单

        function Ajax4(){

            // script

            // alert(api)

            var tag = document.createElement('script');

            tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403';

            document.head.appendChild(tag);

            document.head.removeChild(tag);

        }

        function list(arg){

            console.log(arg);

        }

    </script>

</body>

</html>

JSONP实现ajax跨域

以上的代码其实也是jsonp的基本思路

基本的jsonp写法

$.ajax({

	url:..

	type: 'GET',

	dataType: 'jsonp',

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

	jsonp: 'callback',

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

	jsonpCallback: 'list'

})

function list(arg){

}

解释:

jsonp: callback      #发送给请求处理程序的,被请求端通过request.GET.get("callback"),获得jsonp回调函数的参数

jsonpCallback: 'list' #定义回调函数的名称,然后后面通过list(...)来处理获取数据

生产示例

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <p>

        <input type="button" onclick="Jsonp1();"  value='提交'/>

    </p>

    <p>

        <input type="button" onclick="Jsonp2();" value='提交'/>

    </p>

    <script type="text/javascript" src="jquery-1.12.4.js"></script>

    <script>

        function Jsonp1(){

            var tag = document.createElement('script');

            tag.src = "http://c2.com:8000/test/";

            document.head.appendChild(tag);

            document.head.removeChild(tag);

        }

        function Jsonp2(){

            $.ajax({

                url: "http://c2.com:8000/test/",

                type: 'GET',

                dataType: 'JSONP',

                success: function(data, statusText, xmlHttpRequest){

                    console.log(data);

                }

            })

        }

    </script>

</body>

</html>

###基于JSONP实现跨域Ajax - Demo

JSONP不能发送POST请求

究其根源,通过script标签的src属性进行跨域请求,<script src='http://www.jxntv.cn/data/jmd-jxtv2.html?callback=qwerqweqwe&_=1454376870403'>最后全部都会转换成GET请求,哪怕是你把type改为POST.

别处copy的例子,供参考

<html xmlns="http://www.w3.org/1999/xhtml" >

 <head>

     <title>Untitled Page</title>

      <script type="text/javascript" src=jquery.min.js"></script>

      <script type="text/javascript">

     jQuery(document).ready(function(){

        $.ajax({

             type: "get",

             async: false,

             url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",

             dataType: "jsonp",

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

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

             success: function(json){

                 alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');

             },

             error: function(){

                 alert('fail');

             }

         });

     });

     </script>

     </head>

  <body>

  </body>

 </html>

其他ajax跨站请求方式

需要顺带提一句的是,跨站请求还有另一种方式:cors,跨站资源共享，但此中方式对浏览器版本有要求,IE8以下的均不支持.

CORS与JSONP相比，无疑更为先进、方便和可靠。

    1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。

    2、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。

    3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS（这部分会在后文浏览器支持部分介绍）。

JSONP实现Ajax跨域请求的更多相关文章

  1. 利用jsonp进行Ajax跨域请求

    在进行Ajax请求的时候经常会遇到跨域的问题,这个时候一般就会用到jsonp. 关于json和jsonp,网上有很多原理解释,这里就不多赘述,需要的自行搜索. 下面是一个简单的ajax跨域请求示例: ...

  2. 关于试用jquery的jsonp实现ajax跨域请求数据的问题

    我们在开发过程中遇到要获取另一个系统数据时,就造成跨域问题,这就是下文要说的解决办法: 先我们熟悉下json和jsonp的区别: 使用AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交 ...

  3. 利用JQuery jsonp实现Ajax跨域请求 &period;Net 的&ast;&period;handler 和 WebService，返回json数据

    1:跨域请求handler一般处理程序 using System; using System.Collections.Generic; using System.Web; using System.W ...

  4. 使用jsonp实现ajax跨域请求

    Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料. 由于同源策略,一般来说位于 server1.example.com 的网页无法 ...

  5. 关于JQuery 中&dollar;&period;ajax函数利用jsonp实现Ajax跨域请求ASP&period;NET的WebService成功获取数据的案例

    部署环境:Window 7 SP1+IIS7 成功方案: 其成功解决问题的几个重要因素如下: 1.       由于WebService默认不支持Get请求,所以要在Web.config配置文件内的& ...

  6. 第113天：Ajax跨域请求解决方法

    一.原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步:设置状态监听函数 第三步:open一个连接,true是异步请求 第四部:send一个请求,可以发送一个对象和字符串,不需要 ...

  7. 如何解决ajax跨域请求？

    1.什么是跨域? a.域名不同 b.域名相同,端口不同 注:只有域名相同,端口相同时,才可以访问数据 可以使用jsonp解决ajax跨域请求的问题. 2.什么是jsonp? Jsonp其实就是一个跨域 ...

  8. jsonp其实很简单【ajax跨域请求】

    js便签笔记(13)——jsonp其实很简单[ajax跨域请求] 前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资 ...

  9. JAVAEE——宜立方商城11：sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求（jsonp）

    1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...

随机推荐

  1. 选中多个&lt&semi;ul&gt&semi;中的第一个&lt&semi;li&gt&semi;方法

    获取第一个ul中的第一个li标签的方法: //获取第一个ul中的第一个li /* $("ul li:first").css("background",&quot ...

  2. Just a Hook

      Just a Hook 题目大意:原来有N个铜棍, 一个人有种能力可以把一个区间的棍变成铜,银或者金的,价值分别是1,2,3, 最后求出总价值,没啥好说的,赤裸裸的线段树: Time Limit ...

  3. 至Webserver构造svgz的文件需要http头，让你的浏览器中打开svgz档

    IE8以及IE8不支持以下浏览器SVG的.svgz它是svg压缩文件格公式,本文介绍的配置独立的浏览器,但浏览svgz请IE9+要么Firefox,Chrome和其他现代的浏览器打开. 让我们以正确显 ...

  4. Chrome设计文档-多进程资源加载

    原文:Multi-process Resource Loading 背景 浏览器主进程及browser process处理所有的网络通信.原因有三点: Browser process可以控制每一个re ...

  5. 开源的许可证GPL、LGPL、BSD、Apache 2&period;0的通俗解释

    软件开发者要开源软件,不单单是开放源代码就可以了,选择一种许可证很重要,一个许可证之于软件就相当于价值观之于普通人,代表了这个软件的基本品性.一个错误的许可证选择可能会直接导致整个项目的失败. 各种开 ...

  6. win7和linux下利用命令查看文件md5、sha1、sha256

    win7 certutil -hashfile <filename> MD5 certutil -hashfile <filename> SHA1 certutil -hash ...

  7. BaseRecycleViewAdapterHelper

    BaseRecycleViewAdapterHelper 官方文档 git说明文档 1.English 2.中文

  8. SSM前言——相关设计模式

    1.使用代理对象,是为了在不修改目标对象的基础上,增强主业务逻辑.客户类真正的想要访问的对象是目标对象,但客户类真正可以访问的对象是代理对象. 2.静态代理是指,代理类在程序运行前就已经定义好,其与目 ...

  9. 不开vip会员照样看vip电影（亲测有效）

    此为临时链接,仅用于文章预览,将在短期内失效关闭 不开vip会员照样看vip电影(亲测有效) 2018-03-08 mr_lee Python达人课堂 刚刚测试,真实有效,颇不接待要分享了... 土豪 ...

  10. 关于自学C语言开始时应该注意的问题分享—未完待续&period;&period;&period;&period;&period;&period;

    ---恢复内容开始--- 自学C语言编程总结 第1章C语言概述 1.     如果用户将主函数的返回值类型定义为了void,则不需要返回任何值: 2.     C语言的基本结构包括主函数和程序体两部分 ...

相关文章