将ajax请求发送到另一个服务器(特定的示例不起作用)
Sending ajax request to another server (specific example not working)
EDIT - Resolved。
感谢大家抽出时间回复。经过几个小时的研究,我被引导到CORS,但事实证明我应该一直关注JSONP。我读了一些教程,我想我懂了。再次感谢。
我要做的是将用户输入从表单传递到我的服务器,这与表单所在的服务器不同。我不会把这篇文章写得太长,所以我将直接跳到代码部分。
在以下javascript代码中,我通过tagName获取元素以解决安全问题,我不想在html表单中使用名称属性。然后我将检索到的数据存储到JSON数据类型中,然后在其上调用ajax函数。
function processForm() {
var i, userInput, inputType;
var name, creditNo, cvv, month, year;
var inputs = document.getElementsByTagName("input");
for (i=0; i < inputs.length; i++){
inputType = inputs[i].getAttribute('data-tajer');
userInput = inputs[i].value;
if (inputType == 'name') {
name = userInput;
}
else if (inputType == 'cc') {
creditNo = userInput;
}
else if (inputType == 'cvv') {
cvv = userInput;
}
else if (inputType == 'month') {
month = userInput;
}
// year
else {
year = userInput
}
}
var myJASON = {"name": name, "cc": creditNo, "cvv": cvv, "month": month, "year": year};
var strJSON = JSON.stringify(myJASON);
ajaxCall(strJSON);
}
现在是ajax调用,这应该是微不足道的。唯一的区别是我的url在不同的服务器上。
function ajaxCall(param){
var url = 'http://blahbalh';
// jquery code snippet
var ajaxRequest;
try{
ajaxRequest = new XMLHttpRequest();
} catch (e){
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
alert("Please update your browser biatch!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
else {
alert("failed");
}
}
ajaxRequest.open("POST", url, true);
// param is the JSON data.
ajaxRequest.send(param);
}
基本上现在发生的是,我得到的状态为0,readyState为1。你们能看出我哪里做错了吗?请记住,我首先在jQuery中使用了它,但它也不能工作。我愿意接受任何解决方案和建议。
为了方便,我将提供html表单。
<form id="paymentForm">
<h3>Payment Form</h3>
<h4>Please fill in the form below, * are required fields.</h4>
<div>
<label>
<span>Name: *</span>
<input placeholder="Please enter your name as it appears on your credit card." id = "name" type="text" data-tajer="name" tabindex="1" required autofocus>
</label>
</div>
<div>
<label>
<span>Credit Card: *</span>
<input placeholder="Please enter credit card number" type="text" data-tajer="cc" tabindex="2" required>
</label>
</div>
<div>
<label>
<span>CVV: *</span>
<input placeholder="Please enter CVV code found on the back of your card" type="text" data-tajer="cvv" tabindex="3" required>
</label>
</div>
<div>
<label>
<span>Expiry Month: *</span>
<input placeholder="Please enter the expiry month of your credit card" type="text" data-tajer="month" tabindex="4" required>
</label>
</div>
<div>
<label>
<span>Expiry Year: *</span>
<input placeholder="Please enter expiry year of your credit card" type="text" data-tajer="year" tabindex="5" required></input>
</label>
</div>
<div>
<button onclick="processForm()">Process Payment</button>
</div>
</form>
跨域访问是一个问题你不能这样做除非你允许域名被列入白名单或使用JSONP
假设你在域名abc.com上,你想请求域名xyz.com。为此,您需要跨越域边界,这在大多数browserland中是不允许的。
可以绕过这个限制的一个项目是标签。当您使用脚本标记时,域限制被忽略,但在正常情况下,您不能对结果做任何事情,脚本只是被评估。输入JSONP。当您向启用JSONP的服务器发出请求时,您将传递一个特殊参数,该参数将告诉服务器关于您的页面的一些信息。这样,服务器就能够以您的页面可以处理的方式很好地包装其响应。
jsonp实际上是一个简单的技巧来克服XMLHttpRequest相同的域策略。(如您所知,不能将ajax(XMLHttpRequest)请求发送到不同的域。)
所以-而不是使用XMLHttpRequest我们必须使用脚本html标签,那些你通常用来加载js文件,为了让js从另一个域获取数据。听起来很奇怪吗?
事实证明,脚本标记可以以类似于XMLHttpRequest的方式使用!
您不能向另一台服务器发送AJAX请求,参见http://en.wikipedia.org/wiki/Same_origin_policy一个解决方法是使用JSONP: http://en.wikipedia.org/wiki/JSONP
- Wordpress:javascript在服务器上的wp-admin中不起作用
- php文件中包含的jquery文件在服务器上不起作用
- 代码在jsfiddle中工作,但在本地服务器中不起作用
- jQuery:共享按钮(sharrre)在本地和服务器上都不起作用
- 当我通过Node服务器提供HTML时,为什么我的页面Javascript不起作用
- php函数向XMPP服务器发送消息,不提供日志;不起作用
- 我上传了客户's服务器一个js函数不起作用
- 从备用服务器引用时,Javascript 库不起作用
- 服务器端代码在谷歌应用脚本中不起作用
- 使用科尔多瓦在我的网络服务器上存储 GCM ID 不起作用
- 为什么我的 php 连接到 mysql 服务器不起作用
- 用于显示服务器上的 javascript 时间的脚本不起作用
- jquery 倒计时服务器同步不起作用
- replaceWith() jQuery 在服务器 2012 上不起作用
- JavaScript 在上传到服务器时不起作用
- JavaScript 在我的服务器上不起作用
- 从服务器获取事件的全日历不起作用
- jquery ajax 请求在远程服务器上不起作用
- 从服务器获取开机自检的数据不起作用
- 奇怪的Javascript在移动到Web服务器时不起作用