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

私の場合、後続の 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'">

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'})