javascript와 webservice_javascript 기술 간의 통신 구현 코드-JS 튜토리얼-php.cn

javascript와 webservice_javascript 기술 간의 통신 구현 코드

WBOY

풀어 주다： 2016-05-16 18:13:26

원래의

1024명이 탐색했습니다.

제 경우에는 javascript 애플리케이션의 후속 처리를 위해 xml을 json으로 직접 변환하기로 선택했습니다. .net 플랫폼을 사용하여 간단한 웹 서비스를 구축 중입니다.
Request.asmx

코드 복사 코드는 다음과 같습니다.

 
using System; 
 System.IO 사용; 
System.Collections.Generic 사용; 
System.Web 사용; 서비스, ​​
System.Web.Services.Protocols 사용; 
System.드로잉.Imaging 사용; 
NightKidsServices 
{ 
/// /// Service1 요약 설명
///  
[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] 
공개 문자열 HelloWorld() 
{ 
return "안녕하세요" ; 
} 
[WebMethod] 
공개 바이트[] GetPic() 
{ 
picNum = (picNum 1) % 32>이미지 이미지 = 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 GetResourceList() 
{ 
return new List(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) }); 
} 
} 

 
위 내용은 간단한 테스트 사용, 이후 JavaScript를 사용하여 다양한 유형의 데이터를 처리하는 것이 편리합니다. 
 JavaScript의 경우 서버 측에 액세스하려면 xmlhttprequest 객체를 사용해야 하지만 단순화를 위해 호환성 문제는 고려하지 않았습니다. xmlhttprequest 객체를 직접 사용했습니다(저는 Chrome 브라우저를 테스트 브라우저 장치로 사용했습니다). 이를 위해 AjaxClient 클래스를 사용하여 http 작업(Post 메서드)을 수행하고 WebService 클래스를 사용하여 웹 서비스를 캡슐화하고 처리합니다(AjaxClient 클래스를 Operation 클래스) 및 JsonConverter 클래스는 xml 데이터를 처리하여 json 데이터로 변환합니다. 
common.js(JsonConverter 클래스 포함) 

코드 복사

코드는 다음과 같습니다. // JavaScript Document function $ (id) { return document.getElementById(id)

}

 
// JavaScript 문서 
function AjaxClient(url) 
{ 
var xmlhttp=GetXmlHttp(); 
var request_url=url; 
var msgList=new 배열(); 
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 문서 
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)); 

다른 이름으로 요청하는 방법은 다음과 같습니다. 이름:'nightKids '})