jsonp跨域获取数据小解

由于浏览器有同源策略，所以要想获取非同源（协议，域名，端口三者有一不同都算非同源）的页面的数据，就得进行跨域

(1) jsonp原理

由于script标签的src属性可以访问非同源的js脚本，所以通过src属性访问服务器会返回函数的js代码，而我们想要的数据就作为函数参数返回，而我们会先定义这个函数，返回的js代码就可执行

(2) jsonp实现代码

请求页面

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

 </head>

 <body>

 <script type="text/javascript">

     function jsonp(data){

         console.log(username)

     }

 </script>

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

 </script>

 <script type="text/javascript">

     $(document).ready(function(){

         var url = "http://www.example.com/jsonp.php?callback=jsonp";

         var script = $('<script><\/script>');

         script.attr("src",url);

         $("body").append(script);

     });

 </script>

 </body>

 </html>
<?php

$data = {'name': '张三'};

$callback = $_GET['callback'];

echo $callback."(".json_encode($data).")";

?php>

之后php会返回

jsonp（{

    name:'niuni

}）

然后PHP返回的代码h会被请求页面的jsonp方法执行

（3）jQuery的简便jsonp跨域

<script>

    function showData (data) {

        console.info(data);

    }

    $(document).ready(function () {

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

            $.ajax({

                url: "http://www.example.comjsonp",

                type: "GET",

                dataType: "jsonp",// 返回数据类型

                jsonpCallback: "showData",//回调函数

                // 获取数据成功就执行success函数

                success: function (data) {

                    console.info("data");

                }

            });

        });

    });

</script>

　　

jsonp跨域获取数据小解的更多相关文章

  1. jsonp跨域获取数据实现百度搜索

    本菜鸡最近在写某个页面请求数据时,报了如下的错误. Failed to load https://...:No 'Access-Control-Allow-Origin' header is pres ...

  2. asp.net MVC jsonp跨域获取数据

    public class JsonpResult : JsonResult { object _data = null; public JsonpResult() { } public JsonpRe ...

  3. jQuery之ajax的跨域获取数据

    如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面.服务 ...

  4. 利用location.hash+iframe跨域获取数据详解

    前言 如果看懂了前文利用window.name+iframe跨域获取数据,那么此文也就很好理解了.一样都是动态插入一个iframe,然后把iframe的src指向服务端地址,而服务端同样都是输出一段j ...

  5. 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  6. XMLHTTPRequest对象不能跨域获取数据？！

    写了一小段代码,是用XMLHTTPRequest对象来获取数据的,在本地服务器中,运行的很顺利,但是转向实际服务器(实质上就是转向http://gumball.wickedlysmart.com获取一 ...

  7. iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  8. 使用JSONP跨域请求数据

    下面代码,可以使用JSONP进行跨域请求数据,Insus.NET记录以下,以备忘记.

  9. java之初识服务器跨域获取数据

    当一个项目膨大到无法进行整理时,而作为新负责维护的团队是非常苦恼的.对于想实现两个系统的数据访问,使用Ajax数据请求方式获取jsonp格式的数据 需要有前端jquery库文件. 前端代码通过jque ...

随机推荐

  1. OkHttp框架从入门到放弃，解析图片使用Picasso裁剪，二次封装OkHttpUtils，Post提交表单数据

    OkHttp框架从入门到放弃,解析图片使用Picasso裁剪,二次封装OkHttpUtils,Post提交表单数据 我们这片博文就来聊聊这个反响很不错的OkHttp了,标题是我恶搞的,本篇将着重详细的 ...

  2. C#中的泛型化方法的实现

    在一个基本数据类型的方法中求解最大值或者最小值是一件很方便,同时也是很简单的事.但是如果你想复用这个方法,我们就需要使用到泛型编程的概念了.这就好比是C++中的模板函数,或者java中的泛型操作.相比 ...

  3. java 运行环境

    1.jre和jdk的区别 jre:java runtime environment, java运行环境,是java程序运行依赖的,包括java的类库的.class文件和kvm. jdk:java de ...

  4. Python+Visual Studio

    一直在找一个比较好的Python IDE,无奈找来找去都不太好用,由于经常用Visual Studio,所以很希望找到一个能够在VS中的Python扩展.今天发现了一个很给力的VS扩展,可以在VS中方 ...

  5. OJ题：成绩排序

    题目描述 查找和排序 题目:输入任意(用户,成绩)序列,可以获得成绩从高到低或从低到高的排列,相同成绩 都按先录入排列在前的规则处理. 例示: jack 70 peter 96 Tom 70 smit ...

  6. [Django] 单元测试小记

    从前很少写单元测试了,特别是web应用.最近不知不觉喜欢起来这个事情了,发现单元测试对于软件的模块,正交性有很大促进作用,因为函数,模块写的不合理,单元测试写起来就麻烦的多呀.公司的项目一直都是用Dj ...

  7. H5学习之旅-H5的元素属性（3）

    1.标签可以拥有属性,为标签提供更多的信息 2.属性以键值对的形式呈现例如:href = "www.baidu.com" 3.常用标签属性 :align对其方式 ,对齐方式,包括上 ...

  8. wing带你玩转自定义view系列（2） 简单模仿qq未读消息去除效果

    上一篇介绍了贝塞尔曲线的简单应用 仿360内存清理效果 这一篇带来一个  两条贝塞尔曲线的应用 : 仿qq未读消息去除效果. 转载请注明出处:http://blog.csdn.net/wingicho ...

  9. Swift基础之UITabBarController（这是在之前UITableView中直接添加的）

    这些基础内容基本已经可以搭建项目框架,剩下的就是一些优化,细节和数据请求问题,慢慢更新.... 在AppDelegate中创建方法 //创建方法执行UITabBarController func cr ...

  10. Java进阶(五十一)必须记住的Myeclipse快捷键

    Java进阶(五十一)必须记住的Myeclipse快捷键 在调试程序的时候,我们经常需要注释一些代码,在用Myeclipse编程时,就可以用 Ctrl+/ 为选中的一段代码加上以 // 打头的注释:当 ...