PhoneGap實現跨域ajax訪問的demo

相關鏈接 ： PhoneGap   PhoneGap中國  入門教程

前幾天瞭解一下PhoneGap 覺得很方便 可以輕鬆實現跨手機平臺 對於從事web開發的程序員來說 移動開發變得很簡單

回去試了下搭建第一PhoneGap    使用的是Android開發平臺 由於快一年沒碰android的 所以環境比較老

下載的PhoneGap 2.7.0的裏面的demo  import竟然不識別  只能按照demo中的android例子 複製修改文件

後來在公司打算搭建andorid環境 下載了eclipse 然後打算下載adt 以及sdk  後來發現  現在adt中直接有eclipse 直接集成了開發環境 就方便多了

新版本的android環境可以直接import PhoneGap裏面的例子

目錄結構  如下圖

/assets/www 下就是我們的界面區 

/cordova 和 /libs 是PhoneGap的一些配置和jar 我們都不需要動

另外 activity繼承了 PhoneGap的類  

AndroidManifest.xml 中需要配置本地訪問的相關權限

啓動後的界面 其實是一個html5的靜態頁面   

我們要做的就是替換這個界面 然後換成我們的系統界面

------------------------------------------------------------------------------------------------------------------------------------

注： 加入我們啓動後 想load某個遠程url頁面

public void onCreate(Bundle savedInstanceState) { 
       super.onCreate(savedInstanceState); 
       super.setBooleanProperty("loadInWebView", true); 
       //super.loadUrl("file:///android_asset/www/index.html"); 
       super.loadUrl("http://www.baidu.com"); 
}

super.setBooleanProperty("loadInWebView", true);需要加上這個

------------------------------------------------------------------------------------------------------------------------------------

下面我們對原有頁面進行修改 html中添加

<a href="http://www.baidu.com" >點我一下</a><br>
                
<input name="name" class="name">
<a href="javascript:void(0)" class="button1">click</a>

/assets/www/ 下拷入 jquery的引用 以及對應js

html中添加js

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
        <script>
        $(function(){
        	$(".button1").bind("click",function(){
        		var name = $(".name").val();
        		var url = "http://lujianing.xxx.com/xxx/test.jsp?jsoncallback=?&name="+name;				
					$.ajax({
					        type:"get",
					        cache:false,
					     	url: url,
					        global:false,				          
							dataType: "json",
							success: function(data){								
								alert(data.succ);								
							}
					});					
        	});
        });
        </script>

遠端服務器代碼

<%@ page contentType="application/json; charset=utf-8" %>
<%@page import="java.math.BigDecimal"%>
<% response.setHeader("Cache-Control","no-store"); %>
<% response.setDateHeader("Expires",0);%>
<%@ page import="java.util.*" %><%@ page import="net.sf.json.*"%>

<%!
	String jsonCall(String callName,JSONObject jsonObject ){
		return callName+"("+jsonObject+")";
	}
%>

<%	
	
	String _JSONCALLBACK = request.getParameter("jsoncallback");	
	String name = request.getParameter("name");
	Map map = new HashMap();
	map.put("succ","hello "+name);
	JSONObject jsonObject = JSONObject.fromObject(map);
	out.print(jsonCall(_JSONCALLBACK, jsonObject ));
%>

PhoneGap 在文本框 輸入lu 點擊click