引言 隨著手機及移動設備的普及，移動端的應用也進入了熱潮。以前PC端的門戶網站，大多也均推出了適配移動設備的網站或者APP，再差的也註冊了個公眾號。在移動應用開發中，目前據我所瞭解到的解決方案有：1、原生態APP開發；2、適配移動設備的JS+HTML網站，套上跨平臺的“馬甲”；3、微信小程式及公眾號 ...
引言
隨著手機及移動設備的普及，移動端的應用也進入了熱潮。以前PC端的門戶網站，大多也均推出了適配移動設備的網站或者APP，再差的也註冊了個公眾號。在移動應用開發中，目前據我所瞭解到的解決方案有：1、原生態APP開發；2、適配移動設備的JS+HTML網站，套上跨平臺的“馬甲”；3、微信小程式及公眾號（其實和第2點一樣，套了微信的殼）。其中運用JS+HTML的應用占據大部分，這個比例是多少我沒有統計和查詢相關數據，反正就是很多吧。而JS+HTML移動開發中，大多採用的框架是，前端頁面加上WebService。因此，引出我們今天要說的話題：ajax調用handler，使用HttpWebRequest訪問WCF服務。說了這麼多，其實就是想表明：現在移動開發很熱，大家都採用“JS+HTML+WebService+套娃”這種架構，我分享的這個是給大家在這種架構中開發，提供一個解決方案。還是大白話適合我，不過偶爾也要裝裝逼，吹吹現在的互聯網+時代。
正文
言歸正傳，移動應用的開發採用 “JS+HTML+WebService+套娃”架構，以下均簡稱這種架構，前端通過JS（JQuery、React等等）和HTML進行呈現和業務操作，再通過ajax請求後臺服務數據，服務端以API形式開發介面（WebService、WCF等等）。.net平臺中，服務端採用WCF提供API介面，是不錯的選擇。出於安全考慮，服務端一般不直接開放給客戶端直接調用，客戶需通過web伺服器，中轉調用webservice。中轉的程式只寫一次就可以了，我這裡採用了一般處理程式handler。
首先，客戶端通過ajax調用handler：
function Commit1() {
var req = {};
req.Name = "測試1";
req.Age = "30";
var dvalue = JSON.stringify(req);
var para = { action: "GetPersonDetail", data: dvalue };
ajaxWCFService(para, false, CommitSuc);
}
function CommitSuc(data) {
data = $.parseJSON(data);
alert("Name:" + data.Name + "，Age:" + data.Age);
}
//調用服務介面
function ajaxWCFService(param, async, sucFunc) {
var hUrl = document.URL;
var pathName = document.location.pathname;
var pos = hUrl.indexOf(pathName);
var url = hUrl.substring(0, pos);
url += "/handle/BaseHandler.ashx";
$.ajax({
type: "post",
url: url,
data: param,
async: async,
success: sucFunc
});
}
Handler做為中轉，只開放給網站服務端，對客戶端不開放，通過HttpWebRequest訪問服務端，我這裡採用了WCF：
public void ProcessRequest(HttpContext context)
{
string action = context.Request["action"];
string Data = context.Request["data"];
//Data = "Name=testc&Age=30";
string url = "http://localhost:28380/Service1.svc/" + action;
//獲取服務端返回信息
string result = postSend(url, Data);
context.Response.Write(result);
}
public string postSend(string url, string param)
{
Encoding myEncode = Encoding.GetEncoding("UTF-8");
byte[] postBytes = Encoding.UTF8.GetBytes(param);
HttpWebRequest req = (HttpWebRequest)HttpWebRequest.Create(url);
req.Method = "POST";
req.ContentType = "application/x-www-form-urlencoded;charset=UTF-8";
req.ContentLength = postBytes.Length;
try
{
using (Stream reqStream = req.GetRequestStream())
{
reqStream.Write(postBytes, 0, postBytes.Length);
}
using (WebResponse res = req.GetResponse())
{
using (StreamReader reader = new StreamReader(res.GetResponseStream()))
{
string result = reader.ReadToEnd();
return result;
}
}
}
catch (WebException ex)
{
HttpWebResponse res = (HttpWebResponse)ex.Response;
StreamReader reader = new StreamReader(res.GetResponseStream());
string result = reader.ReadToEnd();
string IsSucceed = "false";
string ErrorMsg = "Hander:" + ex.Message + " StackTrace:" + ex.StackTrace+"\r\n ErrorResponse:" + result;
var success = new { IsSucceed, ErrorMsg };
return JSONHelper.ToJSON(success);
}
}
接著，WCF服務端首先是契約定義：
[OperationContract]
[WebInvoke(UriTemplate = "GetPersonDetail", Method = "POST", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json)]
Stream GetPersonDetail(Stream req);
WCF方法的實現：
public Stream GetPersonDetail(Stream stream)
{
StreamReader sr = new StreamReader(stream);
string s = sr.ReadToEnd();
sr.Dispose();
JObject jo = JObject.Parse(s);
string Name = jo["Name"].ToString();
string Age = jo["Age"].ToString();
var result = new Person()
{
IsSucceed = true,
Name = "Service Back:" + Name,
Age = "Service Back:" + Age
};
return new MemoryStream(Encoding.UTF8.GetBytes(JsonConvert.SerializeObject(result)));
}
至此，“JS+HTML+WebService+套娃”框架基本完成，後面就是添磚加瓦的工作的，只需要寫JS頁面操作及WCF數據訪問即可。
好了今天就寫到這，如果這篇文章對你有所幫助，請推薦一下！歡迎轉截，請註明出處！
