wap网站开发之解决Ajax跨域获取json数组的问题
最近在写一个 wap 网站,它是由服务器端提供一个接口，如：
http://192.168.1.122:8080/waptest1/indexImg.do
然后由在jsp页面中解析json数组并获得相应属性值。
等到了正式环境下我把 url 换成远程的 http://mobile.51bi.com/indexImg.do （见上传图片附件）
jsp 就访问不到数据了，我上网查了一下是 Ajax 跨域访问的问题。
解决：先通过 servlet 取出数据再交给 jsp,通过servlet中转了一下。
jsp代码：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>">
<title>My JSP 'mlkindex.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="css/mlkindex.css">
<script type='text/javascript' src='js/jquery-latest.js'></script>
<script type="text/javascript">
var url="<%=request.getContextPath()%>/MlkIndexServlet
";
var curIndex=0;
var arr=new Array();
$(function() {
$.post(url,function(data){
var json=eval("(" + data + ")");
for(var i=0;i<json["indexImg"].length;i++){
var temp=json["indexImg"][i];
arr[i]=temp.picture;
}
var pic='<img onclick="changeImg(this.id);" class="imgs" id="obj" src="'+json["indexImg"][0].picture+'" />';
$("#adimgs").html(pic);
});
});
function changeImg(obj){
var obj=document.getElementById("obj");
if (curIndex==arr.length-1)
{
curIndex=0;
}
else
{
curIndex+=1;
}
obj.src=arr[curIndex];
}
</script>
<script type="text/javascript">
$(function() {
$.post('http://192.168.1.122:8080/waptest1/MlkIndex2Servlet',function(data2){
var json2=eval("(" + data2 + ")");
var cai=json2["shareList"][4].msource;
var nav='<div class="test1"><table border=0 cellpadding=10 cellspacing=0 align="center"><tr>';
nav=nav+'<td><a href="mlk/mlkdetail.jsp?id='+json2["shareList"][0].id+'&msource='+json2["shareList"][0].msource+'&page=1"><img class="imgsize" ';
nav=nav+'src="'+json2["shareList"][0].picture+'"></img></a><br/><font color=#FF66FF>衣衣不舍</font></td>';
nav=nav+'<td><a href="mlk/mlkdetail.jsp?id='+json2["shareList"][1].id+'&msource='+json2["shareList"][1].msource+'&page=1"><img class="imgsize" ';
nav=nav+'src="'+json2["shareList"][1].picture+'"></img></a><br/><font color=#FF66FF>时尚潮包</font></td>';
nav=nav+'<td><a href="mlk/mlkdetail.jsp?id='+json2["shareList"][2].id+'&msource='+json2["shareList"][2].msource+'&page=1"><img class="imgsize" ';
nav=nav+'src="'+json2["shareList"][2].picture+'"></img></a><br/><font color=#FF66FF>最in美鞋</font></td>';
nav=nav+'</tr>';
nav=nav+'<table border=0 cellpadding=10 cellspacing=0 align="center"><tr>';
nav=nav+'<td><a href="mlk/caizhuang.jsp?id='+json2["shareList"][3].id+'&page=1"><img class="imgsize" ';
nav=nav+'src="'+json2["shareList"][3].picture+'"></img></a><br/><font color=#FF66FF>美妆护肤</font></td>';
nav=nav+'<td><a href="mlk/mlkdetail.jsp?page=1&id='+json2["shareList"][4].id+'&msource='+json2["shareList"][4].msource+'&page=1"><img class="imgsize" ';
nav=nav+'src="'+json2["shareList"][4].picture+'"></img></a><br/><font color=#FF66FF>诗意家居</font></td>';
nav=nav+'<td><a href="mlk/mlkdetail.jsp?id='+json2["shareList"][5].id+'&msource='+json2["shareList"][5].msource+'&page=1"><img class="imgsize" ';
nav=nav+'src="'+json2["shareList"][5].picture+'"></img></a><br/><font color=#FF66FF>甜美饰物</font></td>';
nav=nav+'</tr></div>';
$("#mlknav").html(nav);
});
});
</script>
</head>
<body>
<div class="head3">
<div class="head1">
<div class="back1"><input type="submit" value="返回" onclick="javascript :history.go(-1);"></div>
<div class="mlkicon"><a href="#"><img src="images/mlkindex/logo.jpg"/></a></div>
</div>
<!-- 四张轮换图片 -->
<div class="head2">
<div id="adimgs"></div>
</div>
</div>
<!--美丽控首页六张导航图片 -->
<div id="mlknav">
</div>
</body>
</html>
****************************************************
servlet代码：
注： 此处亦可参照本人的这篇文章： http://chenzheng8975.iteye.com/blog/1602301
package mlk.test.controller;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.net.URL;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class MlkIndexServlet extends HttpServlet {
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
URL url = new URL("http://mobile.51bi.com/indexImg.do
");
InputStream is = url.openStream();
byte[] b = new byte[is.available()];
is.read(b);
String resultString=new String(b, "utf-8");
String tempString=new String(resultString.getBytes("iso-8859-1"),"utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
System.out.println(resultString);
out.print(resultString);
is.close();
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
