web-dev-qa-db-ja.com

JavascriptはURLからHTMLを文字列に読み込みます

現在、ftpのようなブラウザとして機能できるサイトを構築しています。基本的に私が持っているのは、その上にいくつかのイメージを持つftpサーバーです。

私が理解できないのは、このftpサイトを参照すると、ftpサイトのソース(一部のブラウザーで見られるように)を表示できます。必要なのは、そのソースを文字列に保存することです)。

その理由は、私が「イメージ」ブラウザのようなものを作るからです。ソースを文字列に読み取り、すべての画像ソースをコピーし、innerHTMLを使用して新しいレイアウトを作成することで、これを達成する予定です。

つまり、URLから情報を読み取り、別の方法で表示したいのです。


まあ、それを機能させることができないようです。問題は、サーバーサイドスクリプトを使用できないことです。しかし、同じフォルダ内のデータを動的にロードできるファイルをFTPサーバーにロードできますか? (私がFTPと言うとき、実際にはNASサーバー)を意味します)。

20
Chizpa

あなたの答えはAjaxです。 POSTおよびURLからデータを取得することができ、Webサイトを閲覧するのと同じように、HTMLを文字列として返します。

jQuery (本当に便利)を使用する予定の場合、 Ajax を使用するのは簡単です。この例のように(ライブラリなしでは機能しません):

$.ajax({
    url : "/mysite/file.html",
    success : function(result){
        alert(result);
    }
});

デフォルトのJavascriptを使用する場合は、 http://www.w3schools.com/ajax/default.asp をご覧ください。

var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}
else { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    }
}
xmlhttp.open("GET", "ajax_info.txt", true);
xmlhttp.send();
31
Niels

Nielsとrich.okellyが言ったことに追加することはあまりありません。 AJAXはあなたの道です。

ただし、クロスドメインの制限により、データへのアクセスが禁止されることに注意してください 同じドメイン内ではありません。ここで回避策を見つけることができます。

1
vzwick

前述の回答で述べたように、HTTPとCORSを使用すると可能ですが、 この他のスレッド を見てみたいと思います。

1
Diogo Biazus

Alert()を使用せずにデータを取得するためのJavaScript

    $.ajax({
    url : "/mysite/file.html",
    async:false,            //this is the trick
    success : function(result){
                 //does any action
               } 
    });
0
Mina Samir