jsonp解决ajax跨域问题

2024-06-13 14:38
文章标签 问题 解决 ajax 跨域 jsonp

本文主要是介绍jsonp解决ajax跨域问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

  JSON和JSONP


  Json(Javascript Object Notaion)是一种轻量级的数据交换格式。Json采用完全独立于语言的文本格式,但是

也是用了类似于C语言家族的习惯(包括C,C++,C#,Java,Javascript,Perl,Python等)。这些特性使Json成为

理想的数据交换语言。

  Jsonp(Json with padding)是json的一种“使用模式”,可以让网页从别的域名(网站)那获取资料,即跨域

读取数据。

  为什么我们从不同的域(网站)访问数据需要一个特殊的技术(Jsonp)呢?这是因为同源策略。

  同源策略:它是由Netscape提出的一个著名的安全策略。现在所有支持Javascript的浏览器都会使用这个策略。

所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开百度和谷歌的页面,当一个百度浏览

器执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。


  JSONP应用


  Html页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
<script type="text/javascript" src="resource/js/jquery-1.7.2.js"></script>  
</head>  
<script type="text/javascript">  
$(function(){     /*  //简写形式,效果相同  $.getJSON("http://app.example.com/base/json.do?sid=1494&busiId=101&jsonpCallback=?",  function(data){  $("#showcontent").text("Result:"+data.result)  });  */  $.ajax({  type : "get",  async:false,  url : "http://app.example.com/base/json.do?sid=1494&busiId=101",  dataType : "jsonp",//数据类型为jsonp  jsonp: "jsonpCallback",//服务端用于接收callback调用的function名的参数  success : function(data){  $("#showcontent").text("Result:"+data.result)  },  error:function(){  alert('fail');  }  });   
});  
</script>  
<body>  
<div id="showcontent">Result:</div>  
</body>  
</html>

  Controller:

    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 net.sf.json.JSONObject;  import org.springframework.stereotype.Controller;  import org.springframework.web.bind.annotation.RequestMapping;  @Controller  public class ExchangeJsonController {  @RequestMapping("/base/json.do")  public void exchangeJson(HttpServletRequest request,HttpServletResponse response) {  try {  response.setContentType("text/plain");  response.setHeader("Pragma", "No-cache");  response.setHeader("Cache-Control", "no-cache");  response.setDateHeader("Expires", 0);  Map<String,String> map = new HashMap<String,String>();   map.put("result", "content");  PrintWriter out = response.getWriter();       JSONObject resultJSON = JSONObject.fromObject(map); //根据需要拼装json  String jsonpCallback = request.getParameter("jsonpCallback");//客户端请求参数  out.println(jsonpCallback+"("+resultJSON.toString(1,1)+")");//返回jsonp格式数据  out.flush();  out.close();  } catch (IOException e) {  e.printStackTrace();  }  }  }

  这就是jsonp的简单实现模式:创建一个回调函数,然后在远程服务器上调用这个函数并且将Json数据形式作为参

数传递,完成回调。这也侧面说明了Jsonp的含义:将Json数据填充进回调函数。

这篇关于jsonp解决ajax跨域问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1057592

相关文章

使用雪花算法产生id导致前端精度缺失问题解决方案

《使用雪花算法产生id导致前端精度缺失问题解决方案》雪花算法由Twitter提出,设计目的是生成唯一的、递增的ID,下面:本文主要介绍使用雪花算法产生id导致前端精度缺失问题的解决方案,文中通过代... 目录一、问题根源二、解决方案1. 全局配置Jackson序列化规则2. 实体类必须使用Long封装类3.

Idea插件MybatisX失效的问题解决

《Idea插件MybatisX失效的问题解决》:本文主要介绍Idea插件MybatisX失效的问题解决,详细的介绍了4种问题的解决方法,具有一定的参考价值,感兴趣的可以了解一下... 目录一、重启idea或者卸载重装MyBATis插件(无需多言)二、检查.XML文件与.Java(该文件后缀Idea可能会隐藏

Nginx 访问 /root/下 403 Forbidden问题解决

《Nginx访问/root/下403Forbidden问题解决》在使用Nginx作为Web服务器时,可能会遇到403Forbidden错误,文中通过示例代码介绍的非常详细,对大家的学习或者工作... 目录解决 Nginx 访问 /root/test/1.html 403 Forbidden 问题问题复现Ng

Python的pip在命令行无法使用问题的解决方法

《Python的pip在命令行无法使用问题的解决方法》PIP是通用的Python包管理工具,提供了对Python包的查找、下载、安装、卸载、更新等功能,安装诸如Pygame、Pymysql等Pyt... 目录前言一. pip是什么?二. 为什么无法使用?1. 当我们在命令行输入指令并回车时,一般主要是出现以

Nginx部署React项目时重定向循环问题的解决方案

《Nginx部署React项目时重定向循环问题的解决方案》Nginx在处理React项目请求时出现重定向循环,通常是由于`try_files`配置错误或`root`路径配置不当导致的,本文给大家详细介... 目录问题原因1. try_files 配置错误2. root 路径错误解决方法1. 检查 try_f

Python解决雅努斯问题实例方案详解

《Python解决雅努斯问题实例方案详解》:本文主要介绍Python解决雅努斯问题实例方案,雅努斯问题是指AI生成的3D对象在不同视角下出现不一致性的问题,即从不同角度看物体时,物体的形状会出现不... 目录一、雅努斯简介二、雅努斯问题三、示例代码四、解决方案五、完整解决方案一、雅努斯简介雅努斯(Janu

MySQL索引失效问题及解决方案

《MySQL索引失效问题及解决方案》:本文主要介绍MySQL索引失效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql索引失效一、概要二、常见的导致MpythonySQL索引失效的原因三、如何诊断MySQL索引失效四、如何解决MySQL索引失

一文教你如何解决Python开发总是import出错的问题

《一文教你如何解决Python开发总是import出错的问题》经常朋友碰到Python开发的过程中import包报错的问题,所以本文将和大家介绍一下可编辑安装(EditableInstall)模式,可... 目录摘要1. 可编辑安装(Editable Install)模式到底在解决什么问题?2. 原理3.

Redis中的数据一致性问题以及解决方案

《Redis中的数据一致性问题以及解决方案》:本文主要介绍Redis中的数据一致性问题以及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、Redis 数据一致性问题的产生1. 单节点环境的一致性问题2. 网络分区和宕机3. 并发写入导致的脏数据4. 持

vscode不能打开终端问题的解决办法

《vscode不能打开终端问题的解决办法》:本文主要介绍vscode不能打开终端问题的解决办法,问题的根源是Windows的安全软件限制了PowerShell的运行,而VSCode默认使用Powe... 遇到vscode不能打开终端问题,一直以为是安全软件限制问题,也没搜到解决方案,因为影响也不大,就没有管