javascript與webservice的通信實現(xiàn)代碼

更新時間：2010年12月25日 23:16:24 作者：

關于javascript與webservice的通信，從理論上來說實現(xiàn)應該不難，主要是將服務器端的xml數(shù)據(jù)進行一個簡單的處理然后以一種適當?shù)男问秸宫F(xiàn)成來。

在我這里，我選擇將xml直接轉換為json，以便后續(xù)javascript應用的處理。我使用.net平臺構建簡單的webservice。
Request.asmx

 
using System; 
using System.IO; 
using System.Collections; 
using System.Collections.Generic; 
using System.ComponentModel; 
using System.Web; 
using System.Web.Services; 
using System.Web.Services.Protocols; 
using System.Drawing; 
using System.Drawing.Imaging; 
namespace NightKidsServices 
{ 
/// <summary> 
/// Service1 的摘要說明 
/// </summary> 
[WebService(Namespace = "http://tempuri.org/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
[ToolboxItem(false)] 
public class TestService :WebService 
{ 
private static int picNum = -1; 
[WebMethod] 
public Resource GetResource() 
{ 
return Resource.CreateResource("pic2", "asdfasd", 0); 
} 
[WebMethod] 
public string HelloWorld() 
{ 
return "Hello"; 
} 
[WebMethod] 
public byte[] GetPic() 
{ 
picNum = (picNum + 1) % 32; 
Image image = Image.FromFile(this.Server.MapPath("jpeg/" + (picNum+1).ToString() + ".bmp")); 
MemoryStream mem=new MemoryStream(); 
image.Save(mem, ImageFormat.Jpeg); 
return mem.GetBuffer(); 
} 
[WebMethod] 
public List<Resource> GetResourceList() 
{ 
return new List<Resource>(new Resource[] { Resource.CreateResource("pic1", "jpeg/1.bmp", 0),Resource.CreateResource("pic2", "jepg/2.bmp", 0), Resource.CreateResource("pic3", "jpeg/3.bmp", 0), Resource.CreateResource("pic4", "jepg/4.bmp", 0) }); 
} 
} 

以上只是一個簡單的測試使用，便于后續(xù)使用javascript處理不同類型的數(shù)據(jù)
對于javascript，肯定是使用xmlhttprequest對象來訪問服務器端的，不過這里為了簡單，我沒有考慮兼容性問題，直接使用xmlhttprequest對象（我使用chrome瀏覽器作為測試瀏覽器)，為此我使用AjaxClient類來進行http操作(Post 方法)，WebService類來封裝處理webservice（調用AjaxClient類作為操作類),JsonConverter類處理xml數(shù)據(jù)轉換為json數(shù)據(jù)
common.js(包含JsonConverter類)

復制代碼代碼如下:

 
// JavaScript Document 
function $(id) 
{ 
return document.getElementById(id); 
} 
function GetXmlHttp() 
{ 
if(window.XMLHttpRequest) 
return new XMLHttpRequest(); 
} 
var JsonConverter={}; 
JsonConverter.FlagStack=[]; 
JsonConverter.ConvertFromXML=function(xmlRootNode) 
{ 
if(!xmlRootNode) 
return; 
var converter={}; 
converter.render=function(node,isArrayElement) 
{ 
var returnStr=''; 
var isArray=false; 
if(node.childNodes.length==1) 
{ 
returnStr+=node.nodeName+':' + "'" + node.firstChild.nodeValue + "'" ; 
if(node==xmlRootNode) 
returnStr='{' + returnStr + '}'; 
return returnStr; 
} 
isOneNode=false; 
if(node.nodeName.match("ArrayOf*")) 
isArray=true; 
if(isArray) 
returnStr+='['; 
else 
{ 
returnStr+='{'; 
if(!(isArrayElement || xmlRootNode==node)) 
returnStr=node.nodeName + ':' + returnStr; 
} 
for(var i=1;i<node.childNodes.length;i+=2) 
{ 
returnStr+=this.render(node.childNodes[i],isArray) + ','; 
} 
returnStr=returnStr.slice(0,-1); 
if(isArray) 
returnStr+=']'; 
else 
returnStr+='}'; 
return returnStr; 
} 
//alert(converter.render(xmlRootNode)); 
return eval('(' + converter.render(xmlRootNode) + ')'); 
} 

AjaxClient.js

復制代碼代碼如下:

 
// JavaScript Document 
function AjaxClient(url) 
{ 
var xmlhttp=GetXmlHttp(); 
var request_url=url; 
var msgList=new Array(); 
var isOpen=false; 
var isRunning=false; 
xmlhttp.onreadystatechange=function() 
{ 
if(xmlhttp.readyState==xmlhttp.DONE) 
{ 
isRunning=false; 
if (xmlhttp.status==200) 
{ 
msgList.push(xmlhttp.responseXML); 
} 
} 
} 
this.Open=function() 
{ 
if(xmlhttp==null) 
xmlhttp=GetXmlHttp(); 
isOpen=true; 
if(xmlhttp==null) 
isOpen=false; 
} 
this.Send=function(msg) 
{ 
if (isOpen) 
{ 
xmlhttp.open("POST",request_url,false); 
//alert(request_url); 
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
xmlhttp.setRequestHeader("Content-length",msg==null?0:msg.length); 
//xmlhttp.setRequestHeader("Keep-Alive","ON"); 
xmlhttp.send(msg==null?"":msg); 
isRunning=true; 
} 
} 
this.GetUrl=function() 
{ 
return request_url.length==0?'':request_url; 
} 
this.SetUrl=function(url) 
{ 
request_url=url; 
} 
this.Receive=function() 
{ 
var num=0; 
while(!msgList.length) 
{ 
num++; 
if (num>=20000) 
break; 
} 
return msgList.length==0?null:msgList.shift(); 
} 
this.Close=function() 
{ 
if(!isRunning) 
{ 
isOpen=false; 
xmlhttp=null; 
} 
} 
} 

WebService.js

復制代碼代碼如下:

 
// JavaScript Document 
function WebService(url) 
{ 
var ajaxclient=new AjaxClient(null); 
var requestUrl=url; 
var responseMsg=null; 
this.Request=function(requestName,paraList) 
{ 
var url=requestUrl +'/' + requestName; 
var sendData=''; 
ajaxclient.SetUrl(url); 
ajaxclient.Open(); 
//alert(ajaxclient.GetUrl()); 
if (paraList!=null) 
{ 
for(var obj in paraList) 
sendData+=obj.toString() + '=' + paraList[obj] + '&'; 
sendData=sendData.slice(0,-1); 
} 
ajaxclient.Send(sendData); 
//ajaxclient.Close(); 
//responseMsg=XMLtoJSON(ajaxclient.Receive()); 
//for(var obj in responseMsg) 
// alert(obj.toString() + ':' + responseMsg[obj].toString()); 
responseMsg=ajaxclient.Receive(); 
} 
this.GetResponse=function() 
{ 
return responseMsg; 
} 
} 

調用很簡單，只需

復制代碼代碼如下:

 
var webService=new WebService('http://localhost/NightKidsWebService/Request.asmx'); 
webService.Request("GetResourceList",null); 
alert(JsonConverter.ConvertFromXML(webService.GetResponse().firstChild)); 

在Request方法里面的第一個參數(shù)對應不同的服務名稱，第二個參數(shù)加入對應的服務的參數(shù)表（json格式，例如：{id:123,name:'nightKids'})

