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 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
node.js中的http.response.removeHeader方法使用说明
Dec 14 Javascript
JavaScript实现彩虹文字效果的方法
Apr 16 Javascript
JavaScript基于ajax编辑信息用法实例
Jul 15 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
基于D3.js实现时钟效果
Jul 17 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
浅谈Vue 函数式组件的使用技巧
Jun 16 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
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
vue计算属性computed的使用方法示例
2019/03/13 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
PHP如何删除一个Cookie值
2012/11/15 面试题
科室工作的个人自我评价
2013/10/30 职场文书
师范毕业生个人求职信
2013/12/09 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
高三霸气励志标语
2014/06/24 职场文书
信用卡工资证明格式
2014/09/13 职场文书
户籍证明模板
2014/09/28 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
收入证明范本
2015/06/12 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python