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>

客户端实现 callbackFunction 函数:

<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>

服务器端代码:

<?php
header(‘Content-type: application/json‘);
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST [‘jsoncallback‘]);
//json数据
$json_data = ‘["customername1","customername2"]‘;
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>
时间: 2024-08-05 22:00:08

JSONP-跨域读取数据的相关文章

笔记-Ajax[4]-JSONP跨域获取数据。

JS的跨域:跨域名获取数据,a域名获取b域名中的数据. 解决跨域获取数据的方法也叫JSONP(JSON and Padding) JSONP方法: 1:服务器代理:XMLHttpRequest代理文件 2:script标签:jsonp(常用);//利用script标签的src引入外部文件的功能,src能够引入任何的文件的类型 3:location.hash方式:iframe 4:window.name方式 5:flash方式 6:html5的postMessage方式 例子:百度输入数据下拉框提

使用JSONP跨域请求数据

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

jsonp跨域请求数据实例之手机号码查询

网上有很多开放的api,我们在本地通过ajax获取数据时,总会碰到一个问题,那就是跨域!如果不借助php,java等,仅仅通过js怎么解决跨域的问题呢?或许jsonp是个不错的选择. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery.min.js"></script> <tit

jsonp跨域访问数据

实例一,使用 jquery 的 $.getJSON 方法 //前端js : $("#selId").click(function() { $.getJSON("http://www.example.com/remote.php?callback=?", // callback=?参数是重点,会传递到后台自动处理 {name: 'max', age: 23, str: 'hello'}, function(data) { console.log(data); } );

asp.net MVC jsonp跨域获取数据

public class JsonpResult : JsonResult { object _data = null; public JsonpResult() { } public JsonpResult(object data) { this._data = data; } public override void ExecuteResult(ControllerContext context) { if(context != null) { HttpResponseBase respon

JSONP跨域请求数据报错 “Unexpected token :”的解决办法

原文  http://www.cnphp6.com/archives/65409 Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 “Uncaught SyntaxError: Unexpected token :”,主要问题在于返回的数据格式不正确 本地虚拟两个域名,分别为:www.test.com.www.abc.com http://www.test.com/index.html页面点击按钮,请求返回 www.abc.com域名目录下的文件的数据 ,其代码为: <!DOCT

JSON跨域读取那点事(JSONP跨域访问)

最近在码一个小项目,需要远程读取json.因为需求很少,如果引用jquery使用其getjson方法就显得很浪费嘛= = 这篇文章很详细的解释了JSON跨域读取的前世今生,把原理讲得很透彻.特此分享. 原文链接:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 前言: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强

JSONP(跨域请求) —— 一种非官方跨域数据交互协议

1.JSONP的作用 由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源,为 了实现跨域请求,可以通过script标签实现跨域请求,然后再服务器端输出JSON数据并执行回调函 数,从而解决了跨域的数据请求. JSONP协议的一个要点:允许用户传递一个callback参数给服务器端,然后服务器端返回数据时 会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自 动处理返回函数了. 2.如何使用JSONP? 在客户端

ajax 跨域获取数据jsonp使用

昨天帮同事从其他服务器传过来的json数据进行处理,遇到该问题.开始我的思路是用ajax直接请求把数据弄出来就OK了,然而出错了.原因是我使用的ajax 返回类型为json,默认ajax阻止跨服获取数据的.结合其他博文,ajax的dataType使用jsonp来解决此问题.开始觉得jsonp与json的使用类似,一步步的写着代码,如下: $.ajax({ type:'get', async:false, url:'http://112.11.131.238/nanhunongjing/GetCo

使用图片跨域方式获取图片数据 使用 jsonp 方式跨域获取数据

使用图片跨域方式获取图片数据 server.get(`/mockImg`, (req, res, next) => { // 使用图片跨域方式获取图片数据 req.headers.origin && res.setHeader(`Access-Control-Allow-Origin`, req.headers.origin) res.setHeader(`content-type`, `image/gif`) res.setHeader(`data`, `image/gif`) v