`

jQuery 之 纯js实现JSONP跨域

阅读更多
http://www.jquerycn.cn/content/20130712/3946.html

基于Jquery的跨域传输数据(JSONP) ,需要的朋友可以参考下。 后端:
复制代码 代码如下:

<?php
$json_str = json_encode(array("ddd"=>"11111111"));
echo $_GET['ja'].'('.$json_str.')';
?>

前端:
复制代码 代码如下:

$.getJSON('http://www.liushan.cn/test.php?ja=?',function (json){
alert(json);
});

纯JS实现(JSONP):
复制代码 代码如下:

//server return aa({'ddd':'ddd'}) callback function name: $_GET['callback']
//author:lonely
(function(w){
function getjson(){}
getjson.prototype.set=function(url,callback,callbackname){
this.callfn=callbackname||'urlcallback';
this.url=url+"?callback="+this.callfn;
try{
eval(this.callfn+"=function(data){\n"+
"callback(data);\n"+
'delete '+this.callfn+';}');
}catch(e){return;}
this.request();
delete this.url;
}
getjson.prototype.request=function(){
var script=document.createElement("script");
script.src=this.url;
var load=false;
script.onload = script.onreadystatechange = function() {
if(this.readyState === "loaded" || this.readyState === "complete"){
load=true;
script.onload = script.onreadystatechange=null;
}
};
var head=document.getElementsByTagName("head")[0];
head.insertBefore(script,head.firstChild);
}
w.getjson=getjson;
})(window)
//使用DOME
new getjson().set("http://www.test.cn/test.php",function(data){
alert(data.ddd);
});

另一个:getScript
复制代码 代码如下:

jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){
$("#go").click(function(){
$(".block").animate( { backgroundColor: 'pink' }, 1000)
.animate( { backgroundColor: 'blue' }, 1000);
});
});//CHM帮助文件示例
分享到:
评论

相关推荐

    jquery下利用jsonp跨域访问实现方法

    在JavaScript的世界里,由于同源策略的限制,浏览器禁止了不同源之间进行AJAX通信,但JSONP(JSON with Padding)作为一种巧妙的方式,允许我们绕过这个限制,实现在jQuery中进行跨域请求。本篇文章将深入探讨JSONP...

    jquery下利用jsonp跨域访问实现方法.docx

    JSONP(JSON with Padding)是一种常见的解决JavaScript跨域问题的技术,尤其在jQuery中得到了广泛的应用。由于浏览器的同源策略限制,JavaScript通常无法在不同源之间进行Ajax请求。但JSONP巧妙地利用了HTML中`...

    利用JQuery jsonp实现Ajax跨域请求json数据

    本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求,以及如何在服务器端使用.Net的*.handler和WebService来返回JSON数据。 首先,理解JSONP的基本原理。JSONP是一种非官方的协议,通过动态创建`...

    ASPNET_JSONP_demo(jq跨域)

    【ASP.NET JSONP 实现 jQuery 跨域】 在 Web 开发中,由于浏览器的同源策略限制,JavaScript 无法直接跨域访问数据。为了解决这个问题,开发者常常使用 JSONP(JSON with Padding) 技术。ASP.NET 和 jQuery 结合使用...

    跨域访问解决方法-jsonp

    在实际应用中,我们通常使用jQuery或其他JavaScript库来实现JSONP。以下是一个简单的jQuery示例: ```javascript // 定义回调函数 function handleResponse(data) { console.log(data); // 打印接收到的JSON数据 }...

    jquery跨域调用 js跨域调用

    jQuery作为一款广泛使用的JavaScript库,提供了方便的API来处理这种限制,实现跨域调用。 一、什么是jQuery跨域调用? jQuery跨域调用主要是通过JSONP(JSON with Padding)和CORS(Cross-Origin Resource Sharing...

    jsonpajax跨域请求

    "jsonp跨域请求"可能是服务器返回的示例数据,模拟了JSONP的跨域请求过程。 总结,JSONP和CORS是解决JavaScript跨域问题的两种主要方法,它们各有优缺点,适用于不同的场景。JSONP简单易用,但安全性较低;CORS则更...

    jquery3.0.min.js+jquery.param.js+跨域代码Demo

    总的来说,这个"jquery3.0.min.js+jquery.param.js+跨域代码Demo"展示了如何在不违反同源策略的情况下,利用jQuery技术通过URL参数实现跨域数据传输。这种方法在某些情况下,比如简单的数据请求或开发阶段,是一种...

    利用jsonp跨域调用百度js实现搜索框智能提示

    使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript也可以实现跨域调用js。  ok,了解了jsonp的原理和应用后,我们看看百度的智能提示是如何做的 在chrome的调试窗口下看看百度搜索...

    jsonp跨域获取数据的基础教程.docx

    &lt;script type="text/javascript" src="jquery-1.8.3.min.js"&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ var url = "http://example.com/jsonp.php?callback=jsonp"; var script = $('...

    ajax 跨域请求问题 jquery jsonp

    **Ajax跨域请求问题与jQuery JSONP解析** 在Web开发中,Ajax技术被广泛用于实现页面的异步更新,但浏览器的同源策略(Same-Origin Policy)限制了Ajax请求只能向同源(协议、域名、端口均相同)的服务器发送。这在...

    使用jquery的jsonp如何发起跨域请求及其原理详解

    本文主要给大家介绍的是关于jquery jsonp发起跨域请求及其原理的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的...

    jqpagination一个jq分页插件jsonp跨域比较真实的演示了分页的流程

    **JSONP跨域数据获取** `jqPagination` 提供了`paged` 回调函数,用于在每页切换时获取数据。由于浏览器的同源策略限制,我们通常需要使用JSONP来跨域获取数据。JSONP(JSON with Padding)是一种非官方的解决跨域...

    AJax与Jsonp跨域访问问题小结

    本文给大家汇总介绍了JavaScript的AJax,JQuery的AJax以及利用jsonp实现跨域访问的问题,非常的细致全面,有需要的小伙伴可以参考下。

    PHP AJAX JSONP实现跨域请求使用范例_ajax如何解决跨域请求

    在实际应用中,我们可以使用 JSONP 来实现跨域请求,以便从其他域名下的服务器获取数据。但是,我们需要注意的是,使用 JSONP 会存在安全风险,因为它可以被恶意攻击所利用。 在使用 JSONP 时,我们需要注意以下几...

    Jquery跨域Ajax请求测试

    本示例"Jquery跨域Ajax请求测试"将详细讲解如何利用jQuery实现这一功能。 首先,了解同源策略是理解跨域问题的关键。同源策略是浏览器为了保障用户安全而设定的一项机制,它规定了只有来自同一协议、同一域名和同一...

    使用Jsonp方式跨域获取json

    在实际开发中,我们可以使用JavaScript库如jQuery、axios等来方便地实现JSONP请求。例如,jQuery中的`$.ajax`或`$.getJSON`提供了JSONP支持。对于服务器端,开发者需要根据客户端传递的回调函数名动态构建响应内容...

    JSONP解决跨域问题

    前端使用jquery,datatype采用jsonp,服务端采用C#编写的webService

Global site tag (gtag.js) - Google Analytics