AjaxとJSONの使い方がよくわかりません。

なめくじ · #1

大学の課題で次のようなものを作成しなければなりません。
利用者は2つの整数xとyを入力する。
入力されたxとyの和を，あらかじめ用意してあるCGI（後述）に渡して計算させ（JavaScript内で計算してはいけない），その結果をJSONで受け取る。
JSONを受け取り次第，xとyの和の値を取り出して画面上の該当箇所に表示する（画面全体を更新・遷移させてはいけない）。
CGIの呼び出しにはAjaxを使い，GETとPOSTのどちらでも呼び出せるようにする。

私が作ったのは次のものです。

・ajax.js

コード:

function HttpRequest(obj){
var x = document.getElementById('x').value;
var y = document.getElementById('y').value; 
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://local.isc.meiji.ac.jp/~re00133/webprog/add-json.cgi');
xhr.responseType = "json";
xhr.send(x+y);
document.getElementById('ans').value=xhr.responseText;
}

・ajax.html

コード:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
    <head>
        <script type="text/javascript" src="check.js"></script>
        <meta http-equiv="Content-Script-Type" content="text/javascript"> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Ajaxによる足し算</title>
    </head>
    <body>
        <div>
            x: <input type="text" name="x" id="x" value="0"><br>
            y: <input type="text" name="y" id="y" value="0"><br>
            <input type="button" value="add_by_get" onClick="HttpRequest()">
            <input type="button" value="add_by_post" onClick="HttpRequest()">
        </div>
        <div id="ans">
            ここに答えが入ります。
        </div>
    </body>
</html>

ボタンをクリックしても何も起きませんでした。
質問したいのは
①どうやってAjaxを使い、cgiを呼び出すのか（記述の仕方）
②xとyをどのようにして、cgiに渡すのか
③どうやってJSON形式で結果を受け取るのか（記述の仕方）
④受け取ったJSONからどうやってxとyの和を取り出すのか
⑤私のプログラムでおかしい場所はどこか

です。

まだAjaxをちゃんと理解できていないのですごく初歩的な質問もあると思うのですが、よろしくお願いします。

ookami · #2

sendしてから結果が返ってくる前にresponseTextを参照しているからですね。sendは非同期なので、結果を待つプログラムを明示する必要があります。
例えばこちらは参考になるでしょうか。
http://www.ajaxtower.jp/ini/html/index1.html

#3

そもそも、いきなりx+yをsendしているのは不自然ではないですか？
「JavaScript内で計算してはいけない」という条件ですよね？
CGIの仕様がわかりませんが、即条件に違反しているというわけではなさそうですね。

なめくじ · #4

回答ありがとうございます。
x+yをsendで送るのは不自然であるとのご指摘をいただいたのですが、sendでsend(x,y)のように2つの値を送ることは可能なのでしょうか？
また、jsファイルを次のように変えてみました。
ajax.js

コード:

function HttpRequest(obj){
 var x = document.getElementById('x').value;
 var y = document.getElementById('y').value; 
 if (window.XMLHttpRequest){
    xmlHttp = new XMLHttpRequest();
  }else{
    if (window.ActiveXObject){
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
      xmlHttp = null;
    }
  
xmlHttp.onreadystatechange = checkStatus;
xmlHttp.open('GET', 'http://local.isc.meiji.ac.jp/~re00133/webprog/add-json.cgi', true);
xmlHttp.send(x+y);
xmlHttp.responseType = "json";


function checkStatus(){
  if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
    var node = document.getElementById('ans');
    node.innerHTML = xmlHttp.responseText;
  }
}


}

これでもまだ動作しなかったので、おかしな点が見つかれば教えてください。
よろしくお願いします。

#5

送れるフォーマットは受ける側のCGIに依存します。CGIが固定なら送信フォーマットは提示されているはずですので、それが分からないと答えようが無いですね。

【補足】
通信の状態はブラウザのデバッグ機能(F12など)で確認できるはずですが確認されていますか？

ookami · #6

恐らくそれで if(xmlHttp.readyState == 4 && xmlHttp.status == 200) まで到達していると思います。
サーバ側を触れない場合は、簡単なデバッグ方法として、alert入れるなどしてみたらいかがでしょう。

コード:

function checkStatus(){

  alert("readyState: "+xmlHttp.readyState);
  alert("status: "+xmlHttp.status);

  if (xmlHttp.readyState == 4 && xmlHttp.status == 200){

    alert("responseText: "+xmlHttp.responseText);

    var node = document.getElementById('ans');
    node.innerHTML = xmlHttp.responseText;
  }
}

あと、sendはおそらく send("x=123&y=456") のような指定になると思いますが、CGI次第なので、出題者に確認してください。open時に"GET"ではなく"POST"の可能性もあります。

なめくじ · #7

