前言：

平时工作中很少跨域，很少用到jsonp，但是几乎每次面试都会被问到这个问题。很崩溃。

菜鸟教程上的jsonp教程就很好。这里做个笔记，自己捋一遍。

Jsonp（JSON with Padding）是json的一种使用模式，可以让网页从别的域名那获取资料，即跨域读取数据。

jsonp需要服务端配合

这里使用菜鸟教程提供的一个地址，任何一台电脑的本地都可以测试使用：http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction

前端，原生js的jsonp代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>JSONP 实例</title>

</head>

<body>

    <div id="divCustomers"></div>

    <script type="text/javascript">

function callbackFunction(result, methodName)

        {

            var html = '<ul>';

            for(var i = 0; i < result.length; i++)

            {

                html += '<li>' + result[i] + '</li>';

            }

            html += '</ul>';

            document.getElementById('divCustomers').innerHTML = html;

        }

</script>

<script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>

</body>

</html>

本地测试效果图：

jQuery使用JSONP代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>JSONP 实例</title>

    <script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>

</head>

<body>

<div id="divCustomers"></div>

<script>

$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {

    var html = '<ul>';

    for(var i = 0; i < data.length; i++)

    {

        html += '<li>' + data[i] + '</li>';

    }

    html += '</ul>';

    $('#divCustomers').html(html);

});

</script>

</body>

</html>

摘自： 菜鸟教程-JSONP教程

2019年，加油！

JSONP的使用示例（以及jquery版jsonp）超简单的更多相关文章

  1. jQuery倒计时代码(超简单)

    <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8&q ...

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

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

  3. JSONP跨域原理和jQuery.getJSON用法

    JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式).本文主要介绍JS ...

  4. jquery使用jsonp进行跨域调用

    关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用 首先介绍下$.ajax的参数 type:请求方式 GET/ ...

  5. jQuery 调用jsonp实现与原理

    jQuery 调用jsonp实现与原理 您的评价:        收藏该经验     阅读目录 1.客户端代码 2.服务器端 通过jQuery实现JSONP 一般的ajax是不能跨域请求的,因此需要使 ...

  6. JSONP的小示例

    jQuery中JSONP的两种实现方式: 都很简单,所以直接上代码! 前台代码如下: <script type="text/javascript"> $(functio ...

  7. jQuery的jsonp跨域是这么回事.

    实现跨域请求的有iframe,img,script中的src属性.那么jquery是如何解决跨域请求的呢? 一:项目jsonp2中有个app.js文件,代码如下: function app(json) ...

  8. 基于jQuery的Jsonp跨域[Get方式]

    由于目前的项目需要无刷新的跨域操作数据,整理了下自己使用的基于jQuery的Jsonp跨域[Get方式]. 代码如下: Javascript部分 $(function(){ $.ajax({ asyn ...

  9. jQuery中jsonp函数实现

    由于浏览器中的同源策略,不同的域名,不同的协议,甚至不同的端口都无法请求数据.因此出现了浏览器跨域请求数据问题. Jsonp是解决跨域问题的一个非常流行的方法. JSONP(JSON with Pad ...

随机推荐

  1. 3.Maven之（三）Maven插件

    转自:https://yq.aliyun.com/ziliao/312162 Maven本质上是一个插件框架,它的核心并不执行任何具体的构建任务,所有这些任务都交给插件来完成,像编译是通过maven- ...

  2. POJ 2111 DP+记录路径

    题意: 思路: 类似滑雪 //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm& ...

  3. 关于 js 的框架方向

    关于 js 的框架方向 http://www.breck-mckye.com/blog/2014/12/the-state-of-javascript-in-2015/?utm_source=ourj ...

  4. wget 指令学习之递归抓取文档技巧

    在线上阅读文档的时候,有没有想将它抓取到本地,以备没有网的时候阅读只需? 先上指令: $ wget --user-agent="Mozilla/5.0 (X11; Linux x86_64) ...

  5. 00082_Set接口

    1.Set接口介绍 (1)Collection中可以存放重复元素,也可以不存放重复元素,那么我们知道List中是可以存放重复元素的.那么不重复元素给哪里存放呢?那就是Set接口,它里面的集合,所存储的 ...

  6. AES与RAS结合加解密方案

    import java.io.IOException; import java.security.InvalidKeyException; import java.security.KeyFactor ...

  7. worktools-源码下拉问题

    今天下拉源码的时候,出现了一个问题,就是当地的内容跟仓库的内容冲突,导致merge冲突.这时候CC指令不能用.然后希望通过checkout到其他分支,然后cc掉的.结果没办法切换到其他分支,一直停留在 ...

  8. mysql 压力测试之批量插入自增字段不连续问题

    Gaps in auto-increment values for “bulk inserts” With innodb_autoinc_lock_mode set to 0 (“traditiona ...

  9. SPOJ 3899. Finding Fractions 连分数

    连分数乱搞,我反正是一眼没看出结果 某巨巨把这题讲解的比较详细 : http://blog.csdn.net/gogdizzy/article/details/8727386 令k = [a/b] 然 ...

  10. 如何优雅的写UI——（1）MFC六大核心机制-程序初始化

    很多做软件开发的人都有一种对事情刨根问底的精神,例如我们一直在用的MFC,很方便,不用学太多原理性的知识就可以做出各种窗口程序,但喜欢钻研的朋友肯定想知道,到底微软帮我们做了些什么,让我们在它的框架下 ...