締切済み

JavaScriptでリクエストを飛ばす方法を教えて下さい。

2008/06/23 19:10

下記内容で画像の切り替えを教えて頂いたのですがこれに画像をクリックした時にサーバー側にクリックした事を分るために URL（リクエスト）をバックグラウンド（非同期かな）で渡したいと思います。どうしたら良いでしょうか？？ブラウザーの画面は画像をクリックしても切り替わりません。誠に恐縮ですが下記ソースに追加して教えて頂ければと思います。何卒よろしくお願いします。 <html> <head> <script type="text/javascript"></script> </head> <body onload="init();"> <img src="a.jpg" id="img1" style="cursor:pointer;" onclick="clickImg(this);" /> </body> </html>

webschool
お礼率70% (7/10)

JavaScript
回答数3
ありがとう数4

みんなの回答 （3）
専門家の回答

みんなの回答

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2281)

2008/06/25 12:49 回答No.3

> たぶん下記サイトの内容を組み合わせるのだと思いますがうまくいきません。組み合わせの方法は、以下のページから http://f32.aaa.livedoor.jp/~azusa/index.php?t=ajax&p=xmltodom > 例：ページビューランキングのview sampleを見てみて下さい。 window.onloadで実行している関数をimage.onclickで実行してください。サーバーにデータを渡したら終わり、というのなら、 onreadystatechangeイベントハンドラのセット、fXmltoDom()、fCreateRanking()を全部消すくらいでも良いかも知れません。 fXmltoDom()がXMLファイルの分解と解析 fCreateRanking()が分解したXMLファイルの表示を行っています。 document['xmlObject']への代入は「え？」と思うところですが、、、

fujillin
ベストアンサー率61% (1594/2576)

2008/06/25 10:46 回答No.2

こんにちは参考にされている「PHP & JavaScript Room」は大変親切に解説されていますので、これ以上の説明はできません。ちゃんとソースもサブルーチン化されて表示されていますし、各ブラウザにも対応しているようですので、そのまま利用してなんの問題もないと思われます。一応、試してみましたが（サーバ側はperlで）、問題なく動作しました。＞クリックした情報を非同期でサーバにリクエストをしたいと思っております。サブルーチンになっているので、クリックした時の処理にtestXmlHttpRequestObj()の呼び出しを一行追加すれば良いだけでは？

質問者

お礼 2008/06/25 14:42

回答ありがとうございます。ご指摘通りたぶんtestXmlHttpRequestObj()を追加すればうまくいくのではないかと思っていますがそこが根本的に分っていません。どこに追加すれば良いか教えて頂けるとありがたいです。宜しくお願いします。

fujillin
ベストアンサー率61% (1594/2576)

2008/06/23 21:21 回答No.1

＞URL（リクエスト）をバックグラウンド（非同期かな）で渡したいと思います。ご質問の意味がわかりかねます。実験してみましたが、問題なく動くようですよ。もっともクッキーがあれば最初からb.jpegが表示されるようになっているみたいですが、これは多分わざわざそうしているのですよね？ bodyタグの　onload以下を消せば、毎回a.jpgが表示されて、クリックすればb.jpgになるはずですけど。でもそれだけだったら、onclickのあとにthis.src="b.jpg";this.style.cursor="default";だけで済んじゃいますね。関係ありませんが、多分ゴミがどこかで入ったらしいので・・・ 25行目最後の />の「/」は不要と思われます。

質問者

お礼 2008/06/23 22:20

ご回答ありがとうございます。質問の意図が分りづらく申し訳ありません。画像をクリックしたデータをサーバ側で認識をしたいと考えております。 phpで処理したいと思っています。たぶん下記サイトの内容を組み合わせるのだと思いますがうまくいきません。 http://f32.aaa.livedoor.jp/~azusa/index.php?t=ajax&p=xmlhttp#a_send ざっくりといいますとクリックした情報を非同期でサーバにリクエストをしたいと思っております。宜しくお願いします。

質問者

補足 2008/06/24 01:57

説明不足で大変申し訳ありません。単純に書きますとクリックした情報をサーバに飛ばしたいつまりリクエストを飛ばすだけです。その内容をJavaScriptのソース内に、埋め込みたいです。飛ばす内容はhttp://www.hogehoge.co.jp/?id=でこのリクエストがサーバに来たらサーバ側でプログラムを動きます。プログラムはできているのでクリックしたときにこの内容（http://www.hogehoge.co.jp/?id=）を飛ばす方法を知りたいです。よろしくお願いします。

