文档章节

js 无参数、有参数的webservice通信方法 XMLHttpRequest和 $.ajax方式汇总及返回值为json问题

JaJaCube
 JaJaCube
发布于 2017/09/07 19:29
字数 572
阅读 8
收藏 0
点赞 0
评论 0

一、XMLHttpRequest方式

1.无参数通信方法(网上找来的方法)

 [C#]

[WebMethod]
        public string HelloWorld()
        {
            return "Hellow World";
        }

 

[javascript]

                function RequestWebService() {
                    //这是我们在第一步中创建的Web服务的地址
                    var URL = "http://192.168.1.128/ZHYL_Service/MapsService.asmx";

                    //在这处我们拼接
                    var data;
                    data = '<?xml version="1.0" encoding="utf-8"?>';
                    data = data + '<soap12:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap12="http://www.w3.org/2003/05/soap-envelope">';
                    data = data + '<soap12:Body>';
                    data = data + '<HelloWorld xmlns="http://tempuri.org/" />';
                    data = data + '</soap12:Body>';
                    data = data + '</soap12:Envelope>';

                    //创建异步对象
                    var xmlhttp = new XMLHttpRequest();
                    xmlhttp.open("POST", URL, false);
                    xmlhttp.setRequestHeader("Content-Type", "application/soap+xml");
                    xmlhttp.send(data);

                    document.getElementById("testDiv").innerHTML = xmlhttp.responseText;//返回结果放置于div中
                 
                  
                }

参考原文地址:http://www.cnblogs.com/puresoul/archive/2010/08/19/1803567.html

 

2.多参数通信方法

C#

[WebMethod]
        public string GetLayers(string groupTableName,string layerTableName)
        {
            return mReturnLayersEasyUI(groupTableName, layerTableName);
        }
        //其中mReturnLayersEasyUI()为具体处理方法

js

 function RequestWebService2() {
                    //这是我们在第一步中创建的Web服务的地址
                    var URL = "http://192.168.1.128/ZHYL_Service/MapsService.asmx";

                    //在这处我们拼接
                    var data;
                    data = '<?xml version="1.0" encoding="utf-8"?>';
                    data = data + '<soap12:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap12="http://www.w3.org/2003/05/soap-envelope">';
                    data = data + '<soap12:Body>';
                    data = data + '<GetLayers xmlns="http://tempuri.org/">';//GetLayers 为webservice中的方法名
                    data = data + "<groupTableName>ZHYL_GROUPS</groupTableName>";//第一参数,形参为groupTableName,实参为"ZHYL_GROUPS"
                    data = data + "<layerTableName>ZHYL_LAYERS</layerTableName>";//第二参数,同上
                    data = data + "</GetLayers>"
                    data = data +'</soap12:Body>';
                    data = data + '</soap12:Envelope>';

                    //创建异步对象
                    var xmlhttp = new XMLHttpRequest();
                    xmlhttp.open("POST", URL, false);
                    xmlhttp.setRequestHeader("Content-Type", "application/soap+xml");
                    xmlhttp.send(data);

                    var d = $("#testDiv")[0].innerHTML = xmlhttp.responseText; //返回结果放置到id为testDiv的div控件中

                   
                }

 

 二、$.ajax方式

$.ajax({
    type: 'POST',
    url: "http://192.168.1.128/ZHYL_Service/MapsService.asmx/GetLayers",
    dataType: 'json',
    data: { groupTableName: "ZHYL_GROUPS", layerTableName: "ZHYL_LAYERS"},
    async: true, 
    success: function (data) {
        var resultObject = data;
    },
    error: function (xhr,error,Eobject) {
        var d = $("#testDiv")[0].innerHTML = xhr.responseText; //返回结果放置到id为testDiv的div控件中
        var resultObject = xhr;
    }
});

在实际操作中发现,上述情况会返回分支error中而非意料之中的success,调试后发现返回值类型包含了XML头,因此不能识别为正确的json格式,当dataType设置为xml时进入success,但这并不是我们需要的json结果,具体原因和解决方案详见另一篇博文:

《js 与webservice通信返回值包含xml头,不能识别为json对象的解决方法》https://my.oschina.net/u/3669041/blog/1531681

 

© 著作权归作者所有

共有 人打赏支持
JaJaCube
粉丝 1
博文 6
码字总数 2489
作品 0
合肥
AJAX基础之JavaScript基础与增强(二)

一,Ajax究竟是个什么东西 用来描述一组技术,它使浏览器可以为用户提供更为自然的浏览体验。 简单一句话 不刷新页面与服务器通讯的技术 在Ajax之前,Web站点强制用户进入提交/等待/重新显示...

architect刘源源 ⋅ 05/08 ⋅ 0

前端JavaScript实现跨域的方式(转)

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,...

easonjim ⋅ 2017/12/27 ⋅ 0

我的第二个爬虫——爬取今日头条街拍美女

由于界面上的图片都是通过ajax异步请求的,所以我们还是先了解一下ajax的一些基本原理; ajax:Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求。其实说白了就是一个...

hello_我的哥 ⋅ 05/15 ⋅ 0

PHP - AJAX 与 PHP

AJAX 被用于创建交互性更强的应用程序。 AJAX PHP 实例 下面的实例将演示当用户在输入框中键入字符时,网页如何与 Web 服务器进行通信: 实例解释 - HTML 页面 当用户在上面的输入框中键入字...

速贷100 ⋅ 2017/03/06 ⋅ 0

JSONP原理优缺点(只能GET不支持POST)

JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都 可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕...

BearCatYN ⋅ 2015/06/04 ⋅ 0

React Native通信原理源码分析一

小伙伴们都知道在Android开发中实现Java和JS的通信可以通过WebView来实现,包括注册JSBridge或者在接口中拦截都可以。然而React Native中并没有用WebView控件的方式,而是基于WebKit内核的方...

juexingzhe ⋅ 04/08 ⋅ 0

JSONP跨域的原理解析

JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。这一策略对于JavaScript代码能够访问的页...

武文海 ⋅ 2016/03/21 ⋅ 0

php中ajax跨域请求---小记

php中ajax跨域请求---小记 前端时间,遇到的一个问题,情况大约是这样: 原来的写法: 前端js文件中: $.ajax({   type:'get',   url:'http://wan.xxx.com/xxx.js',   success:functio...

thinkyoung ⋅ 2015/08/31 ⋅ 0

WEB前端面试的10个最基础JavaScript问题!

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/27 ⋅ 0

api接口中ajax数据请求与数据返回的小坑

AJAX 可以使网页实现异步更新,XMLHttpRequest 是 AJAX 的基础,大部分浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject),XMLHttpRequest对象基于HTTP协议用于在后台与服务...

wx599c47c7bdcad ⋅ 06/08 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

聊聊spring cloud的RequestRateLimiterGatewayFilter

序 本文主要研究一下spring cloud的RequestRateLimiterGatewayFilter GatewayAutoConfiguration @Configuration@ConditionalOnProperty(name = "spring.cloud.gateway.enabled", matchIfMi......

go4it ⋅ 51分钟前 ⋅ 0

Spring JavaConfig 注解

JavaConfig注解允许开发者将Bean的定义和配置放在Java类中。它是除使用XML文件定义和配置Bean外的另一种方案。 配置: 如一个Bean如果在XML文件可以这样配置: <bean id="helloBean" class="...

霍淇滨 ⋅ 58分钟前 ⋅ 0

Spring clound 组件

Spring Cloud技术应用从场景上可以分为两大类:润物无声类和独挑大梁类。 润物无声,融合在每个微服务中、依赖其它组件并为其提供服务。 Ribbon,客户端负载均衡,特性有区域亲和、重试机制。...

英雄有梦没死就别停 ⋅ 今天 ⋅ 0

Confluence 6 重新获得站点备份文件

Confluence 将会创建备份,同时压缩 XML 文件后存储熬你的 <home-directory>/backups> 目录中。你需要自己访问你安装的 Confluence 服务器,并且从服务器上获得这个文件。 运行从 Confluence...

honeymose ⋅ 今天 ⋅ 0

informix的常用SQL语句

1、创建数据库 eg1. 创建不记录日志的库testdb,参考语句如下: CREATE DATABASE testdb; eg2. 创建带缓冲式的记录日志的数据库testdb(SQL语句不一定在事务之中,拥有者名字不被用于对象的解...

wangxuwei ⋅ 今天 ⋅ 0

matplotlib画图

最简单的入门是从类 MATLAB API 开始,它被设计成兼容 MATLAB 绘图函数。 from pylab import *from numpy import *x = linspace(0, 5, 10)y = x ** 2figure()plot(x, y, 'r')...

Dr_hu ⋅ 今天 ⋅ 0

RabbitMQ学习以及与Spring的集成(三)

本文介绍RabbitMQ与Spring的简单集成以及消息的发送和接收。 在RabbitMQ的Spring配置文件中,首先需要增加命名空间。 xmlns:rabbit="http://www.springframework.org/schema/rabbit" 其次是模...

onedotdot ⋅ 今天 ⋅ 0

JAVA实现仿微信红包分配规则

最近过年发红包拜年成为一种新的潮流,作为程序猿对算法的好奇远远要大于对红包的好奇,这里介绍一种自己想到的一种随机红包分配策略,还请大家多多指教。 算法介绍 一、红包金额限制 对于微...

小致dad ⋅ 今天 ⋅ 0

Python 数电表格格式化 xlutils xlwt xlrd的使用

需要安装 xlutils xlwt xlrd 格式化前 格式化后 代码 先copy读取的表格,然后按照一定的规则修改,将昵称中的学号提取出来替换昵称即可 from xlrd import open_workbookfrom xlutils.copy ...

阿豪boy ⋅ 今天 ⋅ 0

面试题:使用rand5()生成rand7()

前言 读研究生这3 年,思维与本科相比变化挺大的,这几年除了看论文、设计方案,更重要的是学会注重先思考、再实现,感觉更加成熟吧,不再像个小P孩,人年轻时总会心高气傲。有1 道面试题:给...

初雪之音 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部