需要编写基于Javascript/Jquery的跨域请求

嗨，我必须编写Rest API调用，该调用将服务于跨域请求

我已经向Mozilla（rest客户端）询问了请求，它现在为我提供了如何通过jquery/javascript在html中编写的数据。

{"POST to adengine":{"method":"POST","url":"http://xxx.com/Advertisement/1.0/GetAds","body":"aid=Apposaurus_xxx","overrideMimeType":false,"headers":[["Content-Type","application/x-www-form-urlencoded"]]}}

这是我在html 中的示例代码

<html>
<title></title>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
JSONTest = function() {
    var resultDiv = $("#resultDivContainer");
    $.ajax({
        url: "http://xxx.com/Advertisement/1.0/GetAds",
        type: "POST",
        data:  "aid=Apposaurus_xxx",        
        overrideMimeType:'false',
        crossDomain: 'true',
        dataType: 'jsonp',
        headers:{"Content-Type":'application/x-www-form-urlencoded'},
        success: function (result) {
            switch (result) {
                case true:
                     processResponse(result);
                    break;
                default:
                    resultDiv.html(result);
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        }    
});
};
</script>
</head>
<body>

<div id="resultDivContainer"></div>
<button type="button" onclick="JSONTest();">JSON</button>
</body>
</html>

我哪里错了？

跨域请求应使用JSONP完成。JSONP代表带填充的JSON。我试着在这里解释一下。

您希望如何从服务器获取数据（当我们谈论JSON时是脚本）？你有两种方法：

ajax请求，使用XMLHttpRequest对象的实例在后台完成，并且仅限于发送到同一域
一个简单的HTTPGet请求，它是通过在HTML文档的某个地方插入<script>标记来完成的，主要是在head部分

第二种技术并不局限于跨域策略。然而，让我们来看看浏览器在以下两种情况下是如何作为我们的代理工作的：

ajax场景：开发人员代码=>浏览器=>请求=>服务器=>响应=>浏览器=>开发人员代码。这意味着，当你使用ajax时，浏览器代表你创建一个HTTP请求（带有X-Requested-With: XMLHttpRequest头字段）并将其发送到服务器，然后它会得到响应库*，但它会给你回响应，这样作为开发人员，你就有机会分析响应并对其做任何你想做的事情。

HTTP获取场景：开发人员代码=>头中的脚本标记=>浏览器=>请求=>服务器=>响应=>浏览器=>响应执行。

看到了吗？当您使用JSONP时，或者当您在head中插入简单的<script>标记时，浏览器会从服务器取回脚本，但它会运行脚本，这就结束了。您还没有被连接到响应中，也无法控制它。因此，您需要为它提供一个callback函数。callback({})与{}的不同之处在于，当它被执行时，它为您提供了获得结果并对其进行处理的机会。

您能稍微更改一下代码并告诉我们控制台中记录了什么吗？请不要使用IE，因为它有一个可怕的console.log实现（显示Object.Object）。Chrome或带有Firebug的Firefox会做得更好。

建议更改：

        success: function (result) {
console.log("here is the result:",result);
//            switch (result) {
//                case true:
//                     processResponse(result);
//                    break;
//                default:
//                    resultDiv.html(result);
//            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
console.log("this is the error",arguments);
//        alert(xhr.status);
        }

相关内容

最新更新

热门标签：