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 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
AngularJS自动表单验证
Feb 01 Javascript
从0开始学Vue
Oct 27 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
vue如何引用其他组件(css和js)
Apr 13 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
前端MVVM框架解析之双向绑定
Jan 24 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
微信小程序反编译的实现
Dec 10 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
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
php防止SQL注入详解及防范
2013/11/12 PHP
php程序内部post数据的方法
2015/03/31 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
javascript json2 使用方法
2010/03/16 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
python pickle 和 shelve模块的用法
2013/09/16 Python
python的迭代器与生成器实例详解
2014/07/16 Python
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
python读取各种文件数据方法解析
2018/12/29 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
HTML5等待加载动画效果
2017/07/27 HTML / CSS
Java多态性的定义以及类型
2014/09/16 面试题
车间班长岗位职责
2013/11/30 职场文书
书法培训心得体会
2014/01/05 职场文书
六十岁生日答谢词
2014/01/10 职场文书
爱护草坪标语
2014/06/24 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书