使用Jsonp方式跨域获取json

 

 以前遇到过ajax跨域的问题，自己也写过一个简单的servlet 请求代理 来解决过同源策略带来的ajax跨域问题，详细见这个

 

http://8366.iteye.com/blog/452441

 

 

 今天在网上发现 使用JQuery+Jsonp 也可以解决ajax跨域问题

 

首先看下 jsonp 是如何解决跨域问题的，详细见 下面两篇文章

 

使用 JSONP 实现跨域通信，第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup

http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/

 

 

使用 JSONP 实现跨域通信，第 2 部分: 使用 JSONP、jQuery 和 Yahoo! 查询语言构建 mashup

 

http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp2/

 

 

 

 一个JQuery+jsnop 跨域的例子

 

步骤：

 

 1.在tomcat中配置两个web项目 一个是 /oa  ，一个是/jofc2

 

 2.在/oa项目中有个testJQuery.jsp 中发送一个ajax请求到 http://localhost:9090/jofc2/ajax.jsp?callback=? 这是一个跨域请求

 

 3.在testJQuery.jsp  中接受跨域请求的结果

 

实现步骤：

 

 

1. ajax请求代码 必须是get方式

//使用jsonp 跨域访问 
	$.ajax({
		 type: "get",
		//url: "http://www.cnblogs.com/rss",
	    //  url: "http://suggest.taobao.com/sug?code=utf-8&q=mp3&callback=callback",
	    url: "http://localhost:9090/jofc2/ajax.jsp?callback=?",
	  // url: "http://133.64.80.9:9082/bz/ajax.jsp?callback=?",
		beforeSend: function(XMLHttpRequest){
			//ShowLoading();
		},
		dataType : "jsonp",   
   		jsonp: 'callback',
		success: function(data,textStatus){
			$("#loadrss").html("1234");
			//alert(textStatus);
			alert(data.length);
			alert(data[0].name);
			alert(data[1].name);
			
			$(data).each(function(i, item){
				//jquery 处理html 数据 ，找title 元素
				//$("#loadrss").append("<li>"+$(domEle).children("title").text()+"</li>");
				//jquery 处理Json 数据
				$("#loadrss").append("<li>"+item.name+"</li>");
			});
		},
		complete: function(XMLHttpRequest, textStatus){
			//HideLoading();
		},
		error: function(){
			//请求出错处理
		}
		});

 

 

 

 2. 服务器端 业务处理，把处理结果写到输出流里 注意输出流利json串的写法

 

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@page import="java.io.PrintWriter"%>


<%
	//服务器端接到回调函数名字输出回调函数，客户端根据回调函数进行解析取得函数中json对象    
	response.setContentType("text/html; charset=utf-8");    
	String callback=request.getParameter("callback");    
	PrintWriter ss = response.getWriter();    
	ss.print(callback+"([ { name:\"跨域访问成功！\"},{ name:\"跨域访问失败！\"}])");    

%>  

 

 

3.这样前台就可以跨域访问资源了，这种解决方案不足之处是：a.服务器端和客户端必须都按照jsnop的方式 b.不能捕获异常

 

4.测试时候 访问 http://localhost:9090/oa/testJQuery.jsp