使用JQuery调用Web服务时出现问题 [英] Trouble calling web service using JQuery
问题描述
我无法从JQuery调用网络服务。
我访问的网址是: http:// www。 deeptraining.com/webservices/weather.asmx?WSDL
,它们具有名为 GetWeather
的操作。
我使用Firefox,我收到以下消息:
Firefox控制台:[19:43:29.849] b $ b http://www.deeptraining.com/webservices/weather.asmx? op = GetWeather
[HTTP / 1.1 200 OK 371ms]
警报:未定义parsererror
如果获取代码 200 ,则表示请求已成功发送?
我做错了什么?什么是正确的方式提出请求?
谢谢!
这是我的代码:
< html>
< head>
< title>从jQuery调用Web服务< / title>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js>< / script>
< script type=text / javascript>
$(document).ready(function(){
$(#btnCallWebService)click(function(event){
var wsUrl =http://www.deeptraining。 com / webservices / weather.asmx?op = GetWeather;
var soapRequest ='<?xml version =1.0encoding =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> \
< GetWeather xmlns =http://litwinconsulting.com/webservices/> \
< City>纽约< / City> \
< / GetWeather> \
< ; / soap:Body> \
< / soap:Envelope>';
$ .ajax({
type:POST,
url:wsUrl,
contentType:text / xml,
dataType: xml,
data:soapRequest,
success:processSuccess,
error:processError
});
});
});
function processSuccess(data,status,req){
if(status ==success)
alert('SUCCESS');
}
function processError(data,status,req){
alert(req.responseText ++ status);
}
< / script>
< / head>
< body>
< h3>
使用jQuery / AJAX调用Web服务
< / h3>
< input id =btnCallWebServicevalue =Call web servicetype =button/>
< div id =response/>
< / body>
< / html>
(下面的答案假设,未在 http://www.deeptraining.com/。中部署此HTML文件)
您的代码实际上是尝试发出CORS请求,而不是普通的POST。
浏览器只会允许Ajax调用相同域中的网页作为源HTML页面。
换句话说,为了使Ajax请求与目标URL(在您的情况下, www.deeptraining.com
)不在同一个域上,浏览器不会进行调用你会期望)。相反,它会尝试发出CORS请求。
CORS请求? !@#$¨&是吗?
维基百科说:跨源资源共享(CORS)是一种允许网页向另一个域创建 XMLHttpRequests
的机制。由于 同源安全策略,此类跨域请求将被网络浏览器禁止 。
简而言之,要执行CORS请求,您的浏览器:
-
将首先向目标网址发送
OPTION
请求
- 您的Firefox告诉您:
- Firefox控制台:[19:43:29.849] 选项 a href =http://www.deeptraining.com/webservices/weather.asmx?op=GetWeather =nofollow> http://www.deeptraining.com/webservices/weather.asmx?op=GetWeather [HTTP / 1.1 200 OK 371ms]
- 响应代码
200
,因为它用于OPTIONS
- 您的Firefox告诉您:
-
然后只有服务器对
OPTION
的响应包含足够的标题以允许CORS请求,浏览将执行调用(几乎完全如果HTML页面在
- 如果预期的标题没有出现,浏览器就会放弃/ li>
- 如果预期的标题没有出现,浏览器就会放弃/ li>
如何解决?不幸的是,除了在位于 http://www.deeptraining.com/ 。
JSONP如何?
要在此场景中使用JSONP,您必须更改服务以通过GET返回信息,因为您无法使用JSONP进行POST。 (这个回答指向一些黑客,但是这太远了,我想。)
p>哦,男人,没有解决方法吗?
。您可以设置一个应用程序(位于HTML文件的同一个域中),将每个TCP / IP请求转发到 http:// www.deeptraining.com/ ,然后愚弄你的浏览器。或者您可以在您的域中设置该Web服务的镜像。你看,这一切都变得太脏了,所以祝你好运。
I'm having trouble calling a web service from JQuery.
The url I'm accessing is: http://www.deeptraining.com/webservices/weather.asmx?WSDL
which have an operation called GetWeather
.
I'm using Firefox and I get the following message:
Firefox console: [19:43:29.849] OPTIONS http://www.deeptraining.com/webservices/weather.asmx?op=GetWeather [HTTP/1.1 200 OK 371ms]
Alert: undefined parsererror
If get code 200, it means the request was successfully sent? What am I doing wrong? What would be the correct way to make the request? Thanks!!
Here is my code:
<html>
<head>
<title>Calling Web Service from jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnCallWebService").click(function (event) {
var wsUrl = "http://www.deeptraining.com/webservices/weather.asmx?op=GetWeather";
var soapRequest ='<?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> \
<GetWeather xmlns="http://litwinconsulting.com/webservices/"> \
<City>new york</City> \
</GetWeather> \
</soap:Body> \
</soap:Envelope>';
$.ajax({
type: "POST",
url: wsUrl,
contentType: "text/xml",
dataType: "xml",
data: soapRequest,
success: processSuccess,
error: processError
});
});
});
function processSuccess(data, status, req) {
if (status == "success")
alert('SUCCESS');
}
function processError(data, status, req) {
alert(req.responseText + " " + status);
}
</script>
</head>
<body>
<h3>
Calling Web Services with jQuery/AJAX
</h3>
<input id="btnCallWebService" value="Call web service" type="button" />
<div id="response" />
</body>
</html>
(Answer below assumes, as it seems, you are not deploying this HTML file in the http://www.deeptraining.com/.)
Your code is actually attempting to make a CORS request, not an ordinary POST.
Modern browsers will only allow Ajax calls to pages in the same domain as the source HTML page.
In other words, whenever the HTML page that tries to make an Ajax request is not on the same domain as the target URL (in your case, www.deeptraining.com
), the browser won't make the call (as you'd expect). Instead, it will try to make a CORS request.
CORS request? !@#$¨& is that?
Wikipedia says: Cross-origin resource sharing (CORS) is a mechanism that allows a web page to make XMLHttpRequests
to another domain. Such "cross-domain" requests would otherwise be forbidden by web browsers, due to the same origin security policy.
To put it shortly, to perform a CORS request, your browser:
Will first send an
OPTION
request to the target URL- Your Firefox told you that:
- Firefox console: [19:43:29.849] OPTIONS http://www.deeptraining.com/webservices/weather.asmx?op=GetWeather [HTTP/1.1 200 OK 371ms]
- The response code is
200
because it is for theOPTIONS
call, not thePOST
.
- Your Firefox told you that:
And then only if the server response to that
OPTION
contains the adequate headers to allow the CORS request, the browse will perform the call (almost exactly the way it would if the HTML page was at the same domain).- If the expected headers don't come, the browser simply gives up (like it did to you).
How to solve it?
Unfortunately, there is nothing you can do about it other than deploying that HTML file in a server located at http://www.deeptraining.com/.
How about JSONP?
To use JSONP in this scenario, you'd have to change the service to return information via GET, as you can't POST using JSONP. (This answer points to some hacks, but that's going too far, I think.)
Oh man, no workarounds, then?
There is no clean workaround, really. You could set up an application (at the same domain of your HTML file) that forwards every TCP/IP request to http://www.deeptraining.com/, an then fool your browser. Or you could set up a mirror of that web service in you domain. You see, it all becomes too dirty from this point on, so good luck.
这篇关于使用JQuery调用Web服务时出现问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!