jsonp跨域请求的相关介绍

来源：动视网责编：小OO 时间：2020-11-27 20:16:17

jsonp跨域请求的相关介绍

分开说明。一、JSONP。直观的理解。就是在客户端动态注册一个函数。function a(data)，然后将函数名传到服务器，服务器返回一个a({/*json*/})到客户端运行，这样就调用客户端的。function a(data)，从而实现了跨域。诞生背景。1、Ajax直接请求普通文件存在跨域无权访问的问题，甭管是静态页面、动态网页、web服务、wcf、只要是跨域请求，一律不行。2、不过，web页面上调用js文件时则不受此影响。3、进一步推广，我们发现，凡是拥有Src属性的标签都有跨域能力，如：<；script>；<；img>；<；iframe>。

推荐度：

点击下载本文 文档为doc格式

导读分开说明。一、JSONP。直观的理解。就是在客户端动态注册一个函数。function a(data)，然后将函数名传到服务器，服务器返回一个a({/*json*/})到客户端运行，这样就调用客户端的。function a(data)，从而实现了跨域。诞生背景。1、Ajax直接请求普通文件存在跨域无权访问的问题，甭管是静态页面、动态网页、web服务、wcf、只要是跨域请求，一律不行。2、不过，web页面上调用js文件时则不受此影响。3、进一步推广，我们发现，凡是拥有Src属性的标签都有跨域能力，如：<；script>；<；img>；<；iframe>。

这篇文章主要为大家详细介绍了jsonp跨域请求的相关资料，激活了所有接口支持浏览器跨域请求的封装，具有一定的参考价值。

分开说明：

一、JSONP：

直观的理解：

就是在客户端动态注册一个函数

function a(data)，然后将函数名传到服务器，服务器返回一个a({/*json*/})到客户端运行,这样就调用客户端的

function a(data),从而实现了跨域.

诞生背景：

1、Ajax直接请求普通文件存在跨域无权访问的问题，甭管是静态页面、动态网页、web服务、wcf、只要是跨域请求，一律不行。

2、不过，web页面上调用js文件时则不受此影响

3、进一步推广，我们发现，凡是拥有Src属性的标签都有跨域能力，如：<script><img><iframe>

4、于是，当前如果想通过纯web端（ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算）跨域访问数据，就只能使用如下方式：就是在远程服务器上设法把数据装进js格式的文本里，供客户端调用和进一步处理。

5、JSON就是一种纯字符数据格式，且能呗js原生支持。

6、这样解决方案出炉：web客户端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件（一般以json为后缀）。

7、客户端在对json文件调用成功后，也就得到了所需数据，剩下的就是按照自己的需求进行处理了。

8为了便于客户端使用数据，逐渐形成了一种非正式的传输协议，称之为jsonp。该协议的一个要点就是允许用户传递一个callback参数给服务器，然后服务器返回数据时会将这个callback参数作为函数名来包裹住json数据，这样客户端就可以随意定制自己的函数来处理返回数据了。

具体实现：

不管jQuery也好，extjs也罢，又或者是其他支持jsonp的框架，他们幕后所做的工作都是一样的，下面我来循序渐进的说明一下jsonp在客户端的实现：

1、我们知道，哪怕跨域js文件中的代码（当然指符合web脚本安全策略的），web页面也是可以无条件执行的。

远程服务器remoteserver.com根目录下有个remote.js文件代码如下：

alert('我是远程文件');

话不多讲，见核心代码

1.定义一个类，继承MappingJackson2HttpMessageConverter，重写writeInternal方法，方法里简单判断一下是否带有callback参数，没有直接返回数据，有的话将数据用callback参数的值括号包裹起来返回。

import java.io.IOException;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.io.IOUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.http.HttpOutputMessage;
import org.springframework.http.converter.HttpMessageNotWritableException;
import org.springframework.http.converter.json.MappingJackson2HttpMessageConverter;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;

import com.fasterxml.jackson.core.JsonEncoding;
import com.fasterxml.jackson.core.JsonProcessingException;

public class CallbackMappingJackson2HttpMessageConverter extends MappingJackson2HttpMessageConverter {

 // 做jsonp的支持的标识，在请求参数中加该参数
 private String callbackName;

 @Override
 protected void writeInternal(Object object, HttpOutputMessage outputMessage) throws IOException,
 HttpMessageNotWritableException {
 // 从threadLocal中获取当前的Request对象
 HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder
 .currentRequestAttributes()).getRequest();
 String callbackParam = request.getParameter(callbackName);
 if (StringUtils.isEmpty(callbackParam)) {
 // 没有找到callback参数，直接返回json数据
 super.writeInternal(object, outputMessage);
 } else {
 JsonEncoding encoding = getJsonEncoding(outputMessage.getHeaders().getContentType());
 try {
 String result = callbackParam + "(" + super.getObjectMapper().writeValueAsString(object)
 + ");";
 IOUtils.write(result, outputMessage.getBody(), encoding.getJavaName());
 } catch (JsonProcessingException ex) {
 throw new HttpMessageNotWritableException("Could not write JSON: " + ex.getMessage(), ex);
 }
 }

 }

 public String getCallbackName() {
 return callbackName;
 }

 public void setCallbackName(String callbackName) {
 this.callbackName = callbackName;
 }

}

2.定义Java bean，注意修改class扫描路径，这样每次请求过来都会调起MappingJackson2HttpMessageConverter类里的riteInternal这个方法，如果请求带上了callback参数，则将以callbackValue('data')格式的数据返回给前端。

<!-- 定义注解驱动 -->
 <mvc:annotation-driven>
 <mvc:message-converters register-defaults="true">
 <bean
 class="xxx.xxx.xxx.CallbackMappingJackson2HttpMessageConverter">
 <property name="callbackName" value="callback" />
 </bean>
 </mvc:message-converters>
 </mvc:annotation-driven>

3.前端通过jquery封装的ajax方式调用，这里做了一些代码节省，关键代码已红色标出

4.浏览器打印log

jsonp跨域请求的相关介绍

推荐度：

点击下载本文 文档为doc格式

标签：介绍请求访问的

热门焦点

jsonp跨域请求的相关介绍

jsonp跨域请求的相关介绍

jsonp跨域请求的相关介绍

最新推荐

猜你喜欢

热门推荐