純粋な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形式のデータを返す必要があります。要求が明らかにGETで、「URL」は、あなたが/オープン実行したいURLです

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

以下のような要求をする

$.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オブジェクト。 3番目のパラメータは、非同期要求の場合にtrueまたはfalseのいずれかになります。

などのためのdiv要素を作成：IDを持つ - resultをして#result要素で受信した結果を追加し、あなたは、単に次の行でこれを使用することができます。

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

Answer 3

contentTypeはdataの値ものの"application/json; charset=utf-8"に設定されていますたとえば、

"{domain: '1'}" 

は無効ですJSONです。プロパティ名は二重引用符で囲む必要があります。

がJSON.stringify()にjavasciptプレーンオブジェクトを渡し、その後、値、プロパティを取り込む、javascriptプレーンなオブジェクトを作成し、有効なJSON結果としてdataを設定します。

のcontentType（デフォルト：'application/x-www-form-urlencoded; = UTF-8'`）$.ajax([settings])

を参照してください。このコンテンツを使用し、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 は、あなたができる サーバー

$(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);  
     } 
    }); 
}); 

にプリフライトOPTIONSリクエストを送信するには、ブラウザの引き金となるでしょうURLに"?callback=?"を付けた場合としない場合の両方で$.getJSON()を使用してみてください。

JSONP

URLが文字列が含まれている場合は、 "コールバック=？" （またはサーバー側APIの で定義されているように）、リクエストは代わりにJSONPとして処理されます。詳細については、jsonpデータタイプの の説明を$.ajax()に表示してください。

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) 
});