解决jQuery的AJAX跨域取xml问题

最新推荐文章于 2021-08-05 14:55:05 发布

iteye_18713

最新推荐文章于 2021-08-05 14:55:05 发布

阅读量489

点赞数

分类专栏： JavaScript 文章标签： XML Ajax jQuery Servlet REST ViewUI

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

问题描述：
1.根据已知的url，获取url中的id，然后拼接出另一个url，去获取该id对应的值。
举例：
已知url：http://video.guoshi.com/play/index/4b6a3c233b4cb.html?peixun=1&start=680000
获取id 为:4b6a3c233b4cb
拼接的url:http://video.guoshi.com/rest-video?id=4b6a3c233b4cb
2.通过浏览器可以观察到上面url的内容是：


  <?xml version="1.0" encoding="utf-8" ?> 
<packet version="1.0.0">
  <status>success</status> 
 <data>
 <item>
  <id>4b6a3c233b4cb</id> 
  <count_view>43</count_view> 
  <updated>2010-03-04 17:08:28</updated> 
  </item>
  </data>
  </packet>

3.目标就是取到这个xml中的<count_view>43</count_view>的41
4.采用jQuery的ajax实现.

问题：这个url跟我的系统不是同一个域.涉及到了ajax的跨域问题.由于不能通过修改用户IE的 Internet选项-安全-自定义安全-跨域浏览资源启用，所以这个问题就显得棘手了。

5.思路：
1)自己做一个servlet,让ajax访问自己的servlet来获取这个xml.
2)servlet接收id参数.然后输出对应的xml
3)servlet中采用java的HttpURLConnection来获取原地址的源代码,然后输出.
4)注意设置编码utf-8,类型text/xml

6.servlet：GetClickNum


public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {


		String id=request.getParameter("id");
		String url="http://video.guoshi.com/rest-video?id="+id;
		String curLine = "";
		String content = "";
		URL server=new URL(url);
		HttpURLConnection connection = (HttpURLConnection) server.openConnection();
		connection.connect();
		InputStream is = connection.getInputStream();
		BufferedReader reader = new BufferedReader(new InputStreamReader(is));
		while ((curLine = reader.readLine()) != null) {
			content = content + curLine + "";
		}
		is.close();
		response.setContentType("text/xml");
		response.setCharacterEncoding("utf-8");

		ServletOutputStream   out = response.getOutputStream();
		out.print(content);
	}

这样原来的 http://video.guoshi.com/rest-video?id=4b6a3c233b4cb
就转换成 /GetClickNum?id=4b6a3c233b4cb
跨域问题解决！

7.js


$('#rows').find('li').each(function(){
		var url=$(this).find('a[id=videoUrl]').attr('href');
		var b=url.lastIndexOf('index');
		var e=url.lastIndexOf('.');
		var id= url.substring(b+6,e); //the id
		var $li=$(this);
		$.ajax({
			type:"POST",
			url :"GetClickNum",
			data:"id="+id,
			timeout:10000,
			success : function(xml) {
					var val=$(xml).find("data>item>count_view").text();
					$li.find('b[id=click]').html("点击量："+val);
					//alert(val);
				}
			});
	});

总结：
本文解决ajax跨域问题的思路就是将跨域变成不跨域.将对方服务器的servlet功能由自己的servlet来实现！

具体应用：

http://www.guoshi.com/trainDetails.jsp?q=设计实验验证推测：二氧化硫的化学性质