javascript与webservice的通信实现代码

 更新时间:2010年12月25日 23:16:24   作者:  
关于javascript与webservice的通信,从理论上来说实现应该不难,主要是将服务器端的xml数据进行一个简单的处理然后以一种适当的形式展现成来。
在我这里,我选择将xml直接转换为json,以便后续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) });
}
}

以上只是一个简单的测试使用,便于后续使用javascript处理不同类型的数据
对于javascript,肯定是使用xmlhttprequest对象来访问服务器端的,不过这里为了简单,我没有考虑兼容性问题,直接使用xmlhttprequest对象(我使用chrome浏览器作为测试浏览器),为此我使用AjaxClient类来进行http操作(Post 方法),WebService类来封装处理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) + ')');
}

<SPAN style="FONT-FAMILY: verdana, 'courier new'"><SPAN style="FONT-SIZE: 14px; LINE-HEIGHT: 21px; WHITE-SPACE: normal"><BR></SPAN></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'})

相关文章

  • JavaScript中内存泄漏的介绍与教程(推荐)

    JavaScript中内存泄漏的介绍与教程(推荐)

    内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束。下面这篇文章主要给的大家介绍了关于JavaScript中内存泄漏的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • js格式化时间的简单实例

    js格式化时间的简单实例

    本文分享了js格式化时间的实例代码,需要的朋友可以看下
    2016-11-11
  • JavaScript Array对象详解

    JavaScript Array对象详解

    这篇文章主要为大家详细介绍了JavaScript function函数种类,知识点很全面,包括普通函数、匿名函数、闭包函数,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 微信小程序 checkbox使用实例解析

    微信小程序 checkbox使用实例解析

    这篇文章主要介绍了微信小程序 checkbox使用实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • js兼容火狐获取图片宽和高的方法

    js兼容火狐获取图片宽和高的方法

    这篇文章主要介绍了js兼容火狐获取图片宽和高的方法,涉及javascript图片操作的相关技巧,需要的朋友可以参考下
    2015-05-05
  • Javascript 创建类并动态添加属性及方法的简单实现

    Javascript 创建类并动态添加属性及方法的简单实现

    下面小编就为大家带来一篇Javascript 创建类并动态添加属性及方法的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • javascript实现文件拖拽事件

    javascript实现文件拖拽事件

    这篇文章主要为大家详细介绍了javascript实现文件拖拽事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-03-03
  • JS实现的页面自定义滚动条效果

    JS实现的页面自定义滚动条效果

    这篇文章主要介绍了JS实现的页面自定义滚动条效果,涉及JavaScript结合css设置页面滚动条样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • JavaScript设计模式之代理模式介绍

    JavaScript设计模式之代理模式介绍

    这篇文章主要介绍了JavaScript设计模式之代理模式介绍,代理模式顾名思义就是用一个类来代替另一个类来执行方法功能,需要的朋友可以参考下
    2014-12-12
  • iframe中子父类窗口调用JS的方法及注意事项

    iframe中子父类窗口调用JS的方法及注意事项

    本文给大家介绍iframe中子父类窗口调用JS的方法及注意事项,介绍的超详细,需要的朋友快来学习下
    2015-08-08

最新评论