轉自原文 在Html5中與服務器交互
剛剛涉足職場，上頭就要我研究HTML5,內嵌到手機上，這對我來說完全是一個陌生的領域，不過也正好給自己一個機會來學習，最近做到要跟服務器交互這部分，這部分可是卡了很久，不過最終還是解決了。下面介紹兩種方法：
- ajax
- Cordova Http
首先要說明一點，如果是在PC端上進行交互的話，這就是跨域問題，需要服務器那邊進行一些修改，否則的話是不能訪問的。我一開始也是在PC端上測試的，所以這個問題一直卡了很久，原來只要內嵌到手機上就不存在跨域問題了，真蛋疼~，所以我介紹的兩張方法都是基於內嵌到手機上的，要注意了！
ajax及使用
如果是用原生態的ajax寫訪問的話，就比較麻煩，所以這次我用的是jQuery封裝好的ajax，先上代碼：
$.ajax({
type:"GET",
url:"***",
dataType:"json",
data:{
appId:"",
passportCode:"*******",
clientTye:"android",
},
success:function(data){
alert("訪問成功" + JSON.stringify(data));
},
error:function(jqXHR){
alert("發生錯誤" + jqXHR.status);
}
});
這里面有好幾個字段，這幾個字段的意思是：
| 字段 | 描述 |
|---|---|
| type | 指明是get操作還是post操作 |
| url | 要訪問的地址，就是服務器提供的接口 |
| dataType | 服務器預期返回的數據格式，如(xml,json,html) |
| data | 參數 |
| success | 訪問成功時的回調函數 |
| error | 訪問失敗時的回調函數 |
補充說一下：success:function(data,textStatus,jqXHR)這三個參數是可選的，我習慣就只帶一個參數，就是data。這個返回的data已經是json對象來的，可以直接解析的。假如返回的是
{
result:0,
description : ””,
hasNewVersion : ””,
verson: “”,
url：““,
clientType:““ ,
updateDesc：““ ,
updateTime：““ ,
mustUpdate:””
}，
那么data.result就是0了，是不是覺得很方便呢。效果圖：
Cordova Http
這種方法是要基於你的項目是cordova項目。這里稍微說兩句，cordova前身是phoneGap，其實兩者是一樣的，都是移動web的開發框架，有興趣的可以去了解一下！由於這篇文章(Cordova環境安裝配置 )主要是講如何使用這個插件，環境搭建的就不說了。
-
安裝插件
在命令行里面進入到自己的項目里面：
點擊回車，等待一會就可以了，再打開自己的項目的plugins，就可以看到cordova-plugin-http這個文件，證明插件安裝成功了！
-
使用
cordovaHTTP.post("url地址", {
appId:"",
phone:"",
password:"",
clientTye:"web", //參數
}, {//這個我基本一直都是空的},
function(response) { //成功回調的函數
// prints 200
alert(response.status + "訪問成功" + "\n返回的json數據 為：" + response.data);
try {
//轉化為json對象
var jsonbj = JSON.parse(response.data);
} catch(e) {
console.error("JSON parsing error");
}
}, function(response) { //失敗回調的函數
// prints 403
alert("訪問失敗" + response.status + "、" + response.data);
//prints Permission denied
console.log(response.error);
});
這個也沒什么好說的，看完之后也明白的了。
具體請參考[https://github.com/wymsee/cordova-HTTP][2].
其實這個難度也不是很大的，只要看一下就知道怎樣用了，希望對大家和對自己也有用！