前段时间在做产品开发的时候,需要与公司网站那边进行交互,我们所开发的产品上线后是放在一个域名下,公司网站那块是在另一个域名下,这样在页面中调用
网站那边的接口时就存在跨域的问题,当时为了不修改网站那边的接口,所以采用在服务端通过webservice方式进行调用网站接口,问题也很快解决了,当时我就在想
如果需要在js中直接访问的话,就涉及到到跨域的问题,那么怎么做才能解决这个问题呢,我上网找了一些资料,最后采用的是jsonp的方式来解决的。下面我来给大家分享下
用jsonp方式解决跨域问题。分为以下步骤:
1、引入jquery.js,使用$.ajax()来定义jsonp,如下:
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript" src="${path}/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#jsonp").click(function(){
$.ajax({
url:"/demo/jsonp.action",
type:"GET",
async:false,
dataType:"jsonp",
jsonp:"jsonpCallback",
jsonpCallback:"showAge",
success:function(data){
//alert(data.name);
}
}
);
});
});
function showAge(data){
alert(data.age);
}
</script>
</head>
<body>
<a id="jsonp" href="">使用jsonp</a>
</body>
</html>
2、服务器端处理:
package com.mall.web.action;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
import com.alibaba.fastjson.JSONObject;
@Controller
@RequestMapping("/demo/")
public class DemoAction {
private HttpServletRequest request;
private HttpServletResponse response;
@ModelAttribute
public void setRequestAndResponse(HttpServletRequest request,HttpServletResponse response){
this.request = request;
this.response = response;
}
@RequestMapping(value="jsonp",method=RequestMethod.GET)
public void jsonp(){
try {
response.setContentType("text/plain");
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
PrintWriter out = response.getWriter();
JSONObject resultJSON = new JSONObject();
resultJSON.put("name", "wen");
resultJSON.put("age", "17");
String jsonpCallback = request.getParameter("jsonpCallback");//客户端请求参数
System.out.println("-------------------->"+jsonpCallback);
System.out.println("-------------------->"+resultJSON.toJSONString());
out.println(jsonpCallback+"("+resultJSON.toJSONString()+")");//返回jsonp格式数据
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
该访问的url地址为:/demo/jsonp.action?jsonpCallback=“showAge”
在上述事例中,需要注意以下几点:
1、jsonp中只能使用get请求,ajax请求中dataType为jsonp
2、jsonp定义的url地址中的参数名默认为callback
3、jsonpCallback定义的时jsonp定义的参数对应的值,也是服务器需要回调的函数,若jsonpCallback为定义值,默认回调success函数
4、服务器接受请求后,需要返回符合参数传递过来的回调函数如:
out.println(jsonpCallback+"("+resultJSON.toJSONString()+")");//返回jsonp格式数据
以上就是jsonp的访问过程,这里需要大家好好理解。因为使用jsonp跨域访问,需要客户端和服务端定义一个规则,即回调函数的规则,所以
在开发的过程中需要客户端和服务端的开发人员共同定义一个规则。
其实我们还可以通过$.get()和$.getJson()方式来跨域访问,这里就不跟大家细说了,如果感兴趣的朋友,可以自己去了解下,今天就给大家分享到这,
我们下期再见,接下来会为大家分享android的一些知识。
分享到:
相关推荐
html通过 ajax jsonp跨域请求接收和传送数据 使用HTML页面与后台跨域交互,获得后台数据或传输数据给后台
ajax跨域CORS方案 JSONP跨域请求方案.zip
jsonp跨域请求数据实现手机号码查询实例分析.docx
第25周-第06章节-Python3.5-JSONP跨域请求jQuery方式.avi
本文主要介绍了jsonp跨域请求实现示例。具有很好的参考价值。下面跟着小编一起来看下吧
基于jQuery的jsonp ajax跨域请求,
了解了jsonp之后,大家应该也都明白了,jsonp主要就是用来实现跨域的获取数据,今天我们就来详细探讨下如何在实际中应用jsonp实现跨域
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。接下来通过本文给大家介绍JSONP跨域请求实例详解,感兴趣的朋友一起看下吧
主要为大家详细介绍了jsonp跨域请求的相关资料,激活了所有接口支持浏览器跨域请求的封装,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
主要介绍了原生js实现ajax请求和JSONP跨域请求操作,结合实例形式分析了基于原生js实现的ajax请求和JSONP跨域请求相关操作技巧与使用注意事项,需要的朋友可以参考下
主要介绍了jsonp跨域请求数据实现手机号码查询的方法,结合实例形式较为详细的分析了jsonp跨域请求数据的原理与查询号码的应用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
主要介绍了详解java 中Spring jsonp 跨域请求的实例的相关资料,jsonp 可用于解决主流浏览器的跨域数据访问的问题,需要的朋友可以参考下
主要介绍了Ajax jsonp跨域请求实现方法的相关资料,需要的朋友可以参考下
Javascript跨域访问是web开发者经常遇到的问题,什么是跨域,就是一个域上加载的脚本获取或操作另一个域上...下面这篇文章主要介绍了JavaScript用JSONP跨域请求数据的方法,需要的朋友可以参考借鉴,下面来一起看看吧。
当进行一些比较深入的前端编程的时候,不可避免地需要进行跨域操作,JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并且探讨下JSONP跨域的原理。
本文介绍了Vue2.0 vue-source jsonp 跨域请求,分享给大家,希望对大家有所帮助 以调用百度的输入提示接口为例 main.js import Vue from 'vue' import VueResouse from 'vue-resource' import App from './App....
本篇文章主要介绍了详解Java Ajax jsonp 跨域请求,具有一定的参考价值,感兴趣的小伙伴们可以参考一下