AJAX请求是无法跨域的。如果要实现跨域访问【好比要访问外部站点的公共接口】,有以下2种方式
1.使用JSONP
2.使用代理,及在本项目后台远程访问外部接口。
一 JSONP实现原理。
Javascript由于出于安全考虑,通常无法实现跨域访问。可是有个例外:
<script type="text/javascript" src="http://localhost:8888/RemoteServer/jsonp.js"></script>
通过script标签的可以访问外部js文件的。
假如jsonp.js的内容如下
callback({name:"hello world."});
而引入json.js的html文件中有如下js方法定义
function callback(data){ alert(JSON.stringify(data)); }
那么当加载完<script type="text/javascript" src="http://localhost:8888/RemoteServer/jsonp.js"></script>会立马执行callback方法【注:script引入必须在callback方法定义之后】。
再假如我们将以上的script标签改为如下:
<script type="text/javascript" src="http://localhost:8888/RemoteServer/RemoteRequetHandler?callback=callback"></script>
src 引入的是由后台servlet生成的内容,后台servlet代码如下:
String callbackName=request.getParameter("callback"); response.setContentType("text/javascript; charset=utf-8"); response.setStatus(200); PrintWriter pw=response.getWriter(); pw.write(callbackName+"({\"name\":\"remote call\"});"); pw.close();
这样执行哪个方法由前台的callback参数指定,而传入这个要执行的方法的内容由后台决定【传入的内容是一个json对象,或者是一个普通的string并不重要】。这就是JSONP。
JSONP的原理就是利用了script标签可以加载外部js文件的特性。
二 jquery使用JSONP
$.ajax({ url : "http://localhost:8888/RemoteServer/RemoteRequetHandler", cache : false, type : "GET", dataType:"jsonp", success : function(data) { alert(JSON.stringify(data)); } });
当指定dataType为jsonp是,jquery会自动在url后边添加callback=?,当请求返回是会执行success指定的方法。
相关推荐
JSON(JavaScript Object Notation)和JSONP(JSON with Padding)是两种常见的数据交换格式,尤其在Web开发中广泛使用。本文将深入探讨这两种格式的特点、用途以及它们在跨域数据请求中的作用。 **1. JSON简介** ...
JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`<script>`标签可以跨域请求资源的特性,为了解决JavaScript在浏览器端由于同源策略限制无法直接访问不同源的HTTP请求的问题。在本场景中,前端使用...
然而,Ajax技术在实现动态网页交互时常常需要跨越这个限制,这时就引入了JSONP(JSON with Padding)作为跨域请求的一种解决方案。本文将详细介绍JSONP的工作原理以及如何在ASP.NET网站开发中应用JSONP解决Ajax跨域...
在页面a中由前端发送一个jsonp请求到客户方,得到一个token值 前端得到token值后向自己后端发送一个请求,后端根据token去redis(token的值就是redis里的key)里取值(key=token的值,value=用户信息等)判断用户是否已...
在本示例中,我们将深入探讨JSONP的工作原理,以及如何使用Python来实现JSONP服务。 **JSONP的原理** JSONP的核心思想是通过动态插入`<script>`标签,其`src`属性指向提供数据的服务端URL。服务端返回的不是标准的...
- **JSONP**:一种允许从一个域加载另一个域中的脚本的技术,它通过动态创建`<script>`标签并插入到DOM中来实现。 - **跨域限制**:浏览器的安全策略之一,限制了从一个源加载的脚本获取或设置另一个源上的资源的...
JSONP简单调用实例。ASP.NET和纯HTML。jQuery的$.ajax的调用!jsonP说白了,就是在json字符串外面包上一个:参数名称+左右括弧!只是包了个:jsonpCallback() 而已! 相关文章:...
在这个纯Servlet实现JSONP的例子中,我们将深入理解JSONP的工作原理,以及如何在Java的Servlet环境中实现这一功能。 首先,让我们了解JSONP的基本概念。JSON(JavaScript Object Notation)是一种轻量级的数据交换...
### JSONP原理详解 #### 一、什么是JSONP? JSONP(JSON with Padding)是一种用于解决浏览器同源策略限制的方法,允许网页从不同域名的服务器上加载数据。它利用了`<script>`标签不受同源策略限制的特点来实现...
为了解决这个问题,开发者通常采用JSONP(JSON with Padding)技术。本文将详细探讨JSONP的工作原理以及如何在实际项目中使用它来跨域获取JSON数据。 ### JSONP简介 JSONP全称为"JSON Padding",它并不是JSON的一...
**Ajax与Jsonp结合在Jquery中的应用** Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个网页的情况下,与服务器进行数据交互,提升用户体验。而Jsonp(JSON with Padding)是解决浏览器同源策略...
2. **JSONP跨域**: JSONP的工作方式不同,它不依赖于XMLHttpRequest对象。首先,客户端在HTML页面中定义一个全局函数,如`handleData(data)`。然后,创建一个`<script>`标签,将`src`属性设置为服务器的URL,URL中...
然而,为了实现数据交互,开发者们找到了一种名为JSONP(JSON with Padding)的解决方案。本文将深入讲解JSONP的原理及其在解决跨域问题中的应用。 ### JSONP 原理 JSONP 的全称是“JSON with Padding”,它并非一...
在标题"Jsonp+asp.net"中,我们可以理解为这个项目或教程是关于如何在ASP.NET环境下使用JSONP与前端交互数据的。ASP.NET是微软开发的一种Web应用程序框架,它提供了丰富的功能和工具来构建动态网站、Web应用和服务。...
JSONP (JSON with Padding) 是一种跨域数据交互协议,主要应用于JavaScript中,用来解决浏览器的同源策略(SOP)限制。同源策略限制了JavaScript只能与相同协议、相同域名、相同端口的源进行交互,但JSONP巧妙地利用...
但为了实现数据交互,开发者常使用JSONP(JSON with Padding)这一技术来规避同源策略,实现在客户端跨域获取JSON数据。本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求,以及如何在服务器端使用.Net...
JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`<script>`标签可以跨域请求资源的特性来实现数据的交换。这个本地实现的最简单jsonp例子旨在帮助初学者更好地理解这一概念。 首先,我们要明确的是,...
JSONP(JSON with Padding)是一种跨域数据交互协议,它的基本思想是利用JavaScript函数调用的特性,将数据封装在函数调用中,从而绕过浏览器的同源策略限制。在网页开发中,如果你需要从一个不同的域名下获取数据,...
JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`<script>`标签可以跨域请求资源的特性,将JSON数据包裹在一个JavaScript函数调用中返回,从而实现跨域通信。在.NET 3.5中,Windows Communication ...