JavaScript (Ajax)


リンクをクリックすると指定したURLにアクセスし(ブラウザの表示はそのままで、ただアクセスするだけです)、そのリンクが消える といった機能を実装するためのJavascriptのソースをお願いします。

回答の条件
  • 1人3回まで
  • 登録:2006/07/07 22:03:31
  • 終了:2006/07/08 11:34:46

ベストアンサー

id:pmakino No.4

まきのっぴ回答回数355ベストアンサー獲得回数282006/07/08 03:37:07

ポイント54pt

prototype.js を使った例を出すと、こんな感じではないでしょうか。

IE でも Firefox でも Opera でも OK です。

<html>

<head>

<script src="http://prototype.conio.net/dist/prototype-1.4.0.js"></script>

<script>

function hoge()

{

new Ajax.Request('http://www.example.com/hoge', { method: 'get' });

Element.remove('hoge');

}

</script>

</head>

<body>

<a href="javascript:hoge()" id="hoge">click</a>

</body>

</html>

詳しくは prototype.js の開発者向けメモ - Ajax.Request クラスを使う あたりを参照ください。

なお、Ajax(XMLHttpRequest) の仕様として、読み込み元の HTML と異なるサーバへのアクセスはできませんのでご注意ください。

もし異なるサーバへアクセスさせたかったら同一サーバにそれを実現するための中継 CGI 等を用意する必要があります。

id:esecua

ありがとうございます。これでOKです。

2006/07/08 11:31:59

その他の回答(4件)

id:llusall No.1

llusall回答回数505ベストアンサー獲得回数612006/07/07 22:34:54

ポイント30pt

こちらでいかがでしょうか?


<a href="JavaScript:shori()" id="idLnk">なにかのリンク</a>



<SCRIPT LANGUAGE=JavaScript>

<!--

function shori(){

    //Ajax

    var url = "./hoge.php"; //指定したURLにアクセス

    var xmlHttp;

    try {

        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

    } catch(e) {

        xmlHttp=new XMLHttpRequest();

    }

    xmlHttp.open("GET",url,true); // アクセスするだけなので非同期実行(同期実行の場合はfalse)

    xmlHttp.send(null);

    //レスポンスを取得

//  var res  = xmlHttp.responseText;

//  ※アクセスするだけなので不要

    //リンクを非表示

    document.all.idLnk.style.visibility = "hidden"; 

}

id:esecua

すいません、これではFireFoxのブラウザでは動いてくれません。

2006/07/07 23:09:23
id:kazu1107 No.2

kazu1107回答回数199ベストアンサー獲得回数142006/07/08 00:07:49

ポイント8pt

様々なブラウザに簡単に対応させようと思うなら既存のAjaxライブラリを使うのはどうでしょうか?

http://jsgt.org/mt/archives/01/000409.html

id:esecua

このライブラリを使ってどうやって実装するんですか!?

2006/07/08 00:17:59
id:kazu1107 No.3

kazu1107回答回数199ベストアンサー獲得回数142006/07/08 02:22:32

ポイント6pt

<script src = "./jslb_ajax.js" charset= "utf-8"></script>

<SCRIPT LANGUAGE=JavaScript>

<!--

function shori(){

//Ajax

var url = "./hoge.txt"; //指定したURLにアクセス

// 送信

sendRequest(onloaded,'','GET',url);

}


//受信時に動作するコールバック関数

function onloaded(oj){

// oj.responseTextを参照すればデータを受け取れます。

document.all.idLnk.style.visibility = "hidden";

}

//-->

</script>

id:esecua

ん~できない....

2006/07/08 11:32:14
id:pmakino No.4

まきのっぴ回答回数355ベストアンサー獲得回数282006/07/08 03:37:07ここでベストアンサー

ポイント54pt

prototype.js を使った例を出すと、こんな感じではないでしょうか。

IE でも Firefox でも Opera でも OK です。

<html>

<head>

<script src="http://prototype.conio.net/dist/prototype-1.4.0.js"></script>

<script>

function hoge()

{

new Ajax.Request('http://www.example.com/hoge', { method: 'get' });

Element.remove('hoge');

}

</script>

</head>

<body>

<a href="javascript:hoge()" id="hoge">click</a>

</body>

</html>

詳しくは prototype.js の開発者向けメモ - Ajax.Request クラスを使う あたりを参照ください。

なお、Ajax(XMLHttpRequest) の仕様として、読み込み元の HTML と異なるサーバへのアクセスはできませんのでご注意ください。

もし異なるサーバへアクセスさせたかったら同一サーバにそれを実現するための中継 CGI 等を用意する必要があります。

id:esecua

ありがとうございます。これでOKです。

2006/07/08 11:31:59
id:zaxx No.5

zaxx回答回数14ベストアンサー獲得回数02006/07/08 01:11:09

ポイント2pt

<html><body>

んじゃ勝手に修正


<SCRIPT LANGUAGE=JavaScript></p> <p><!--</p> <p>function shori(){</p> <p> //Ajax</p> <p> var url = "./a.html"; //指定したURLにアクセス</p> <p> var xmlHttp;</p> <p> try {</p> <p> xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");</p> <p> } catch(e) {</p> <p> xmlHttp=new XMLHttpRequest();</p> <p> }</p> <p> xmlHttp.open("GET",url,true); // アクセスするだけなので非同期実行(同期実行の場合はfalse)</p> <p> xmlHttp.send(null);</p> <p> //レスポンスを取得</p> <p>// var res = xmlHttp.responseText;</p> <p>// ※アクセスするだけなので不要</p> <p> //リンクを非表示</p> <p>// document.all.idLnk.style.visibility = "hidden"; </p> <p> var elem = document.getElementById("idLink");</p> <p> elem.style.visibility ="hidden";</p> <p> elem.style.display="none";</p> <p>}</p> <p></script>

</body></html>

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません