分享XmlHttpRequest调用Webservice的一点心得
更新时间：2012年07月20日 20:01:18 作者：
因为项目需要，以后前端、手机客户端调用ASP.NET的Webservice来获取信息.所以这段时间开始看Webservice，试着通过XmlHttpRequest调用Webservice，过程中碰到不少问题，也有不少的收获
首先，因为JSON对于JS的便利性，考虑通过JSON来请求和返回数据。在JS中实例化一个xmlHttpRequest对象，然后根据网上的说明POST的地址为：asmx页面地址/Web方法名。在RequestHeader中设置Content-Type为application/json; charset=utf-8，SOAPAction设为Web方法名。Web方法的参数用JSON格式send出去。
代码如下：
function getXmlHttp() {
var xmlHttp;
if (window.XMLHttpRequest)
{ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttp = new XMLHttpRequest();
}
else
{ // code for IE6, IE5
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
return xmlHttp;
}
function webservice(url, action, data, success, error, complete, failed) {
var xmlHttp = getXmlHttp(); //获取XMLHttpRequest对象
xmlHttp.open('POST', url + '/' + action, true); //异步请求数据
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
try {
if (xmlHttp.status == 200 && typeof (success) == 'function') {
success(xmlHttp.responseText);
}
else if ((xmlHttp.status / 100 == 4 || xmlHttp.status / 100 == 5) && typeof (error) == 'function') {
error(xmlHttp.responseText, xmlHttp.status);
}
else if (xmlHttp.status / 100 == 200 && typeof (complete) == 'function') {
complete(xmlHttp.responseText, xmlHttp.status);
}
else if (typeof (failed) == 'function') {
failed(xmlHttp.responseText, xmlHttp.status);
}
}
catch (e) {
}
}
}
xmlHttp.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
xmlHttp.setRequestHeader('SOAPAction', action);
xmlHttp.send(data);
}
比如请求调用Webservice1中的HelloWorld方法：
webservice('/Webservice1.asmx','HelloWorld','{}',function (msg) { alert(msg); });
调用前请记得把Webservice1上面的 [System.Web.Script.Services.ScriptService] 取消注释，调用后可以看到弹出警告窗口：{"d": "Hello World"}。把Content-Type设为text/xml时，警告窗口的内容变就变成了<?xml version="1.0" encoding="utf-8"?> <string xmlns="http://tempuri.org/">Hello World</string>。
这时候虽然参数“{}”还是JSON的形式请求却是XML格式，但因为Hello World没有参数，所以忽略了内容的格式，能够正常返回值。
如果修改服务端的HelloWorld方法，添加一个string类型的参数somebody。
[WebMethod]
public string HelloWorld(string somebody) {
return "Hello World&Hello, " + somebody + "!";
}
将请求端的Content-Type改回application/json，传送参数改为{"somebody": "Krime"}，调用后弹出窗口内容变为{d: "Hello World&Hello, Krime!"}。
但如果这时再直接把Content-Type改为text/xml，调用后服务器将会报错：System.InvalidOperationException: 请求格式无效: text/xml; charset=UTF-8。 在 System.Web.Services.Protocols.HttpServerProtocol.ReadParameters() 在 System.Web.Services.Protocols.WebServiceHandler.CoreProcessRequest()
于是我们把参数格式也修改一下，按照Webservice调试页面的示例，将参数改为：
<?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>
<HelloWorld xmlns="http://tempuri.org/">
<somebody>Krime</somebody>
</HelloWorld>
</soap:Body>
</soap:Envelope>
这样应该就能正常返回XML的结果了吧？结果却出乎意料，服务器仍然报同样的错误。
折腾了很久后，几乎要抓狂了，难道ASP.NET突然不认识XML了？这个时候，再回去仔细看看Webservice调试页面的示例，终于发现了一点问题：
POST /WebServiceTest/Webservice1.asmx HTTP/1.1
Host: localhost
Content-Type: text/xml; charset=utf-8
Content-Length: length
SOAPAction: "http://tempuri.org/HelloWorld"
<?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>
<HelloWorld xmlns="http://tempuri.org/">
<somebody>string</somebody>
</HelloWorld>
</soap:Body>
</soap:Envelope>
上面POST的地址后面并没有像请求JSON数据时一样加上/方法名，而SOAPAction的方法名前面还需要加上命名空间。于是修改XMLHttpRequest的请求头，url和action做相应修改，结果终于正常返回了XML的结果：<?xml version="1.0" encoding="utf-8"?><soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"><soap:Body><HelloWorldResponse xmlns="http://tempuri.org/"><HelloWorldResult>Hello World&Hello, Krime!</HelloWorldResult></HelloWorldResponse></soap:Body></soap:Envelope>
后来继续测试，发现请求内容类型为application/json时，SOAPAction完全可以忽略不加，但是url后面一定要加上/方法名，否则服务器不会返回数据。而请求text/xml时，SOAPAction是必须的且前面要加上命名空间，url后面则不能有/方法名。
最后，经过总结，将代码改成了最终的样子：
function getXmlHttp() {
var xmlHttp;
if (window.XMLHttpRequest)
{ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttp = new XMLHttpRequest();
}
else
{ // code for IE6, IE5
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
return xmlHttp;
}
function webservice(url, options) {
if (typeof (url) == 'object') { //将url写在options里的情况
options = url;
url = url.url;
}
if (!url) return;
if (options.dataType.toLowerCase() == 'json') { //请求JSON格式的数据时，url后面需要加上“/方法名”
url = url + '/' + options.method;
}
var xmlHttp = getXmlHttp(); //获取XMLHttpRequest对象
xmlHttp.open('POST', url, true); //异步请求数据
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
try {
if (xmlHttp.status == 200 && typeof (options.success) == 'function') {
options.success(xmlHttp.responseText);
}
else if ((xmlHttp.status / 100 == 4 || xmlHttp.status / 100 == 5) && typeof (options.error) == 'function') {
options.error(xmlHttp.responseText, xmlHttp.status);
}
else if (xmlHttp.status / 100 == 200 && typeof (options.complete) == 'function') {
options.complete(xmlHttp.responseText, xmlHttp.status);
}
else if (typeof (options.failed) == 'function') {
options.failed(xmlHttp.responseText, xmlHttp.status);
}
}
catch (e) {
}
}
}
xmlHttp.setRequestHeader('Content-Type', options.contentType); //设置请求头的ContentType
xmlHttp.setRequestHeader('SOAPAction', options.namespace + options.method); //设置SOAPAction
xmlHttp.send(options.data); //发送参数数据
}
请求JSON数据：
window.onload = function () {
var data = '{"somebody": "Krime"}';
var options = {
namespace: 'http://tempuri.org/',
method: 'HelloWorld',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: data,
success: function (msg) {
alert(msg);
}
};
webservice('http://localhost:8003/WebServiceTest/Webservice1.asmx', options);
};
请求XML数据：
window.onload = function () {
var data = '<?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>'
+ '<HelloWorld xmlns="http://tempuri.org/">'
+ '<somebody>Krime</somebody>'
+ '</HelloWorld>'
+ '</soap:Body>'
+ '</soap:Envelope>';
var options = {
namespace: 'http://tempuri.org/',
method: 'HelloWorld',
contentType: 'text/xml; charset=utf-8',
dataType: 'xml',
data: data,
success: function (msg) {
alert(msg);
}
};
webservice('http://localhost:8003/WebServiceTest/Webservice1.asmx', options);
};
测试情况正常。
需要注意的一点是，请求JSON数据时，如果返回类型是DataTable是不行的，需要转换成相应数据实体类的List<>再返回。
在解决返回XML问题的过程中，还找到另一种解决方法。具体操作时，是将ContentType设为application/x-www-form-urlencoded，数据体不用JSON也不用XML格式的SOAP包，而是用类似QueryString的“arguement1=XXX&arguement2=XXX”。这个方法是模拟了窗体数据的HTTP POST格式，将每个控件值编码为名称=值对发送出去。
这种情况下的页面地址后面也需要加上/方法名。
代码如下：
复制代码 代码如下:
function getXmlHttp() {
var xmlHttp;
if (window.XMLHttpRequest)
{ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttp = new XMLHttpRequest();
}
else
{ // code for IE6, IE5
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
return xmlHttp;
}
function webservice(url, action, data, success, error, complete, failed) {
var xmlHttp = getXmlHttp(); //获取XMLHttpRequest对象
xmlHttp.open('POST', url + '/' + action, true); //异步请求数据
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
try {
if (xmlHttp.status == 200 && typeof (success) == 'function') {
success(xmlHttp.responseText);
}
else if ((xmlHttp.status / 100 == 4 || xmlHttp.status / 100 == 5) && typeof (error) == 'function') {
error(xmlHttp.responseText, xmlHttp.status);
}
else if (xmlHttp.status / 100 == 200 && typeof (complete) == 'function') {
complete(xmlHttp.responseText, xmlHttp.status);
}
else if (typeof (failed) == 'function') {
failed(xmlHttp.responseText, xmlHttp.status);
}
}
catch (e) {
}
}
}
xmlHttp.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
xmlHttp.setRequestHeader('SOAPAction', action);
xmlHttp.send(data);
}
比如请求调用Webservice1中的HelloWorld方法：
复制代码 代码如下:
webservice('/Webservice1.asmx','HelloWorld','{}',function (msg) { alert(msg); });
调用前请记得把Webservice1上面的 [System.Web.Script.Services.ScriptService] 取消注释，调用后可以看到弹出警告窗口：{"d": "Hello World"}。把Content-Type设为text/xml时，警告窗口的内容变就变成了<?xml version="1.0" encoding="utf-8"?> <string xmlns="http://tempuri.org/">Hello World</string>。
这时候虽然参数“{}”还是JSON的形式请求却是XML格式，但因为Hello World没有参数，所以忽略了内容的格式，能够正常返回值。
如果修改服务端的HelloWorld方法，添加一个string类型的参数somebody。
复制代码 代码如下:
[WebMethod]
public string HelloWorld(string somebody) {
return "Hello World&Hello, " + somebody + "!";
}
将请求端的Content-Type改回application/json，传送参数改为{"somebody": "Krime"}，调用后弹出窗口内容变为{d: "Hello World&Hello, Krime!"}。
但如果这时再直接把Content-Type改为text/xml，调用后服务器将会报错：System.InvalidOperationException: 请求格式无效: text/xml; charset=UTF-8。 在 System.Web.Services.Protocols.HttpServerProtocol.ReadParameters() 在 System.Web.Services.Protocols.WebServiceHandler.CoreProcessRequest()
于是我们把参数格式也修改一下，按照Webservice调试页面的示例，将参数改为：
复制代码 代码如下:
<?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>
<HelloWorld xmlns="http://tempuri.org/">
<somebody>Krime</somebody>
</HelloWorld>
</soap:Body>
</soap:Envelope>
这样应该就能正常返回XML的结果了吧？结果却出乎意料，服务器仍然报同样的错误。
折腾了很久后，几乎要抓狂了，难道ASP.NET突然不认识XML了？这个时候，再回去仔细看看Webservice调试页面的示例，终于发现了一点问题：
复制代码 代码如下:
POST /WebServiceTest/Webservice1.asmx HTTP/1.1
Host: localhost
Content-Type: text/xml; charset=utf-8
Content-Length: length
SOAPAction: "http://tempuri.org/HelloWorld"
<?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>
<HelloWorld xmlns="http://tempuri.org/">
<somebody>string</somebody>
</HelloWorld>
</soap:Body>
</soap:Envelope>
上面POST的地址后面并没有像请求JSON数据时一样加上/方法名，而SOAPAction的方法名前面还需要加上命名空间。于是修改XMLHttpRequest的请求头，url和action做相应修改，结果终于正常返回了XML的结果：<?xml version="1.0" encoding="utf-8"?><soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"><soap:Body><HelloWorldResponse xmlns="http://tempuri.org/"><HelloWorldResult>Hello World&Hello, Krime!</HelloWorldResult></HelloWorldResponse></soap:Body></soap:Envelope>
后来继续测试，发现请求内容类型为application/json时，SOAPAction完全可以忽略不加，但是url后面一定要加上/方法名，否则服务器不会返回数据。而请求text/xml时，SOAPAction是必须的且前面要加上命名空间，url后面则不能有/方法名。
最后，经过总结，将代码改成了最终的样子：
复制代码 代码如下:
function getXmlHttp() {
var xmlHttp;
if (window.XMLHttpRequest)
{ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttp = new XMLHttpRequest();
}
else
{ // code for IE6, IE5
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
return xmlHttp;
}
function webservice(url, options) {
if (typeof (url) == 'object') { //将url写在options里的情况
options = url;
url = url.url;
}
if (!url) return;
if (options.dataType.toLowerCase() == 'json') { //请求JSON格式的数据时，url后面需要加上“/方法名”
url = url + '/' + options.method;
}
var xmlHttp = getXmlHttp(); //获取XMLHttpRequest对象
xmlHttp.open('POST', url, true); //异步请求数据
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
try {
if (xmlHttp.status == 200 && typeof (options.success) == 'function') {
options.success(xmlHttp.responseText);
}
else if ((xmlHttp.status / 100 == 4 || xmlHttp.status / 100 == 5) && typeof (options.error) == 'function') {
options.error(xmlHttp.responseText, xmlHttp.status);
}
else if (xmlHttp.status / 100 == 200 && typeof (options.complete) == 'function') {
options.complete(xmlHttp.responseText, xmlHttp.status);
}
else if (typeof (options.failed) == 'function') {
options.failed(xmlHttp.responseText, xmlHttp.status);
}
}
catch (e) {
}
}
}
xmlHttp.setRequestHeader('Content-Type', options.contentType); //设置请求头的ContentType
xmlHttp.setRequestHeader('SOAPAction', options.namespace + options.method); //设置SOAPAction
xmlHttp.send(options.data); //发送参数数据
}
请求JSON数据：
复制代码 代码如下:
window.onload = function () {
var data = '{"somebody": "Krime"}';
var options = {
namespace: 'http://tempuri.org/',
method: 'HelloWorld',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: data,
success: function (msg) {
alert(msg);
}
};
webservice('http://localhost:8003/WebServiceTest/Webservice1.asmx', options);
};
请求XML数据：
复制代码 代码如下:
window.onload = function () {
var data = '<?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>'
+ '<HelloWorld xmlns="http://tempuri.org/">'
+ '<somebody>Krime</somebody>'
+ '</HelloWorld>'
+ '</soap:Body>'
+ '</soap:Envelope>';
var options = {
namespace: 'http://tempuri.org/',
method: 'HelloWorld',
contentType: 'text/xml; charset=utf-8',
dataType: 'xml',
data: data,
success: function (msg) {
alert(msg);
}
};
webservice('http://localhost:8003/WebServiceTest/Webservice1.asmx', options);
};
测试情况正常。
需要注意的一点是，请求JSON数据时，如果返回类型是DataTable是不行的，需要转换成相应数据实体类的List<>再返回。
在解决返回XML问题的过程中，还找到另一种解决方法。具体操作时，是将ContentType设为application/x-www-form-urlencoded，数据体不用JSON也不用XML格式的SOAP包，而是用类似QueryString的“arguement1=XXX&arguement2=XXX”。这个方法是模拟了窗体数据的HTTP POST格式，将每个控件值编码为名称=值对发送出去。
这种情况下的页面地址后面也需要加上/方法名。
相关文章
这篇文章主要介绍了深入理解JavaScript继承的多种方式和优缺点，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了JS中实现点击a标签返回页面顶部的问题，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-01-01
在使用echarts时,有时需要给柱状图设置背景,下面这篇文章主要给大家介绍了关于echarts动态渲染柱状图背景颜色及顶部数值的相关资料,文中通过图文以及代码介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要为大家详细介绍了js实现鼠标移入移出卡片切换内容，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了纯js实现无限空间大小的本地存储的功能，源码和demo都放给大家，本文着重说下实现的原理，具体的实践扩展小伙伴们自由发挥吧。2015-06-06
prototype它是用Javascript写好的一些API，包括对Javascript中的类如String，Array等进行的扩充，把JS文件嵌入后直接用就行了2010-04-04
这篇文章主要为大家介绍了JavaScript Fetch API请求和响应拦截详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
uploadify在Firefox下丢失session问题的解决方法
在用uploadify上传插件时遇到了一个问题，在读session时认为没有权限而被拦截了，后来在后台打印登录时产生session的id和上传时读取session的id，解决方法如下，感兴趣的朋友可以了解下2013-08-08
这篇文章主要介绍了纯javascript实现移动优先的幻灯片效果，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了编译打包video.js的方法，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2020-12-12
最新评论