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 相关文章推荐
获取网站跟路径的javascript代码(站点及虚拟目录)
Oct 20 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
vue路由中前进后退的一些事儿
May 18 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
基于JavaScript实现随机点名器
Feb 25 Javascript
JS中一些高效的魔法运算符总结
May 06 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
php中通过smtp发邮件的类,测试通过
2007/01/22 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
php关联数组快速排序的方法
2015/04/17 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
jquery一句话全选/取消全选
2011/03/01 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
python实现最小二乘法线性拟合
2019/07/19 Python
python中bytes和str类型的区别
2019/10/21 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
三年大学生活自我鉴定
2014/01/21 职场文书
心理健康活动总结
2014/04/30 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
节水宣传标语口号
2015/12/26 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
投资入股协议书
2016/03/22 职场文书
理解深度学习之深度学习简介
2021/04/14 Python
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL