Jquery,ajax 跨域访问

翻译 2015年11月20日 22:53:50

 Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料。

 

1.客户端

Html代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <title>Insert title here</title>  
  6. <script type="text/javascript" src="resource/js/jquery-1.7.2.js"></script>  
  7. </head>  
  8. <script type="text/javascript">  
  9. $(function(){     
  10.     /*  
  11.     //简写形式,效果相同  
  12.     $.getJSON("http://app.example.com/base/json.do?sid=1494&busiId=101&jsonpCallback=?",  
  13.             function(data){  
  14.                 $("#showcontent").text("Result:"+data.result)  
  15.     });  
  16.     */  
  17.     $.ajax({  
  18.         type : "get",  
  19.         async:false,  
  20.         url : "http://app.example.com/base/json.do?sid=1494&busiId=101",  
  21.         dataType : "jsonp",//数据类型为jsonp  
  22.         jsonp: "jsonpCallback",//服务端用于接收callback调用的function名的参数  
  23.         success : function(data){  
  24.             $("#showcontent").text("Result:"+data.result)  
  25.         },  
  26.         error:function(){  
  27.             alert('fail');  
  28.         }  
  29.     });   
  30. });  
  31. </script>  
  32. <body>  
  33. <div id="showcontent">Result:</div>  
  34. </body>  
  35. </html>  

 二.服务器端

Java代码  收藏代码
  1. import java.io.IOException;  
  2. import java.io.PrintWriter;  
  3. import java.util.HashMap;  
  4. import java.util.Map;  
  5. import javax.servlet.http.HttpServletRequest;  
  6. import javax.servlet.http.HttpServletResponse;  
  7. import net.sf.json.JSONObject;  
  8. import org.springframework.stereotype.Controller;  
  9. import org.springframework.web.bind.annotation.RequestMapping;  
  10.   
  11. @Controller  
  12. public class ExchangeJsonController {  
  13.     @RequestMapping("/base/json.do")  
  14.     public void exchangeJson(HttpServletRequest request,HttpServletResponse response) {  
  15.        try {  
  16.         response.setContentType("text/plain");  
  17.         response.setHeader("Pragma""No-cache");  
  18.         response.setHeader("Cache-Control""no-cache");  
  19.         response.setDateHeader("Expires"0);  
  20.         Map<String,String> map = new HashMap<String,String>();   
  21.         map.put("result""content");  
  22.         PrintWriter out = response.getWriter();       
  23.         JSONObject resultJSON = JSONObject.fromObject(map); //根据需要拼装json  
  24.         String jsonpCallback = request.getParameter("jsonpCallback");//客户端请求参数  
  25.         out.println(jsonpCallback+"("+resultJSON.toString(1,1)+")");//返回jsonp格式数据  
  26.         out.flush();  
  27.         out.close();  
  28.       } catch (IOException e) {  
  29.        e.printStackTrace();  
  30.       }  
  31.     }  
  32. }  

AJAX POST&跨域 解决方案 - CORS

CORS能做什么:      正常使用AJAX会需要正常考虑跨域问题,所以伟大的程序员们又折腾出了一系列跨域问题的解决方案,如JSONP、flash、ifame、xhr2等等。      本文介...
  • z69183787
  • z69183787
  • 2016年11月09日 17:49
  • 3201

jQuery ajax跨域请求的解决方法

由于JS同源策略的影响,因此js只能访问同域名下的文档。因此要实现跨域,一般有以下几个方法: 一、处理跨域的方式: 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Le...
  • wuyou1336
  • wuyou1336
  • 2017年02月07日 23:52
  • 2677

跨域解决方案之一---->JQuery.Ajax JSONP解决跨域访问

JSONP的最基本的原理是:动态添加一个标签,而script标签的src属性是没有跨域的限制的。本文后端使用servlet做测试:前端页面代码: Insert title here $(...
  • puyangmengxue
  • puyangmengxue
  • 2015年02月02日 13:33
  • 1131

jQuery Ajax 跨域请求

好记忆不如按烂笔头... ... 今天接到一个项目,让通过ajax 的方式去访问南方某公司,某系统的数据,所有东东都在html上展示,没有后台的操作。 给定了个url,规定传递的参数,其他就没有其...
  • supingemail
  • supingemail
  • 2015年09月06日 15:38
  • 2020

跨域解决方案 & 使用angularJS和jQuery进行Ajax请求的差异

前端同学李雷和后台同学韩梅梅分别在自己电脑上进行开发,后台接口写好的时候,李雷改动完就把前端代码上传到gitlab,然后在测试机上从gitlab上拉下来,然后在测试机上移动最新代码,最后回到本机刷新页...
  • u011366705
  • u011366705
  • 2015年10月31日 15:43
  • 3405

jquery中ajax处理跨域的三大方式

一、处理跨域的方式: 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Level2(及XHR2)已经实现了跨域访问。但ie10以下不支持 只需要在服务端填上响应头: ...
  • qq_35844359
  • qq_35844359
  • 2017年03月14日 16:09
  • 1179

AJAX跨域请求json数据的实现方法

这篇文章介绍了AJAX跨域请求json数据的实现方法,有需要的朋友可以参考一下 我们都知道,AJAX的一大限制是不允许跨域请求。 不过通过使用JSONP来实现。JSONP是一种通过脚本标记注入的方式,...
  • liuzp111
  • liuzp111
  • 2014年05月29日 14:06
  • 1546

用最简单的例子演示如何使用js或者$.ajax进行跨域请求

本文用一个最简单的例子演示如何使用javascript或者$.ajax进行跨域请求
  • lhtzbj12
  • lhtzbj12
  • 2016年12月29日 15:19
  • 1373

ASP.Net 跨域跳转域名 使用jquery ajax请求

解释思路: (一) 假设思路:a:8884/login.html登录选择不同服务器在url带参数[wyh]跳转 到 b:8885/login.html取出url参数[wyh],判断参数[...
  • qq_29596627
  • qq_29596627
  • 2016年08月06日 15:16
  • 529

ajax 跨域请求(后端语言为 Java)

ajax 跨域请求
  • liang_love_java
  • liang_love_java
  • 2016年09月01日 09:50
  • 4736
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery,ajax 跨域访问
举报原因:
原因补充:

(最多只允许输入30个字)