javascript与webservice的通信实现代码


Posted in Javascript onDecember 25, 2010

在我这里,我选择将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 相关文章推荐
jquery ajax 登录验证实现代码
Sep 23 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
JavaScript实现简单验证码
Aug 24 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 Javascript
基于node.js的快速开发透明代理
Dec 25 #Javascript
用方法封装javascript的new操作符(一)
Dec 25 #Javascript
一些javascript一些题目的解析
Dec 25 #Javascript
javascript字符串拼接的效率问题
Dec 25 #Javascript
原生javascript获取元素样式属性值的方法
Dec 25 #Javascript
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 #Javascript
Javascript动态绑定事件的简单实现代码
Dec 25 #Javascript
You might like
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
php-msf源码详解
2017/12/25 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
Vue.js进行查询操作的实例详解
2017/08/25 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
Python返回数组/List长度的实例
2018/06/23 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
Python解析微信dat文件的方法
2020/11/30 Python
python实现无边框进度条的实例代码
2020/12/30 Python
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
工作态度检讨书
2014/02/11 职场文书
2014年班主任自我评价范文
2014/04/23 职场文书
家长建议怎么写
2014/05/15 职场文书
团组织推优材料
2014/12/29 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
地道战观后感2000字
2015/06/04 职场文书
公司仓库管理制度
2015/08/04 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书