使用JQuery的Ajax调用SOAP-XML Web Services(Call SOAP-XML Web Services With jQuery Ajax)(译+摘录)
假设有一个基于.Net的Web Service,其名称为SaveProduct
POST /ProductService.asmx HTTP/1.1
Host: localhost
Content-Type: text/xml; charset=utf-8
Content-Length: length
SOAPAction: "http://sh.inobido.com/SaveProduct" <?xml version="1.0" encoding="utf-8"?>
<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
<soap:Body>
<SaveProduct xmlns="http://sh.inobido.com/">
<productID>int</productID>
<productName>string</productName>
<manufactureDate>dateTime</manufactureDate>
</SaveProduct>
</soap:Body>
</soap:Envelope>
在客户端用jQuery的ajax调用的代码为
var productServiceUrl = 'http://localhost:57299/ProductService.asmx?op=SaveProduct'; // Preferably write this out from server side
function beginSaveProduct(productID, productName, manufactureDate){
var soapMessage =
'<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"> \
<soap:Body> \
<SaveProduct xmlns="http://sh.inobido.com/"> \
<productID>' + productID + '</productID> \
<productName>' + productName + '</productName> \
<manufactureDate>' + manufactureDate + '</manufactureDate> \
</SaveProduct> \
</soap:Body> \
</soap:Envelope>';
$.ajax({
url: productServiceUrl,
type: "POST",
dataType: "xml",
data: soapMessage,
complete: endSaveProduct,
contentType: "text/xml; charset=\"utf-8\""
});
return false;
}
function endSaveProduct(xmlHttpRequest, status){
$(xmlHttpRequest.responseXML)
.find('SaveProductResult')
.each(function() {
var name = $(this).find('Name').text();
});
}
说明:
- type: 发送的请求的类型-the type of request we're sending
- dataType: 发回的响应的类型- the type of the response will send back, 一般情况下可以是html, json等类型,但如果是一个SOAP web service,必须定义为 xml类型
- data: 发送给web service的实际数据
- complete: function (XMLHttpRequest, textStatus) { /* Code goes here */ }
- contentType: 请求的MIME content类型, 同理,如果是一个SOAP web service,必须定义为 “text/xml”
- endSaveProduct:现在XML数据就已经发送到web service了,一旦服务器server接受到请求并进行处理,调用endSaveProduct方法
如用jQuery处理传回的XML响应,必须理解SOAP reponse’s schema定义,SaveProduct的schema格式如下:
HTTP/1.1 200 OK
Content-Type: text/xml; charset=utf-8
Content-Length: length <?xml version="1.0" encoding="utf-8"?>
<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
<soap:Body>
<SaveProductResponse xmlns="http://sh.inobido.com/">
<SaveProductResult>
<ID>int</ID>
<Name>string</Name>
<ManufactureDate>dateTime</ManufactureDate>
</SaveProductResult>
</SaveProductResponse>
</soap:Body>
</soap:Envelope>
传回的响应放在xmlHttpRequest的参数responseXML中,可以使用firebug或Dev. Tool查看,现在我们就可以使用jQuery来遍历该XML的节点并处理数据了。
补充:JSP和jQuery配合调用Web service的代码
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<script type="text/javascript"
src="<c:url value='/js/jquery-1.5.js'/>"></script>
</head>
<body>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"/>
<br/>
<a href="#" id="ok">确定</a>
</body>
<script type="text/javascript">
$(function(){
$("#ok").click(function(){
var val = $("#name").val();
if($.trim(val)==""){
alert("请输入名称");
return;
}
<!--可以通过拦截器获取请求信息-->
var str = '<?xml version="1.0" encoding="UTF-8"?>'+
'<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">'+
'<soap:Body><ns2:sayHello xmlns:ns2="http://first.cxf.itcast.com/">'+
'<arg0>'+val+'</arg0>'+
'</ns2:sayHello></soap:Body></soap:Envelope>';
$.ajax({
contentType:'application/xml;charset="UTF-8"',
dataType:'xml',//发送数据格式
type:'post',
url:'http://localhost:9999/cxf2.4_spring_web/ws/helloworld', //直接发向这个地址
data:str,
success:function(data){
//$(data).find("return").each(function(){
// alert($(this).text());
//}); //使用上面的方法也是可以的
var ss = $(data).find("return").first().text();
$("<div>").html(ss)
.css("border","1px solid blue")
.css({width:'50%'}).
appendTo($("body"));
$("#name").val("");
}
},"xml");//数据返回格式为xml
});
});
</script>
</html>
摘录自:http://openlandscape.net/2009/09/25/call-soap-xm-web-services-with-jquery-ajax/
使用JQuery的Ajax调用SOAP-XML Web Services(Call SOAP-XML Web Services With jQuery Ajax)(译+摘录)的更多相关文章
- 类型:Ajax;问题:ajax调用ashx参数获取不到;结果:ashx文件获取$.ajax()方法发送的数据
ashx文件获取$.ajax()方法发送的数据 今天在使用Jquery的ajax方法发送请求时,发现在后台中使用ashx文件无法接收到ajax方法中传递的参数,上网查了一下原因后发现了问题所在,原来是 ...
- WCF入门教程(四)通过Host代码方式来承载服务 一个WCF使用TCP协议进行通协的例子 jquery ajax调用WCF,采用System.ServiceModel.WebHttpBinding System.ServiceModel.WSHttpBinding协议 学习WCF笔记之二 无废话WCF入门教程一[什么是WCF]
WCF入门教程(四)通过Host代码方式来承载服务 Posted on 2014-05-15 13:03 停留的风 阅读(7681) 评论(0) 编辑 收藏 WCF入门教程(四)通过Host代码方式来 ...
- jquery ajax调用WCF,采用System.ServiceModel.WebHttpBinding
Jquery ajax调用WCF服务 例子效果如下:原界面 点击按钮GetList get后,通过指定的Url获取数据添加到table 新建一个控制台项目,添加IContract.cs,DBServi ...
- ajax 调用 .net core WebAPI,报错 400 (Bad Request) Unexpected character encountered while parsing value
此文由博主前两天的提问及 dudu 的回答整理,地址:https://q.cnblogs.com/list/myquestion 情况说明 基于 .net core 写了一个 Web API,用 po ...
- JQuery Ajax调用asp.net后台方法
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. 先来个简单的实例热热身吧. 1.无参数的方法调用 asp.net code: using System.Web.Scrip ...
- jQuery.ajax()调用asp.net后台方法
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法.介意方法名不要重名 建一个WebFormAjax名aspx文件 CS <%@ Page Language=" ...
- Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)
原文:Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇) 老话说的好:好记心不如烂笔头! 本着这原则,我把最近工作中遇到的jquery利用ajax调用web服务的 ...
- Asp.net中JQuery、ajax调用后台方法总结
通过上一篇文章实例的实现,整个过程当中学习到很多知识点,了解了Jquery.Ajax在asp.net中的运用,加以总结,其实原理都是一样的,理解了一种,其他的注意很少的区别就可以了.灵活运用: 1.有 ...
- jquery ajax调用WCF,采用System.ServiceModel.WSHttpBinding协议
采用System.ServiceModel.WSHttpBinding或者basicHttpBinding 协议.客户端就不能直接在前端通过url直接访问服务了 它是基于SOAP协议的bing,会采用 ...
随机推荐
- CUBRID学习笔记 28 执行sql脚本文件
一下命令在csql下执行. insert_commands.sql为sql脚本文件 ;CL ;READ insert_commands.sql ;RU 第一行的cl 清空命令缓存,等同clear第二行 ...
- [资源] Resources on Self-Driving Car
Talk NVIDIA at CES 2016 - Self Driving Cars and Deep Learning GPUs Projects Autoware Open-source sof ...
- CSS笔记(六)链接
参考:http://www.w3school.com.cn/css/css_link.asp 链接的四种状态 ① a:link - 普通的.未被访问的链接 ② a:visited - 用户已访问的链接 ...
- HTML笔记(六)文档类型
<!DOCTYPE>声明帮助浏览器正确显示网页.一般放在页面的最前面. DTD是Document Type Definition的缩写,是一套关于标记符的语法规则,是一种文档验证机制. H ...
- 杭电HDU1042(有点坑的高精度)
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1042 题意: Given an integer N(0 ≤ N ≤ 10000), your task i ...
- SQL笔记(1)索引/触发器
--创建聚集索引 create clustered index ix_tbl_test_DocDate on tbl_test(DocDate) GO --创建非聚集索引 create nonclus ...
- 图片的copy,从一个目录复制到另一个目录
代码: public function index(){ $path='G:/相片/2014.9.8深圳莲花山/IMG_1282.JPG'; $path=iconv('utf-8','gb2312', ...
- Android手机分辨率基础知识(DPI,DIP计算)二
dp = dip : device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA.HVGA和QVGA 推荐使用这个,不 ...
- eclipse_中的注释_快捷键
eclipse 中的注释 快捷键 把要注释的代码选中,按Ctrl+Shift+/ /* */ 形式的 ctrl+/ //形式的 取消代码注释: 把要注释的代码选中,按Ctrl+Shift+\ /* ...
- D3.js 力导向图的制作
力导向图中每一个节点都受到力的作用而运动,这种是一种非常绚丽的图表. 力导向图(Force-Directed Graph),是绘图的一种算法.在二维或三维空间里配置节点,节点之间用线连接,称为连线. ...