[url][/url]新建ticker.js
// JavaScript Document
showPrice({symbol:"四宝",price:"价格"});
然后新建一个页面引用它
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>111</title>
</head>
<body>
<script type="text/javascript">
// This is our function to be called with JSON data
function showPrice(data) {
alert("Symbol: " + data.symbol + ", Price: " + data.price);
}
var url = "http://www.esouluo.com/oldweb/ticker.js"; // URL of the external script
// this shows dynamic script insertion
var script = document.createElement('script');
script.setAttribute('src', url);
// load the script
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</body>
</html>
以上实例描述了简单jsonp的应用！
jQuery 的 JSONP 支持
<html>
<script type='text/javascript' src='commons/scripts/jquery.js'></script>
<script type='text/javascript'>
$(function(){
$.ajax({
url:'http://localhost/test.php',
dataType:"jsonp",
jsonp:"jsonpcallback",
success:function(data){
var $ul = $("<ul></ul>");
$.each(data,function(i,v){
$("<li/>").text(v.id + " " + v.name).appendTo($ul)
});
$("#res").append($ul);
}
});
});
</script>
<body>
<div id='res'></div>
</body>
</html>
服务器端php代码
<?php
if (isset($_GET['jsonpcallback'])){
echo $_GET['jsonpcallback']."([{id:1,name:'aaaa1'},{id:2,name:'bbbb2'}])";
exit;
}
?>
使用 JSONP 回调
jQuery.getJSON("http://localhost/test.php?callback=?", function(data){
var $ul = $("<ul></ul>");
$.each(data,function(i,v){
$("<li/>").text(v.id + " " + v.name).appendTo($ul)
});
$("#res").append($ul);
});
参考：
http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/
http://www.jb51.net/article/19624.htm
分享到：
相关推荐
### 使用JSONP完成HTTP和HTTPS之间的跨域访问 在现代Web开发中，跨域问题是一项常见挑战，尤其是在涉及不同协议（如HTTP与HTTPS）的数据交互时。本文将深入探讨如何利用JSONP（JSON with Padding）技术来实现HTTP与...
跨域访问是Web开发中一个常见的挑战，尤其是在进行Ajax异步请求时，浏览器的同源策略（Same-origin policy）会限制JavaScript从一个源获取另一个源的数据。为了解决这个问题，开发者通常采用JSONP（JSON with ...
在Web开发中，跨域（Cross-Origin）是一个常见的问题，特别是在使用Ajax进行异步数据交互时。跨域限制是浏览器为了安全原因而设置的一种机制，防止恶意网站通过脚本访问其他站点的数据。本文将深入探讨两种主要的...
在JavaScript的世界里，由于同源策略的限制，浏览器禁止了不同源之间进行AJAX通信，但JSONP（JSON with Padding）作为一种巧妙的方式，允许我们绕过这个限制，实现在jQuery中进行跨域请求。本篇文章将深入探讨JSONP...
### JSONP实现Ajax跨域访问 #### 一、引言 JSONP（JSON with Padding）是一种用于解决跨域数据访问的技术。由于同源策略（Same-Origin Policy）的存在，JavaScript/Ajax只能请求同源的资源，这给需要跨域访问数据...
JSONP（JSON with Padding）是一种解决跨域问题的非标准方法，主要用于JSON数据的获取。JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。JSONP的核心思想是利用`<script>`标签的src...
Ajax跨域访问是Web开发中常见的需求，可以通过JSONP或CORS来实现。在ASP.NET Web中，可以方便地配置服务器以支持这些跨域解决方案。同时，需要注意安全问题，防止恶意网站利用跨域访问获取或篡改数据。
本篇将详细介绍如何解决Ajax跨域访问的问题。 1. **什么是同源策略** 同源策略是浏览器为了保护用户安全而实施的一项安全策略，它限制了来自不同源的“文档”或脚本对彼此的交互。在没有明确许可的情况下，...
AJAX跨域问题的出现是由于浏览器的安全机制，旨在防止恶意网站通过脚本访问其他网站的数据，保护用户隐私。但是，在某些场景下，比如前后端分离的应用、API接口调用等，跨域请求是必要的。针对这一需求，有多种解决...
本文将详细介绍五种实现Ajax跨域访问的方法。 #### 一、使用JSONP（JSON with Padding） JSONP是一种常用的跨域数据获取方式，其原理是利用`<script>`标签没有跨域限制的特点来实现跨域请求。请求时，在URL中添加...
**jQuery实现Ajax跨域访问** 在Web开发中，由于同源策略的限制，JavaScript通常只能对同一域名下的资源进行操作。然而，有时我们需要从不同源获取数据，这就是跨域访问的需求。jQuery通过Ajax提供了跨域请求的能力...
标题中的“ajax跨域访问WCP搜索，返回JSON数据”涉及到的是Web开发中关于AJAX、跨域资源共享（CORS）以及JSON数据格式的应用。在Web应用中，AJAX（Asynchronous JavaScript and XML）是一种在无需刷新整个页面的情况...
本文将深入探讨如何使用原生JavaScript实现一个简单的AJAX库，特别关注JSONP的实现。 首先，理解JSONP的基本原理是关键。JSONP利用了HTML中`<script>`标签不受同源策略限制的特点，通过动态创建`<script>`元素并...
本文将详细探讨两种主要的Ajax跨域访问解决方法：JSONP和CORS。 **1. JSONP（JSON with Padding）** JSONP是一种非官方的跨域数据交互协议，它利用了`<script>`标签不受同源策略限制的特点。JSONP的工作原理是：...
JavaScript跨域和Ajax跨域是Web开发中常见的问题，尤其在进行前后端分离或API调用时，由于浏览器的同源策略限制，不同域名、协议或端口的资源请求会被阻止，这就是所谓的“跨域”。本文将深入探讨JavaScript和Ajax...
### AJAX跨域访问详解 #### 一、引言 在前端开发中，由于浏览器的同源策略限制，当一个页面发起请求到不同源时（即域名、端口、协议三者之一不同），就会触发跨域问题。AJAX作为一种常用的前端技术，在进行数据...
**Ajax JSONP 跨域处理详解** 在Web开发中，由于浏览器的安全策略限制，JavaScript通常不能直接访问不同源（协议、域名或端口不同）的资源，这就是所谓的“同源策略”。然而，随着Web应用的发展，跨域数据交互的...
### AJAX跨域问题详解 #### 一、引言 在Web开发中，由于浏览器的安全策略限制，同源策略（Same-origin policy）对于不同来源的数据访问进行了严格的限制，从而导致了跨域问题的发生。本篇文章将深入探讨AJAX跨域...