前段时间在做产品开发的时候,需要与公司网站那边进行交互,我们所开发的产品上线后是放在一个域名下,公司网站那块是在另一个域名下,这样在页面中调用
网站那边的接口时就存在跨域的问题,当时为了不修改网站那边的接口,所以采用在服务端通过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的一些知识。
分享到:
相关推荐
街道级行政区划shp矢量数据,wgs84坐标系,下载直接使用
街道级行政区划shp数据,wgs84坐标系,直接下载使用。
街道级行政区划shp矢量数据,wgs84坐标系,下载直接使用
轻量级密码算法LBlock的FPGA优化实现.docx
街道级行政区划shp矢量数据,wgs84坐标系,下载直接使用
Git 资料 progit-zh-v2.1.1.pdf
街道级行政区划shp数据,wgs84坐标系,直接下载使用。
篮球计分器FPGA附程序..doc
街道级行政区划shp数据,wgs84坐标系,直接下载使用。
内容概要:本文档全面介绍了Linux开发的基础知识、应用场景、环境搭建、常用命令、Shell脚本编程以及C/C++和Python开发等内容。首先阐述了Linux开发的重要性及其在服务器端开发、嵌入式开发和系统运维等领域的广泛应用。接着详细讲解了如何选择合适的Linux发行版并安装系统,配置开发环境,包括安装必要的开发工具和配置SSH服务。文档还深入讲解了Linux基础命令,如文件和目录操作、文件内容查看与编辑、进程管理和权限管理。此外,介绍了Shell脚本编程的基本语法,包括变量、条件语句、循环语句和函数定义。针对C/C++和Python开发,文档分别讲解了编译器安装、程序编写与编译、调试方法及使用虚拟环境等内容。最后,简要介绍了Linux内核开发的相关知识,包括下载编译内核、内核模块开发等,并推荐了相关学习资源。 适合人群:对Linux开发感兴趣的初学者及有一定经验的研发人员,尤其是希望深入掌握Linux开发技能的开发者。 使用场景及目标:①掌握Linux开发环境的搭建与配置;②熟悉Linux基础命令和Shell脚本编程;③学习C/C++和Python在Linux下的开发流程;④了解Linux内核开发的基本概念和技术。 阅读建议:此文档内容丰富,涵盖面广,建议读者根据自身需求选择性阅读,并结合实际操作进行练习。特别是对于初学者,应先掌握基础命令和开发环境的搭建,再逐步深入到编程语言和内核开发的学习。
街道级行政区划shp数据,wgs84坐标系,直接下载使用。
街道级行政区划shp数据,wgs84坐标系,直接下载使用。
街道级行政区划shp数据,wgs84坐标系,直接使用。
内容概要:本文档《word练习题.docx》是一份详细的Word操作练习指南,涵盖了从基础到高级的各种功能。文档分为三个主要部分:内容编辑、页面布局和高效文档。内容编辑部分包括文本格式化、段落设置、项目编号、制表位、边框与底纹等练习;页面布局部分涉及分节符、分栏、页眉页脚、水印等设置;高效文档部分则聚焦于样式管理、导航窗格、题注、书签、超级链接、脚注与尾注、交叉引用等功能。每个练习都有具体的操作步骤,帮助用户掌握Word的各种实用技巧。 适合人群:适用于Word初学者及希望提高Word技能的中级用户,尤其是需要频繁使用Word进行文档编辑和排版的办公人员。 使用场景及目标:①帮助用户熟悉Word的基本操作,如文本编辑、格式设置等;②提升用户的文档排版能力,学会设置复杂的页面布局;③提高工作效率,掌握高效文档管理技巧,如样式应用、题注和交叉引用等。 其他说明:此文档不仅提供了具体的练习题目,还附带了详细的步骤说明,用户可以根据指引逐步完成每个练习。此外,文档中的一些练习涉及到智能文档和Office智能客户端的应用,有助于用户了解Word在企业级应用中的潜力。建议用户按照章节顺序逐步学习,实践每一个练习,以达到最佳的学习效果。
街道级行政区划shp数据,wgs84坐标系,直接下载使用。
全球腐败感知数据(2000-2023)——3000行 33个指标 关于数据集 该数据集包含3000行和33列,涵盖了2000年至2023年的腐败感知指数(CPI)数据和各种治理指标。它包括国家排名、分数和其他指标,如公共部门腐败、司法腐败、贿赂指数、商业道德、民主指数、法治、政府效率、经济指标和人类发展指数。 这些数据可用于: 腐败趋势分析 腐败对GDP、人类发展指数和治理的影响 跨国比较 数据可视化和机器学习模型 该数据集对研究人员、数据分析师、政策制定者和对研究全球腐败趋势非常有用。
毕业设计(论文) 基于FPGA的数字频率计设计.doc
街道级行政区划shp数据,wgs84坐标系,直接使用。
NTI1NDU3NTAyODMwOTQxMzI0M18xNzQ0Nzk1MTk1OTgz_6.JPG
街道级行政区划shp数据,wgs84坐标系,直接下载使用。