热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

javascript与webservice的通信实现代码_javascript技巧

关于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
{
///


/// Service1 的摘要说明
///

[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 GetResourceList()
{
return new List(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{
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) + ')');
}




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'})
推荐阅读
  • 前言对于从事技术的人员来说ajax是这好东西,都会使用,而且乐于使用。但对于新手,开发一个ajax实例,还有是难度的,必竟对于他们这是新东西。leo开发一个简单的ajax实例,用的是 ... [详细]
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • 本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • Allegro总结:1.防焊层(SolderMask):又称绿油层,PCB非布线层,用于制成丝网印板,将不需要焊接的地方涂上防焊剂.在防焊层上预留的焊盘大小要比实际的焊盘大一些,其差值一般 ... [详细]
  • 本文由编程笔记#小编为大家整理,主要介绍了markdown[软件代理设置]相关的知识,希望对你有一定的参考价值。 ... [详细]
  • XMLhttpREquest_Ajax技术总结之XmlHttpRequest
    Ajax1、 什么是ajax   ... [详细]
  • 1、概述首先和大家一起回顾一下Java消息服务,在我之前的博客《Java消息队列-JMS概述》中,我为大家分析了:然后在另一篇博客《Java消息队列-ActiveMq实战》中 ... [详细]
  • 这篇文章给大家讲解如何利用dhtmlxGantt在服务器端集成数据。脚本数据保存如果您已初始化dataProcessor,则用户或以编程方式所做的任何更改都将自动 ... [详细]
  • 表单提交前的最后验证:通常在表单提交前,我们必须确认用户是否都把必须填选的做了,如果没有,就不能被提交到服务器,这里我们用到表单的formname.submit()看演示,其实这个对于我们修炼道 ... [详细]
  • Itwasworkingcorrectly,butyesterdayitstartedgiving401.IhavetriedwithGooglecontactsAPI ... [详细]
  • 本文介绍了Java工具类库Hutool,该工具包封装了对文件、流、加密解密、转码、正则、线程、XML等JDK方法的封装,并提供了各种Util工具类。同时,还介绍了Hutool的组件,包括动态代理、布隆过滤、缓存、定时任务等功能。该工具包可以简化Java代码,提高开发效率。 ... [详细]
  • python3 nmap函数简介及使用方法
    本文介绍了python3 nmap函数的简介及使用方法,python-nmap是一个使用nmap进行端口扫描的python库,它可以生成nmap扫描报告,并帮助系统管理员进行自动化扫描任务和生成报告。同时,它也支持nmap脚本输出。文章详细介绍了python-nmap的几个py文件的功能和用途,包括__init__.py、nmap.py和test.py。__init__.py主要导入基本信息,nmap.py用于调用nmap的功能进行扫描,test.py用于测试是否可以利用nmap的扫描功能。 ... [详细]
  • 最近学习了关于使用最为流行的jquery发送请求,在实践中以最为简单的聊天室作为测验的辅助工具,对相关网页开发有一个初步的认识,希望大家能够一起学习进步。首先介绍一下 ... [详细]
  • [JavaScript] 多数前端工程师都没注意到的一个关于console.log()的坑
    [JavaScript]多数前端工程师都没注意到的一个关于console.log()的坑请阅读以下代码并猜测结果:functiontest(){le ... [详细]
author-avatar
冷月荐向_878
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有