`
xuyanlu
  • 浏览: 8410 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

Jsonp 跨域

 
阅读更多

客户端请求:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <script src="./jquery-1.7.2.js"></script>
 </head>

 <body>

	<div id="vvgBox">
        <ul id="gameCanvas">aa</ul>
    </div>

	<script type="text/javascript">
		var qsData = "123454";
		$.ajax({
			url: "http://www.jaap.com/jsonp.php",
			type: "POST",
			dataType: 'jsonp',
			jsonp: 'callback',
			data: qsData,
			timeout: 2000,
			success: function (json) {//客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数
				alert(json);
			}
		});

	</script>

 </body>
</html>
服务器端响应:

<?php
//服务端返回JSON数据  
$arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);  
$result=json_encode($arr);  

//动态执行回调函数  
$callback=$_GET['callback'];  
echo $callback."($result)";  

响应结果:


Jsonp优点:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。

Jsonp缺点:JSONP不提供错误处理。如果动态插入的代码正常运行,你可以得到返回,但是如果失败了,那么什么都不会发生。你无法获得一个404的错误,也不能取消这个请求。另外一个重要的缺点是如果使用了不信任的服务会造成很大的安全隐患。它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。


分享到:
评论

相关推荐

    html通过 ajax jsonp跨域请求接收和传送数据

    2. **JSONP跨域**: JSONP的工作方式不同,它不依赖于XMLHttpRequest对象。首先,客户端在HTML页面中定义一个全局函数,如`handleData(data)`。然后,创建一个`&lt;script&gt;`标签,将`src`属性设置为服务器的URL,URL中...

    JSONP跨域实现百度搜索功能(v1.0.0)

    在本项目"JSONP跨域实现百度搜索功能(v1.0.0)"中,我们将深入探讨如何利用JSONP技术来实现在网页上嵌入一个能够进行百度搜索的功能。 首先,我们需要理解为什么需要JSONP。浏览器的同源策略是出于安全考虑,不允许...

    jsonp跨域解决源代码

    2. JSONP原理:JSONP的基本思想是,服务器提供一个可以接受参数的JavaScript函数名,客户端在请求时传递这个函数名,服务器返回一个调用该函数并带有JSON数据的脚本,`&lt;script&gt;`标签加载这个脚本,从而实现跨域数据...

    ajax jsonp 跨域处理

    Ajax JSONP跨域处理是Web开发中的重要技术,通过JSONP,开发者可以在不违反同源策略的前提下实现跨域数据交互。虽然JSONP存在一些限制和安全隐患,但在许多场景下,它仍然是一个实用且有效的解决方案。随着技术的...

    ajax jsonp跨域传参

    ajax jsonp跨域传参,里面有源码,不过写在txt中了,很适合调用别人的接口

    JS 使用 JSONP 跨域获取用户IP

    JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`&lt;script&gt;`标签可以跨域请求资源的特性来实现JavaScript与服务器之间的通信。在JavaScript中,由于同源策略的限制,通常不能直接访问不同源的资源。但是...

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

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

    原生ajax库实现jsonp跨域短小精悍

    接下来,我们来看如何编写一个简单的原生JavaScript AJAX库,支持JSONP跨域。以下是一个基本的实现框架: ```javascript function Ajax(options) { var script = document.createElement('script'); var ...

    原生JS封装Ajax插件(同域、jsonp跨域)-.docx

    原生JS封装Ajax插件(同域、jsonp跨域)_.docx

    原生JS封装Ajax插件(同域、jsonp跨域)-.pdf

    原生JS封装Ajax插件(同域、jsonp跨域)_.pdf

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

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

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

    【JSONP跨域调用与百度搜索框智能提示】 在Web开发中,由于浏览器的同源策略限制,JavaScript无法直接发起跨域请求。为了解决这个问题,JSONP(JSON with Padding)应运而生。JSONP是一种绕过同源策略的技术,通过...

    第25周-第06章节-Python3.5-JSONP跨域请求jQuery方式.avi

    第25周-第06章节-Python3.5-JSONP跨域请求jQuery方式.avi

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

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

    AJax与Jsonp跨域访问问题小结

    AJAX与JSONP跨域访问问题小结 AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个页面的情况下,能够更新部分网页的技术。它通过使用XMLHttpRequest对象来与服务器进行异步通信。XMLHttpRequest对象...

    jsonpajax跨域请求

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

    ASPNET_JSONP_demo(jq跨域)

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

    jsonp跨域调用

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

    ajax跨域CORS方案 JSONP跨域请求方案.zip

    本文将深入探讨两种主要的跨域解决方案:CORS(Cross-Origin Resource Sharing)和JSONP(JSON with Padding)。 ### CORS方案 CORS是一种现代浏览器支持的跨域策略,允许服务器声明哪些源可以访问其资源。服务器...

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

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

Global site tag (gtag.js) - Google Analytics