JavaScript と webservice_javascript スキル間の通信実装コード-jsチュートリアル-php.cn

JavaScript と webservice_javascript スキル間の通信実装コード

WBOY

リリース： 2016-05-16 18:13:26

オリジナル

1025 人が閲覧しました

私の場合、後続の JavaScript アプリケーションによる処理のために、xml を直接 json に変換することにしました。 .netプラットフォームを使用して単純なWebサービスを構築しています。
Request.asmx

コードをコピーコードは次のとおりです。

 
using System; 
 System.IO を使用; 
System.Collections.Generic を使用; 
System.Web を使用;サービス; 
System.Web.Services.Protocols を使用; 
System.Drawing.Imaging を使用; 
namespace 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] 
public string HelloWorld() 
{ 
return "こんにちは" ; 
} 
[WebMethod] 
public byte[] GetPic() 
{ 
picNum = (picNum 1) 
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 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 クラスを使用して Web サービスをカプセル化して処理します (AjaxClient クラスを
common.js (JsonConverter クラスを含む) 

コードをコピー

コードは次のとおりです。 // JavaScript Document function $ (id)

{

return document.getElementById(id); }
関数 GetXmlHttp()
{
if(window.XMLHttpRequest)
return new XMLHttpRequest() ;
}
var JsonConverter={}; [];
JsonConverter.ConvertFromXML=function(xmlRootNode)
{
if(!xmlRootNode)
return;
var Converter={}; ,isArrayElement)
{
var returnStr='';
var isArray=false;
if(node.childNodes.length==1)
{
returnStr =node.nodeName ':' "'" ノード.firstChild.nodeValue "'" ;
if(node==xmlRootNode)
returnStr ='{' returnStr '}'; >isOneNode=false;
if(node.nodeName.match("ArrayOf*"))
isArray=true;
if(isArray)
else
{
returnStr ='{';
if(!(isArrayElement || xmlRootNode==node))
returnStr=node.nodeName ':' returnStr; var i=1;i{
returnStr =this.render (node.childNodes[i],isArray) ','>}
returnStr=returnStr.slice(0,-1);
if(isArray)
else
returnStr ='}'; }
//alert(converter.render(xmlRootNode));
return eval('('converter.render(xmlRootNode) ')');
}

< ;SPAN style="FONT-FAMILY: verdana, 'courier new'">
< /SPAN>
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'})