前几天完成了一个客户端小功能,使用html页面登录,
代码中需要的jquery-1.6.4.min.js、jquery.mobile-1.0.min.js、jquery.mobile-1.0.min.css,请自己去官网上面下载吧
4、最后是一次http get请求,做一次业务的访问了。
主要参数CookieStr,httpclient里面会使用到。
如果我们拿到的jsonResponse的值不是null,就证明成功了。
拿到cookie之后,传递给httpclient完成业务逻辑的访问,现在把基本的流程整理记录一下。
首先来一张android工程的目录结构图吧,html、js文件都是放在assets下面的。
1、基本的html页面,index.html
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<div data-role="page" id="page_login">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<link rel="stylesheet" href="jquery.mobile-1.0.min.css" />
<script src="jquery-1.6.4.min.js"></script>
<script src="jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/login.js"></script>
<div data-role="header">
<h1>Login</h1>
</div><!-- /header -->
<div data-role="content" class='content'>
<div>
<label for="page_login_name">Username</label>
<input type="text" id="page_login_name" />
</div>
<div>
<label for="page_login_pass">Password</label>
<input type="password" id="page_login_pass" />
</div>
<fieldset>
<div><button type="button" data-theme="b" id="page_login_submit">Login</button></div>
</fieldset>
</div><!-- /content -->
</div><!-- /page -->
代码中需要的jquery-1.6.4.min.js、jquery.mobile-1.0.min.js、jquery.mobile-1.0.min.css,请自己去官网上面下载吧
注意版本之间的差别,之前因为版本的不对,纠结了下。
2、JS登录的代码,login.js
$('#page_login_submit').live('click', function(){
var name = $('#page_login_name').val();
if (!name)
{
alert('Please enter your user name.');
return false;
}
var pass = $('#page_login_pass').val();
if (!pass)
{
alert('Please enter your password.');
return false;
}
// BEGIN
$.ajax({
url: "http://172.23.10.100/?q=rest_services/user/login.json",
type: 'post',
data: 'username=' + encodeURIComponent(name) + '&password=' + encodeURIComponent(pass),
dataType: 'json',
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(JSON.stringify(XMLHttpRequest));
console.log(JSON.stringify(textStatus));
console.log(JSON.stringify(errorThrown));
alert('page_login_submit - failed to login');
},
success: function(data) {
alert(JSON.stringify(data));//注意,成功之后收到的data
}
});
// END
return false;
});
这里偷懒把成功返回的json文件直接通过alert,回传给webview了
具体的项目中,可以写个函数来接收
3、页面准备好了,下面我们开始webview的测试代码
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView)findViewById(R.id.webview);
WebSettings wSet = mWebView.getSettings();
wSet.setJavaScriptEnabled(true);
wSet.setJavaScriptCanOpenWindowsAutomatically(true);
//解决跨域访问的问题
try {
if (Build.VERSION.SDK_INT >= 16) {
Class<?> clazz = mWebView.getSettings().getClass();
Method method = clazz.getMethod(
"setAllowUniversalAccessFromFileURLs", boolean.class);
if (method != null) {
method.invoke(mWebView.getSettings(), true);
}
}
} catch (IllegalArgumentException e) {
e.printStackTrace();
} catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
mWebView.clearCache(true);
CookieManager.getInstance().removeSessionCookie();
mWebView.loadUrl(URL);
mWebView.setWebChromeClient(new WebChromeClient(){
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
//偷懒直接接收JS中传过来的msg
if(message.length() > 15){
mLoginBackJson = message;
Log.i(TAG, "mLoginBackJson = " + mLoginBackJson);
if(parseJson(mLoginBackJson)){//解析传回的json文件,成功的话,进行一次业务的访问
new MyTask().execute(ConfigUrl.ALL_CONTENT_VIEW);
}
//return true;
}
//保存一下cookie,后面httpclient使用
CookieManager cookieManager = CookieManager.getInstance();
CookieStr = cookieManager.getCookie(COOKIE_URL);
return super.onJsAlert(view, url, message, result);
}
});
}
activity_main.xml文件就比较简单了,只有一个webview。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<WebView
android:id ="@+id/webview"
android:layout_width ="match_parent"
android:layout_height ="match_parent"
/>
</RelativeLayout>
4、最后是一次http get请求,做一次业务的访问了。
String jsonResponse = UtilHttp.executeGet(url + "&sessid=" + mSessionId + "&session_name=" + mSessionName,
null, CookieStr);
主要参数CookieStr,httpclient里面会使用到。
public static DefaultHttpClient getHttpClient(){
BasicHttpParams httpParams = new BasicHttpParams();
HttpConnectionParams.setConnectionTimeout(httpParams, REQUEST_TIMEOUT);
HttpConnectionParams.setSoTimeout(httpParams, SO_TIMEOUT);
DefaultHttpClient client = new DefaultHttpClient(httpParams);
return client;
}
public static String executeGet(String url, List<BasicHeader> dataList, String cookie) {
try {
StringBuffer sbResult = new StringBuffer();
DefaultHttpClient client = getHttpClient();
if(dataList != null && dataList.size() > 0)
{
url+="?";
for(BasicHeader h:dataList){
url+=h.getName()+"="+h.getValue()+"&";
}
}
HttpGet httpGet = new HttpGet(url);
httpGet.setHeader("Cookie", cookie);//设置cookie
HttpResponse response = client.execute(httpGet);
sbResult = getResponse(sbResult, response);
Log.d(TAG,"executeGet url = "+url + " StatusCode:"+response.getStatusLine().getStatusCode());
if( response.getStatusLine().getStatusCode() != HttpStatus.SC_OK )
return null;
return sbResult.toString();
}catch (TimeoutException e) {
Log.d(TAG,"executeGet TimeoutException..");
return "timeout";
}catch (SocketTimeoutException e) {
Log.d(TAG,"executeGet SocketTimeoutException..");
return "timeout";
}catch (ConnectTimeoutException e) {
Log.d(TAG,"executeGet ConnectTimeoutException..");
return "timeout";
}catch(Exception e){
e.printStackTrace();
}
return null;
}
如果我们拿到的jsonResponse的值不是null,就证明成功了。