関連するQ&A

JAVASCRIPTの接続子について
始めまして、JAVASCRIPPTで以下の様なコードを書いているのですが 'img' + page;の部分でエラーになってしまいます。どなたか正しい書き方を御享受下さい。 //画像を最初にキャッシュする var img1 = new Image(); var img2 = new Image(); var img3 = new Image(); var img4 = new Image(); var page = 0; img0 = "image/ginotitle.JPG"; img1 = "image/Gino1page.JPG"; img2 = "image/Gino2page.JPG"; img3 = "image/Gino3page.JPG"; function moverts(){ switch(window.event.button) { case 1://************** 左クリック ********************************************* page = page - 1 ; //指定された画像を変更する document.getElementById("pic").src = 'img' + page; //id名「pic」の画像ソースをobjの画像ソースに書き換える document.getElementById("pic").src = 'img' + page; break; case 2://************** 右クリック ********************************************* page = page + 1 ; alert( = sns ); //指定された画像を変更する document.getElementById("pic").src = 'img' + page; //id名「pic」の画像ソースをobjの画像ソースに書き換える document.getElementById("pic").src = 'img' + page; break; } }
- 締切済み
- その他([技術者向] コンピューター)
javascript について追加の質問
質問NO6591909＝3/14　10：59の追加の質問です。素晴らしい回答で非常に感謝いたしますが、追加でもう一つお願いします。あと一息といったところです。最後の部分なのですが、 function pd1() { if(flag) document.getElementById('ID1').style.visibility = "hidden"; else document.getElementById('ID1').style.visibility = "visible"; var img = document.getElementById('s1').getElementsByTagName("img"); img[0].src = "別の画像のURL" flag = !flag; } function fx(){ var num = location.search.substr(1,1); var the_id = "ID" + num.toString(); var the_id2 = "s" + num.toString(); document.getElementById(the_id).style.visibility = "visible"; var img = document.getElementById(the_id2).getElementsByTagName("img"); img[0].src = "別の画像のURL" } この3行上の"別の画像のURL"とありますが、上記ですと決まった一枚の画像しか表示できないということになりますよね？　IDは9つありまして、9つ別々の画像をそれぞれ選択できるようにしたいのですが、その点を考慮するとどのような文になりますでしょうか？（function fx()を9つ別々に書くんでしょうか？・・・・・・）よろしくお願いいたします。因みにここからhtml↓（さっきも書きましたが、また書いておきます。） <div id= "w1" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <a href="javascript:pd1()">テキスト</a></div> <div id="ID1" style="visibility: hidden;" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <p>テキスト<br /> </div> <div id="s1"><img src="img/s1w.gif" width="29" height="39" name="s1img"/></div>
- ベストアンサー
- JavaScript
Javascript画像切り替えIEでしか動かない
Javascriptで画像を切り替えています。 IEでは動くのですが他のブラウザだと動きません。 FirefoxやChromeは何か特殊なのでしょうか？わかる人いたら教えてください。 <script type="text/javascript"> var imgs = new Array(); imgs[0] = "img/top2.jpg"; imgs[1] = "img/top3.jpg"; imgs[2] = "img/top1.jpg"; i = 0; function Blend(){ document.getElementById("imgframe").filters.blendTrans.apply(); document.all.item("imgframe").src = imgs[i++]; document.getElementById("imgframe").filters.blendTrans.play(); if(i>=imgs.length) i=0; } onload = function(){setInterval(Blend,3*1000)} </script> <img src="img/top1.jpg" width="940" height="350" id="imgframe" style="filter:blendTrans(duration=1);">
- ベストアンサー
- JavaScript
javascriptのカルーセル
配列に入れたイラストとそのタイトルを「次へ」「戻る」ボタンで順次両方向に表示したいのです。画像をボタンで前後に移動するところまではできたのですが、画像に対応する表題をどうやって表示したらいいのかどなたか教えていただけないでしょうか。やはりテーブルを利用しないとだめでしょうか。そうすると今度は画像をどうやって配列からテーブルに呼び出していいかわかりません。表題ですので画像と表題を配列に入れて同じカウンタで呼び出せればと思っています。以下現在のコードです。よろしくお願いします。 <html> <head> <title>バックナンバー</title> </head> <body> <center> <table width="550"><tr><td><td> <script type="text/javascript"> <!-- //画像を格納する配列の作成 var IMG = new Array(); IMG[0]=new Image(); IMG[0].src="chatsune/chatsune18.JPG"; IMG[1]=new Image(); IMG[1].src="chatsune/chatsune19.JPG"; IMG[2]=new Image(); IMG[2].src="chatsune/chatsune20.JPG"; IMG[3]=new Image(); IMG[3].src="chatsune/chatsune21.JPG"; IMG[4]=new Image(); IMG[4].src="chatsune/chatsune22.JPG"; IMG[5]=new Image(); IMG[5].src="chatsune/chatsune23.JPG"; IMG[6]=new Image(); IMG[6].src="chatsune/chatsune24.JPG"; IMG[7]=new Image(); IMG[7].src="chatsune/chatsune25.JPG"; var cnt=0; function Forward() { if(document.getElementById) { if(cnt >= IMG.length-1) { cnt = IMG.length-1; } else{ cnt++; document.getElementById("sd").src = IMG[cnt].src; //一つ画像を表示したらカウント用変数cntの値を＋１にする } } } function Back() { if(document.getElementById) { if(cnt <= 0) { cnt = 0; } else { cnt--; document.getElementById("sd").src = IMG[cnt].src; } } } </script> <img src="chatsune/chatsune18.JPG" id="sd" width="500" height="480" alt=""> <br> </td></td></tr> <tr><td align="left"> <form name="slide"> <input type="button" value="戻る" onclick="Back()"></td> <td align="right"> <input type="button" value="次へ" onclick="Forward()"></td></tr> <tr><td></td><td align="right"> <a href="list.html">バックナンバーのリストへ戻る</a></td></tr> </table> </form> </body> </center> </html>
- ベストアンサー
- JavaScript
IE11 javascriptについて
すみません、IE11なってから、以下のjavascriptが動かなくなりました。画像は、フェードイン、フェードアウトを繰り返し、画像はランダムに移動します。全部のロジックを書いてしまいましたが、何処がIE11から変更されたかが解らなくて、困っている所です。何処を直すのか、全部聞くのもあつかましいと思いました、どのあたりを見直しすれば宜しいですか。教えて頂ければ幸いです。 <SCRIPT language="JavaScript">  </SCRIPT>
- ベストアンサー
- JavaScript
javascriptを使って画像を切り替える
javascriptを使って画像（id="chengeImg"）を切り替えたいと思っています。画像はsamp0.jpg～samp4.jpgの計5枚ただ、問題があって、画像によって移り替わる時間を変えたいんです。（一定ではない） setTimeoutの引数(time)と画像を、どう結びつければよいのかが分からず困っています。それぞれ、画像0の時は5000ミリ秒　画像1の時は4000ミリ秒画像2の時は3000ミリ秒　… と移り変わる速度を変えたいのです。一応、timeは配列がいいのかと配列にしてみましたそれが良いのかどうかも定かではないのですが… どのようにすれば、時間が一定でない画像切り替えが可能になるでしょうか？スクリプトを詳しく教えていただけると、ありがたいです。以下、javascriptの一部を記します。【js】ファイル(imagechange.js)------ window.onload=anime; var img=new Array(5); img[0]=new Image(); img[1]=new Image(); img[2]=new Image(); img[3]=new Image(); img[4]=new Image(); img[0].src="samp0.jpg"; img[1].src="samp1.jpg"; img[2].src="samp2.jpg"; img[3].src="samp3.jpg"; img[4].src="samp4.jpg"; //画像枚数 var num=0; //時間制御 time = new Array(5000, 4000, 3000, 3000, 3000); function anime(){ 　var ch = document.getElementById("changeImg"); 　ch.src=img[num].src; 　 if(num<4){ 　　 num++; 　 }else{ 　　 num=0; 　 } 　 setTimeout("anime()",time); } 【html】ファイル-------- <head> <title>画像切り替え</title> <script type="text/javascript" src="imagechange.js"</script> </head> <body> <p><img src="samp0.jpg" width="700" height="200" id="chengeImg"></p> </body> </html> 以上となります。詳しい方、ぜひ教えてくださいませ。どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
JavaScripｔについての質問です。
javascript初心者です。方法が分かりませんので、教えていただける方、お願いいたします。ホームページを作っております。とあるページの下の部分をクリックすると、新しいウィンドウが開きます。 <a href="#" onClick="window.open('f/f.html?1','newWin','width=850,height=650')">テキスト</a> 新しいページは次のようになっています。 ↓ここからJavaScript↓ flag = false; function pd1() { if(flag) document.getElementById('ID1').style.visibility = "hidden"; else document.getElementById('ID1').style.visibility = "visible"; flag = !flag; } function fx(){ var num = location.search.substr(1,1); var the_id = "ID" + num.toString(); document.getElementById(the_id).style.visibility = "visible"; } ここからhtml↓ <div id= "w1" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <a href="javascript:pd1()">テキスト</a></div> <div id="ID1" style="visibility: hidden;" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <p>テキスト<br /> </div> <div id="s1"><img src="img/s1w.gif" width="29" height="39" name="s1img"/></div> 以上です。上記に関して説明を付け加えますと、新しいウィンドウ（新しいページ）上では、function fx　とpd1が作動し、div　ID1がプルダウンメニューのように開くようになっています。それに付け加えたいのですが、冒頭であげた部分をクリックするとID1がプルダウンのように開くだけでなく、div s1の　name="s1img"であげた部分を別の画像が表示されるようにするにはどのようなjavascriptを追加すればいいでしょうか？　　どなたか教えていただければ有り難いです・・・・・。
- ベストアンサー
- JavaScript
JavaScriptで画像に連動してテキストの内容
ジャバスクリプトを使って３枚の画像をクリックで入れ替え（ここまではできています。）その画像に連動した形で写真下のテキストフィールド内の文字を変えたいのですが、やり方がわかりません。クリックで画像と同時に変えるにはなにかテクニックがいるのでしょうか？（withなんてのがあったんですが、これを使えば良いのでしょうか？ <script language="javascript"> var no=1; var su=3; var text11=1; function func3() { var img1 = document.getElementById('img1'); no++; if (no>su){ no=1; } var gazo='s5_'+no+'.jpg'; img1.src=gazo; } </script> <img src="s5_1.jpg" width="320" height="481" hspace="125" vspace="10" id="img1" onclick=" func3();" /> <div class="syasinnsita"> <textarea name="text11" cols="78" id="text11">写真をクリックしてください。解決法を指南します</textarea>
- 締切済み
- その他（インターネット・Webサービス）
ロールオーバーで画像を先読みする方法
スワップイメージをJavascriptで製作しました。どうしても　先読みした画像を指定する方法がわかりません。このやり方ではできないのでしょうか？お教えくださいよろしくお願いします。以下作成したコードになります。 function preload() { var images1 = new Image(); var images2 = new Image(); var images3 = new Image(); images1.src = "ike1.jpg"; images2.src = "ike2.jpg"; images3.src = "ike3.jpg"; } function over(num){ var a=document.getElementById("img1"); var b=document.getElementById("title1"); var c=document.getElementById("teima1"); switch(num){ case 1: a.innerHTML = "<img src='ike1.jpg'>"; b.innerHTML = "ああああ"; c.innerHTML = "ああああ"; break; switch(num){ case 2: a.innerHTML = "<img src='ike2.jpg'>"; b.innerHTML = "ああああ"; c.innerHTML = "ああああ"; break; switch(num){ case 3: a.innerHTML = "<img src='ike3.jpg'>"; b.innerHTML = "ああああ"; c.innerHTML = "ああああ"; break; } }
- ベストアンサー
- JavaScript
プログラムのみで複雑に画像を変える方法役
クリックすると画像が次々と変わるものを作りたいのですが、下記方法では画像の枚数が増えたり、複雑な動作を作る場合、複雑な構造になってしまうと思うのですが、少しでも複雑にならない方法はありますか？フラッシュは使わずにプログラムだけで同じ位置で画像を変えたいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script language="JavaScript">  </script> </head> <body> <img src="omote.jpg" width="100" height="50" onclick="mF1()"> </body> </html> あと、document.images[0].srcを変数として格納すると動作しないのですが、 document～というのは変数にできないのでしょうか。 var dcum = document.images[0].src; function mF1(){ dcum = img1.src; setTimeout("mF2()",100); } function mF2(){ dcum = img2.src; setTimeout("mF3()",100); } function mF2(){ dcum = img3.src; }
- ベストアンサー
- JavaScript

JavaScriptでリクエストを飛ばす方法を教えて下さい。