`

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 结合使用...

    jQuery使用JSONP实现跨域获取数据的三种方法详解

    本文将详细介绍使用jQuery实现JSONP跨域获取数据的三种方法。 ### 第一种方法:$.ajax()函数 $.ajax()是jQuery中最为通用的Ajax实现方式。要使用JSONP方法,我们需要在$.ajax()函数中设置`dataType`为'jsonp'。...

    跨域访问解决方法-jsonp

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

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

    标题提到的"利用jsonp跨域调用百度js实现搜索框智能提示",即利用JSONP技术调用百度提供的API,实现在搜索框中输入关键字时,显示智能提示的功能,类似于百度搜索引擎的自动补全。 **JSONP原理**: JSONP的工作机制...

    jquery跨域调用 js跨域调用

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

    jsonp跨域请求数据实现手机号码查询实例分析.docx

    ### JSONP 跨域请求数据实现手机号码查询实例分析 #### 前言 在现代Web开发中,跨域问题一直是前端开发者面临的一个常见难题。简单来说,由于浏览器的同源策略限制,当一个网页尝试从不同的源(即不同的协议、端口...

    jsonpajax跨域请求

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

    JSONP实现Ajax跨域访问

    下面通过具体的示例代码来展示如何使用纯JavaScript实现JSONP。 ```html &lt;script type="text/javascript"&gt; function jsonpCallback(result) { alert(result.Name); // 显示数据 } &lt;script type="text/...

    jsonp跨域调用

    ### JSONP跨域调用详解 #### 一、JSONP定义及原理 **JSONP**(JSON with Padding)是一种被广泛采用的技术,用于绕过浏览器的同源策略限制,实现跨域数据请求。虽然JSONP并不是一种正式的标准或协议,但它在实际应用...

    轻松搞定jQuery+JSONP跨域请求的解决方案

    以上是基于jQuery和JSONP实现跨域请求的解决方案。具体到代码层面,可以通过示例来更清晰地展示如何操作。在这个例子中,客户端页面需要从另一域下的服务端接口获取数据,并将这些数据显示在页面中。通过上述提到的...

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

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

    jsonp跨域请求实现示例

    通过上述的实现原理和示例代码,我们可以看到JSONP是一种相对简单且高效的跨域请求解决方案,特别适用于那些不能修改CORS配置的老旧API接口。然而,随着现代浏览器对CORS的支持越来越好,开发者们更倾向于使用CORS来...

    JQuery跨域访问解决方案

    jQuery作为流行的JavaScript库,提供了一些机制来处理跨域访问。 JQuery的跨域解决方案主要依赖于JSONP(JSON with Padding)技术。JSONP是一种绕过同源策略的方式,它利用HTML中的`&lt;script&gt;`标签没有同源策略限制...

    Jsonp 跨域的原理以及Jquery的解决方案

    JSONP(JSON with Padding)是一种解决浏览器同源策略限制而无法直接通过AJAX请求跨域数据问题的技术。...Jquery作为流行的JavaScript库,为用户提供了简洁的API,来实现JSONP请求,进一步简化了跨域请求的编写工作。

    浅谈JQuery+ajax+jsonp 跨域访问

    本文将详细介绍JQuery、ajax以及jsonp跨域访问的知识。 首先,jQuery作为一个广泛使用的JavaScript库,其提供的ajax方法极大地简化了HTTP通信操作。然而,当尝试通过ajax访问不同域下的资源时,就会遇到跨域限制...

    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 = $('...

Global site tag (gtag.js) - Google Analytics