您可能感興趣的文章:

JavaScript中內存泄漏的介紹與教程（推薦）
內存泄露是指一塊被分配的內存既不能使用，又不能回收，直到瀏覽器進程結束。下面這篇文章主要給的大家介紹了關于JavaScript中內存泄漏的相關資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。
2017-06-06
js格式化時間的簡單實例
本文分享了js格式化時間的實例代碼，需要的朋友可以看下
2016-11-11
JavaScript Array對象詳解
這篇文章主要為大家詳細介紹了JavaScript function函數(shù)種類，知識點很全面，包括普通函數(shù)、匿名函數(shù)、閉包函數(shù)，感興趣的小伙伴們可以參考一下
2016-03-03
微信小程序 checkbox使用實例解析
這篇文章主要介紹了微信小程序 checkbox使用實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-09-09
js兼容火狐獲取圖片寬和高的方法
這篇文章主要介紹了js兼容火狐獲取圖片寬和高的方法,涉及javascript圖片操作的相關技巧,需要的朋友可以參考下
2015-05-05
Javascript 創(chuàng)建類并動態(tài)添加屬性及方法的簡單實現(xiàn)
下面小編就為大家?guī)硪黄狫avascript 創(chuàng)建類并動態(tài)添加屬性及方法的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
javascript實現(xiàn)文件拖拽事件
這篇文章主要為大家詳細介紹了javascript實現(xiàn)文件拖拽事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-03-03
JS實現(xiàn)的頁面自定義滾動條效果
這篇文章主要介紹了JS實現(xiàn)的頁面自定義滾動條效果,涉及JavaScript結合css設置頁面滾動條樣式的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-10-10
JavaScript設計模式之代理模式介紹
這篇文章主要介紹了JavaScript設計模式之代理模式介紹,代理模式顧名思義就是用一個類來代替另一個類來執(zhí)行方法功能,需要的朋友可以參考下
2014-12-12
iframe中子父類窗口調用JS的方法及注意事項
本文給大家介紹iframe中子父類窗口調用JS的方法及注意事項，介紹的超詳細，需要的朋友快來學習下
2015-08-08