如何使用純JavaScript調用外部頁面

Question

我想從另一個域（我無法控制）調用一個外部頁面（我可以控制它）。以下是我用來調用的腳本，但該頁面未被調用。

$(function() { 

    var val = window.location.hostname; 
    alert(val); 

    $.ajax({ 

     type: "GET", 
     async: false, 
     crossDomain: true, 
     dataType: 'json', 
     contentType: "application/json; charset=utf-8", 
     url: "http://somedomain.com/validate.aspx/validfunction", 
     data: "{domain: '" + val + "'}", 
     contentType: "application/json; charset=utf-8", 


     success: function (data) { 
      alert(data.d); 

     }, 


     error: function (jqXHR, textStatus, errorThrown) { 
      alert('error'); 
      console.log(jqXHR, textStatus, errorThrown); 

     } 
    }); 
}); 

不知道，爲什麼我不能打電話。有沒有更好的方法來調用頁面。請指教。

Answer 1

每當我們從ajax方法請求web方法時，它應該是類型'POST'，而跨域的數據類型是'JSONP'。 Web方法應該以JSON格式返回數據。

$.ajax({ 

    type: "POST", 
    async: false, 
    crossDomain: true, 
    dataType: 'jsonp', 
    contentType: "application/json; charset=utf-8", 
    url: "http://somedomain.com/validate.aspx/validfunction", 
    data: "{domain: '" + val + "'}", 
    contentType: "application/json; charset=utf-8", 


    success: function (data) { 
     alert(data.d); 

    }, 


    error: function (jqXHR, textStatus, errorThrown) { 
     alert('error'); 
     console.log(jqXHR, textStatus, errorThrown); 

    } 
}); 

Answer 2

使用XMLHttpRequest對象提出請求像下面

var xmlhttp; 
if (window.XMLHttpRequest) 
{ 
    xmlhttp = new XMLHttpRequest(); 
} 
xmlhttp.open("GET",URL,true); 
xmlhttp.send(); 

請求顯然是GET和「網址」是您要執行/打開URL。第三個參數用於異步請求，它可以是真或假。

創建例如一個div元素：id爲 - result，並附加#result元件接收的結果，你可以簡單地在下一行使用此：

document.getElementById("result").innerHTML = xmlhttp.responseText; 

Answer 3

contentType設置爲"application/json; charset=utf-8"不過的data值選項，例如

"{domain: '1'}" 

無效JSON。屬性名稱應該用雙引號包圍。

創建javascript普通對象，具有屬性填充，值，然後傳遞javascipt純目的是JSON.stringify()，設置data爲有效JSON結果。

參見$.ajax([settings])

的contentType（默認值：'application/x-www-form-urlencoded; = UTF-8'`）

類型：Boolean或String

當發送數據到服務器時，使用該內容類型。默認爲 「application/x-www-form-urlencoded; charset = UTF-8」，這對於大多數情況是適用的 。如果明確地將內容類型傳遞到$.ajax()，然後 它總是發送到服務器（即使沒有數據發送）。截至 jQuery 1.6，你可以通過false來告訴jQuery不設置任何內容 類型的頭。注意：W3C XMLHttpRequest規範規定，字符集始終是UTF-8;指定另一個字符集不會強制 瀏覽器更改編碼。注：對於跨域請求， 設置內容類型以外的任何其他 application/x-www-form-urlencoded，multipart/form-data，或text/plain 將觸發瀏覽器發送預檢OPTIONS請求到 服務器

$(function() { 

    var val = window.location.hostname; 
    alert(val); 
    var data = JSON.stringify({"domain": val}); 
    $.ajax({  
     type: "GET", 
     async: false, 
     crossDomain: true, 
     dataType: 'json', 
     contentType: "application/json; charset=utf-8", 
     url: "http://somedomain.com/validate.aspx/validfunction", 
     data: data, 
     success: function (data) { 
      alert(data.d); 
     },  
     error: function (jqXHR, textStatus, errorThrown) { 
      alert('error'); 
      console.log(jqXHR, textStatus, errorThrown);  
     } 
    }); 
}); 

你可以或者嘗試使用$.getJSON()，將"?callback=?"附加到URL。

JSONP

如果URL中包含字符串 「回調=？」 （或類似的，由服務器端API定義的 ），請求將被視爲JSONP。有關更多詳細信息，請參閱$.ajax()中關於jsonp數據類型的 討論。

var val = window.location.hostname; 
var data = JSON.stringify({"domain": val}); 
$.getJSON("http://somedomain.com/validate.aspx/validfunction?callback=?", data) 
.then(function(data) { 
    // do stuff with `data` 
}) 
.fail(function(jqxhr, textStatus, errorThrown) { 
    console.log(textStatus, errorThrown) 
});