Question

编辑 - 已解决。

感谢大家抽出宝贵时间作出回应。经过几个小时的研究，我被引导到CORS，但事实证明我应该一直在看JSONP。我读了一些教程，我想我明白了。再次感谢。

我要做的是将用户输入从表单传递到我的服务器，这与表单所在的服务器不同。我不会这么长时间阅读，所以我会马上跳到代码。

在下面的javascript代码中，我通过tagName获取安全问题的元素，我不想在我的html表单中使用name属性。然后我将检索到的数据存储到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调用，这应该是微不足道的。唯一不同的是我的网址是在不同的服务器上。

    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>

Answer 1

Cross Origin Access是您不能这样做的问题，除非您允许将域列入白名单或使用JSONP

假设您在域名abc.com上，并且您想向域xyz.com发出请求。为此，您需要跨越域边界，在大多数浏览器中都是禁忌。

绕过此限制的一项是标签。当您使用脚本标记时，域限制将被忽略，但在正常情况下，您无法对结果做任何事情，只会对脚本进行评估。

输入JSONP。当您向启用了JSONP的服务器发出请求时，您会传递一个特殊参数，告诉服务器一些关于您的页面的信息。这样，服务器就能够以您的页面可以处理的方式很好地包装其响应。

jsonp实际上是克服XMLHttpRequest相同域策略的一个简单技巧。（如您所知，无法将ajax（XMLHttpRequest）请求发送到其他域。）

所以 - 我们不得不使用XMLHttpRequest，而是使用脚本html标签，这些标签通常用于加载js文件，以便js从另一个域获取数据。听起来很奇怪？

事情是 - 结果可以像XMLHttpRequest类似的方式使用脚本标签！

Answer 2

您无法向其他服务器发送AJAX请求，请参阅http://en.wikipedia.org/wiki/Same_origin_policy 解决方法是使用JSONP：http://en.wikipedia.org/wiki/JSONP

将ajax请求发送到另一台服务器（具体示例不起作用）

2 个答案: