JQuery 利用 Ajax 呼叫Web Service
在撰寫Project 我們有時會需要編寫在生產線現場使用的程式 , 考慮到現場的效率因此我們無法使用ASP.NET 撰寫
因為ASP.NET 的程式碼是在Server處理的 , 當Client傳處理需求到Server 處理完成送回Client 花費的時間會太長而不適用
因此現場的程式大都已Javascript 作撰寫 , 但是問題來了 Javascript 的撰寫以及除錯
跟ASP.NET 比起來又難上很多….為了兩全其美
我建議各位面對這個問題以JQuery 呼叫 Web Server 的方式處理邏輯
就可以兼顧雙方的優點並滿足使用者的需求
jQuery 官方網站
在這裡可以下載到需要使用的檔案以及教學手冊
有興趣的人可以逛逛看~~~~~~
使用方式
在實地介紹時請先按照下列步驟進行前置作業
l 請先建立一個最基本的網站配置
l 請將jQuery物件檔案放到Scripts下面 (jquery-1.4.1.js , jquery.json-1.3.js)
建立測試WebService 檔案TestWebService.asmx
TestWebService.asmx內容
<%@ WebService Language="VB" Class="TestWebService" %>
Imports System
Imports System.Linq
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services
Imports System.Threading
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<ScriptService()> _
Public Class TestWebService
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function ExcuteWebService(ByVal Data As String,ByValallowCheck As Boolean) As String
Dim result As String
If allowCheck = True Then
result = "Hello " + Data + " You are my firend"
Else
result = "Hello " + Data + " You are not my firend"
End If
Return result
End Function
End Class
測試主頁Default.aspx
<%@ Page Title="Home Page" Language="VB"MasterPageFile="~/Site.Master" AutoEventWireup="false"
CodeFile="Default.aspx.vb" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server"ContentPlaceHolderID="HeadContent">
<style type="text/css">
#Button1
{
width: 147px;
}
</style>
<script src="<%=Me.ResolveUrl("~/Scripts/jquery-1.4.1.js")%>"type="text/javascript"></script>
<script src="<%=Me.ResolveUrl("~/Scripts/jquery.json-1.3.js")%>"type="text/javascript"></script>
<script type="text/javascript">
function YesRadio_Click() {
var noradioObject = document.getElementById("NoRadio");
noradioObject.checked = false;
}
function NoRadio_Click() {
var yesradioObject = document.getElementById("YesRadio");
yesradioObject.checked = false;
}
function StartButton_Click() {
var yesradioObject = document.getElementById("YesRadio");
var noradioObject = document.getElementById("NoRadio");
var nametextObject = document.getElementById("NameText");
var check;
if (noradioObject.checked == true) {
check = false;
}
if (yesradioObject.checked == true) {
check = true;
}
var data = { "Data": nametextObject.value, "allowCheck": check};
var jsonData = $.toJSON(data);
$.ajax({
type: 'post',
url: "Service/TestWebService.asmx/ExcuteWebService",
contentType: "application/json;utf-8",
data: jsonData,
dataType: "json",
async: false,
success: function (result) {
alert(result.d);
},
error: function (result) {
var error = $.evalJSON(result.responseText);
alert(error.Message);
}
});
}
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server"ContentPlaceHolderID="MainContent">
<h2>
Welcome to ASP.NET!
</h2>
<p>
Please Enter your name <input id="NameText" type="text"/></p>
<p>
Do you like write program Yes<inputid="YesRadio"
type="radio" value ="Yes" onclick="YesRadio_Click();"checked="checked" />
No<input id="NoRadio" type="radio" value = "No"onclick="NoRadio_Click();" /></p>
<p>
<input id="StartButton" type="button" value="Call Web Service"onclick="StartButton_Click();" /></p>
</asp:Content>
測試結果
程式細部說明
以下將針對最重要的Call Web Service 的部分做說明其他部分就不講了
//建立傳入參數
var data = { "Data": nametextObject.value, "allowCheck": check};
var jsonData = $.toJSON(data);
//實地執行Call WebServer
$.ajax({
type: 'post',
url: "Service/TestWebService.asmx/ExcuteWebService",
contentType: "application/json;utf-8",
data: jsonData,
dataType: "json",
async: false,
// success:當Web Service 成功時所要做的後續處理
success: function (result) {
alert(result.d);
},
// error:當Web Service 失敗時所要做的後續處理
error: function (result) {
var error = $.evalJSON(result.responseText);
alert(error.Message);
}
});
基本上Java 使用jquery 使用Web Service 就是這麼簡單
這樣就可以兼顧效率以及使用除錯方便這兩個要點摟~~~~~
以上教學歡迎轉載但是請註明源頭來自
胖雀鳥的妄想天地http://tw.myblog.yahoo.com/big-suzume
來源:
http://blog.xuite.net/stua810654/twblog/111666916-JQuery+%E5%88%A9%E7%94%A8+Ajax+%E5%91%BC%E5%8F%ABWeb+Service
留言列表
