찾다
웹 프론트엔드JS 튜토리얼javascript와 webservice_javascript 기술 간의 통신 구현 코드

제 경우에는 javascript 애플리케이션의 후속 처리를 위해 xml을 json으로 직접 변환하기로 선택했습니다. .net 플랫폼을 사용하여 간단한 웹 서비스를 구축 중입니다.
Request.asmx

코드 복사 코드는 다음과 같습니다.

using System;
System.IO 사용;
System.Collections.Generic 사용;
System.Web 사용; 서비스, ​​
System.Web.Services.Protocols 사용;
System.드로잉.Imaging 사용;
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]
공개 문자열 HelloWorld()
{
return "안녕하세요" ;
}
[WebMethod]
공개 바이트[] GetPic()
{
picNum = (picNum 1) % 32>이미지 이미지 = 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 클래스를 사용하여 웹 서비스를 캡슐화하고 처리합니다(AjaxClient 클래스를 Operation 클래스) 및 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.ConvertFromXML=function(xmlRootNode)
{
if(!xmlRootNode)
return;
var 변환기={}; ,isArrayElement)
{
var returnStr='';
var isArray=false;
if( node.childNodes.length==1)
{
returnStr =node.nodeName ':' "'" node.firstChild.nodeValue "'" ;
if(node==xmlRootNode)
returnStr ='{' returnStr '}'
returnStr; >isOneNode=false;
if(node.nodeName.match("ArrayOf*"))
isArray=true;
if(isArray)
returnStr ='['
else
{
returnStr ='{';
if(!(isArrayElement || xmlRootNode==node))
returnStr=node.nodeName ':' returnStr; var i=1;i{
returnStr =this.render (node.childNodes[i],isArray)
}
returnStr=returnStr.slice(0,-1);
if(isArray)
returnStr =']'
else
returnStr ='}'
returnStr; }
//alert(converter.render(xmlRootNode));
return eval('(' 변환기.render( xmlRootNode) ')')
}


< ;SPAN style="FONT-FAMILY: verdana, 'courier new'">

AjaxClient.js




코드 복사


코드는 다음과 같습니다.

// JavaScript 문서
function AjaxClient(url)
{
var xmlhttp=GetXmlHttp();
var request_url=url;
var msgList=new 배열();
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 문서
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));

다른 이름으로 요청하는 방법은 다음과 같습니다. 이름:'nightKids '})
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
Vue与服务器端通信的刨析:如何处理断网情况Vue与服务器端通信的刨析:如何处理断网情况Aug 10, 2023 am 10:55 AM

Vue与服务器端通信的探析:处理断网情况的策略引言:在现代Web开发中,Vue.js已成为一种广泛使用的前端框架。然而,由于网络环境的不稳定性,处理断网情况是一个需要我们考虑的重要问题。本文将分析如何在Vue中处理断网情况,并给出相应的代码示例。一、断网情况分析在网络状况较好的情况下,Vue可以通过Ajax请求或WebSocket与服务器进行通信。但是,

如何通过PHP与P2P协议实现点对点通信如何通过PHP与P2P协议实现点对点通信Jul 28, 2023 pm 10:13 PM

如何通过PHP与P2P协议实现点对点通信随着互联网的发展,点对点(peer-to-peer,简称P2P)通信逐渐成为一种重要的通信方式。与传统的客户端-服务器通信方式相比,P2P通信具有更好的稳定性和伸缩性。在本文中,我们将介绍如何使用PHP与P2P协议实现点对点通信,并提供相应的代码示例。首先,我们需要了解P2P通信的基本原理。P2P协议允许多台计算机直接

Vue组件通信:使用$destroy进行组件销毁通信Vue组件通信:使用$destroy进行组件销毁通信Jul 09, 2023 pm 07:52 PM

Vue组件通信:使用$destroy进行组件销毁通信在Vue开发中,组件通信是非常重要的一个方面。Vue提供了多种方式来实现组件通信,比如props和emit、vuex等。本文将介绍另一种组件通信方式:使用$destroy进行组件销毁通信。在Vue中,每个组件都有一个生命周期,其中包含了一系列的生命周期钩子函数。组件的销毁也是其中之一,Vue提供了一个$de

如何使用Swoole实现WebSocket通信如何使用Swoole实现WebSocket通信Nov 07, 2023 pm 12:56 PM

Swoole是一个高性能的PHP协程网络框架,支持异步IO、多进程、多线程、协程等特性。其中,Swoole提供的WebSocket组件可用于实现实时双向通信,是构建实时应用的理想选择。本文将介绍如何使用Swoole实现WebSocket通信,并提供具体的代码示例。一、环境准备在使用Swoole实现WebSocket通信前,需要确保已安装Swoole扩展。可通

数据通信中的信道传输速率单位是bps,它表示什么数据通信中的信道传输速率单位是bps,它表示什么Jan 18, 2021 pm 02:58 PM

数据通信中的信道传输速率单位是bps,它表示“位/秒”或“比特/秒”,即数据传输速率在数值上等于每秒钟传输构成数据代码的二进制比特数,也称“比特率”。比特率表示单位时间内传送比特的数目,用于衡量数字信息的传送速度;根据每帧图像存储时所占的比特数和传输比特率,可以计算数字图像信息传输的速度。

webservice调用webservice调用Jul 05, 2023 pm 03:27 PM

webservice调用步骤:1、需要找到合适的WebService;2、创建WebService客户端并调用相应的方法;3、处理WebService的返回结果和异常;4、通过合理的优化措施,提高WebService调用的效率和性能。

串行通信和并行通信的区别是什么串行通信和并行通信的区别是什么May 16, 2023 am 11:44 AM

串行通信和并行通信的区别:1、并行通信指的是并行通信端口,同时传送八路信号,一次并行传送完整的一个字节信息,串行通信指的是串行通信端口, 在一个方向上只能传送一路信号,传送一个字节信息时,只能一位一位地依次传送;2、并行通信是在同一时刻发送多位数据,串行通信用一根线在不同的时刻发送8位数据;3、并行通信发送速度快,距离短资源占用多,串行通信发送速度慢,距离远资源占用少。

Vue中如何通过事件总线实现组件之间的通信Vue中如何通过事件总线实现组件之间的通信Oct 15, 2023 am 08:30 AM

Vue中如何通过事件总线实现组件之间的通信,需要具体代码示例事件总线是Vue中一种常见的组件通信机制,它允许不同组件之间进行简洁、灵活的通信,而无需显式地引入父子组件关系或使用Vuex等状态管理库。本文将介绍Vue中如何通过事件总线实现组件之间的通信,并提供具体的代码示例。什么是事件总线?事件总线是一种用于在组件之间传递消息的机制。在Vue中,我们可以利用V

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는