回答ありがとうございます。
現在このようなプログラムになっています。
ＣＧＩの例が課題のページにありました。
例：http://local.isc.meiji.ac.jp/~re00133/w ... gi?x=1&y=2
↑のような感じでパラメータを送ればよいみたいです。GETで送信するときはopenメソッドのURLの後ろに記述するらしいのですが、
xmlHttp.open('GET', 'http://local.isc.meiji.ac.jp/~re00133/w ... gi?x=x&y=y', true);
という風に記述して実行してみたのですが、計算されませんでした。
正しいパラメータの送り方を教えてほしいです。
よろしくお願いします。

ちなみに現在このようなプログラムになっています。

コード:

function HttpRequest(){

 var x = document.getElementById('x').value;
 var y = document.getElementById('y').value; 

 if (window.XMLHttpRequest){
    xmlHttp = new XMLHttpRequest();
  }else{
    if (window.ActiveXObject){
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
      xmlHttp = null;
    }

}
  
xmlHttp.onreadystatechange = checkStatus;
xmlHttp.open('GET', 'http://local.isc.meiji.ac.jp/~re00133/webprog/add-json.cgi', true);
xmlHttp.send(null);
xmlHttp.responseType = "json";

}
  
function checkStatus(){
 
  if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
 
    alert("responseText: "+xmlHttp.responseText);
 
    var node = document.getElementById('ans');
    node.innerHTML = xmlHttp.responseText;
  }


}

#8

なめくじさんが書きました:ＣＧＩの例が課題のページにありました。
例：http://local.isc.meiji.ac.jp/~re00133/w ... gi?x=1&y=2
↑のような感じでパラメータを送ればよいみたいです。GETで送信するときはopenメソッドのURLの後ろに記述するらしいのですが、
xmlHttp.open('GET', 'http://local.isc.meiji.ac.jp/~re00133/w ... gi?x=x&y=y', true);
という風に記述して実行してみたのですが、計算されませんでした。

とりあえず、これで試してみてください。

コード:

xmlHttp.open('GET', 'http://local.isc.meiji.ac.jp/~re00133/webprog/add-json.cgi?x='+x+'&y='+y, true);

なめくじ · #9

返信遅れてすみません、回答ありがとうございます。
教えていただいたやり方で加算できました。
レポートを昨日提出したのですが、参考文献にこのページのurlを載せて自分が投稿したとかいてしまいました。
今日その授業で、大学の課題を質問することは大学の規約違反で、半期分の単位がなくなるかもしれないといっていました。
みなさんに親切に教えて頂いただいたのに、申し訳ないのですがこの質問を削除してはいただけないでしょうか？
お願いします。

matunon · #10

なめくじさんが書きました:返信遅れてすみません、回答ありがとうございます。
教えていただいたやり方で加算できました。
レポートを昨日提出したのですが、参考文献にこのページのurlを載せて自分が投稿したとかいてしまいました。
今日その授業で、大学の課題を質問することは大学の規約違反で、半期分の単位がなくなるかもしれないといっていました。
みなさんに親切に教えて頂いただいたのに、申し訳ないのですがこの質問を削除してはいただけないでしょうか？
お願いします。

このトピックに対してでなく、管理人に直接言うべきことでは・・・・？

#11

申し訳ないですが、基本的に個人的な理由での削除は致しておりません。
フォーラムルールに記載がありますが回答してくれた人に大変失礼だからです。
１人を許すと前例となり全部を許すことになります。ご了承下さい。

【それと手遅れだと思う理由】
ここも有名な方のサイトなので、既にチェックされていると思います。
それと既にURLを記載したなら手遅れだと思いますので、削除は逆効果では無いかと思います。
ちなみに例え消してもGoogleやyahooのキャッシュには何週間も残ったままとなるので意味が無いでしょう。
インターネットに一度出たものは簡単には消せないのです。

【追記】
もうひとつ書いておくと大学構内からアクセスしている時がありますので、その場合は大学のアクセスログに記録されていると思います。
つまり、専門家にかかれば簡単にログから書き込んだ情報が取り出せますので、どうやろうと手遅れだと思います。

		7月 2025
日	月	火	水	木	金	土
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

AjaxとJSONの使い方がよくわかりません。

AjaxとJSONの使い方がよくわかりません。

Re: AjaxとJSONの使い方がよくわかりません。

Re: AjaxとJSONの使い方がよくわかりません。

Re: AjaxとJSONの使い方がよくわかりません。

Re: AjaxとJSONの使い方がよくわかりません。

Re: AjaxとJSONの使い方がよくわかりません。

Re: AjaxとJSONの使い方がよくわかりません。

Re: AjaxとJSONの使い方がよくわかりません。

Re: AjaxとJSONの使い方がよくわかりません。

Re: AjaxとJSONの使い方がよくわかりません。

Re: AjaxとJSONの使い方がよくわかりません。