javascript 와 웹 서비스의 통신 실현 코드

저 에 게 xml 를 json 으로 직접 변환 하여 후속 javascript 응용 처 리 를 하도록 하 겠 습 니 다.나 는.net 플랫폼 을 이용 하여 간단 한 웹 서 비 스 를 구축한다.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) }); 
} 
} 

이상 은 간단 한 테스트 로 사용 할 수 있 습 니 다.자 바스 크 립 트 를 사용 하여 다양한 유형의 데 이 터 를 처리 할 수 있 습 니 다.자 바스 크 립 트 에 대해 서 는 xml.httprequest 대상 을 사용 하여 서버 에 접근 하 는 것 이 분명 합 니 다.그러나 여 기 는 간단 하기 위해 호환성 문 제 를 고려 하지 않 고 xml.httprequest 대상(저 는 chrome 브 라 우 저 를 테스트 브 라 우 저 로 사용 합 니 다)을 직접 사용 합 니 다.이 를 위해 저 는 AjaxClient 클래스 를 사용 하여 http 작업(Post 방법)을 진행 합 니 다.WebService 클래스 는 웹 서 비 스 를 패키지 처리 합 니 다(AjaxClient 클래스 를 조작 클래스 로 호출).JSonConverter 클래스 는 xml 데 이 터 를 json 데이터 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 방법 에서 첫 번 째 매개 변 수 는 서로 다른 서비스 이름 에 대응 하고 두 번 째 매개 변 수 는 해당 하 는 서비스의 매개 변수 표(json 형식,예 를 들 어{id:123,name:'nightKids'})를 추가 합 니 다.