【JavaScript】Ajaxでサーバへデータを送信してみる

JavaScript

こんにちは、しきゆらです

CGIの記事からすでに2か月ほどたっていますが、クライアントからサーバへデータを送信する方法を見て行こうと思います

 

なお、この記事ではjQueryなどのライブラリを用いず、素のJavaScriptで書いていきます

 

 

 

Ajaxとは何でしょう？

IT用語辞典によると、

Ajaxとは、Webブラウザに実装されているJavaScriptのHTTP通信機能を使って、Webページのリロードを伴わずにサーバとXML形式のデータのやり取りを行って処理を進めていく対話型Webアプリケーションの実装形態

とのこと

「XML形式で」と書かれていますが、別にこれに限った話ではないようです

前回のCGIとAjaxを使うことで、ページ遷移せずにWebページ内の情報を書き換えることができるようになります

 

その他、この辺も参考になるかと思います

 

実際に触ってみる

まずは、サーバへリクエストを送信するものを作成する部分を見てみます

function createHttpRequest(){
    var request = false;
    if(window.XMLHttpRequest){
        request = new XMLHttpRequest();
    }
    return request;
}

サーバとのやりとりを行うためには、データの送受信を行うXMLHttpRequestオブジェクトを作成します

(上記コードの4行目部分)

なんでこんな面倒な書き方してるの？

古いブラウザ(IE6とか)だとXMLHttpRequestではなく、ActiveXObjectというものを使うようです

古いブラウザにも対応しなければならないような場合、上記にelseでActiveXObjectオブジェクトを作成しなければならない場合もあるので、こんな感じに書いています

最近のブラウザでは、XMLHｔｔｐRequestだけで十分なので、古いブラウザに対応しなくてもいい場合は1行だけで十分です

 

次に、送信処理部分を見てみます

function send_request(){
    var request = createHttpRequest();
    if(request){
        request.open("GET", URL, true);
        request.onreadystatechange = function(){
            if(request.readyState == 4){
                confirm(request.responseText);
            }
        }
        request.send(null);
    }
}

この関数は、自分で作ったものなので関数名とかは適宜変えても大丈夫

テンプレート的な部分は3～10行目あたり

 

まずは

request.open("GET", URL, true);

では、どこにどういう通信を行うかを設定しています

openの引数は

  1. HTTPメソッドを設定する
  2. アクセス先のURL
  3. 非同期通信を行うかどうか(true：非同期、false：同期通信)

となっています

 

以下の部分では、通信して結果が帰ってきたときの処理を記述しています

request.onreadystatechange = function(){
    if(request.readyState == 4){
        confirm(request.responseText);
    }
}

onreadystatechangeは、readyStateが変化するたびに呼ばれます

readyStateとは、通信の状態が切り替わる時に変化します

どういう状態があるかというのは、こちらのサイトにまとめられています

readyStateが「4」のときとは、サーバへのリクエストが完了した状態に当たります

responseTextには、サーバへのリクエストを送り、その結果が入っています

それをconfirmで表示しています

 

以下で、作成したリクエストを送信しています

request.send(null);

sendをしないとサーバへの送信を行えません

なお、引数をnullにしているのは、GETメソッドでは必要が無いのでnullにしています

POSTメソッドで通信を行う場合は、ここに渡すようです

 

あとは適当なHTMLにinputタグでクリック時にsend_request()を呼び出せば試すことができます

 

もし、上手くいかない場合はファイルのパーミッションを確認したり、URLを見直してみるといいかも

それでもわからない場合は、サーバ側のログファイルあたりを見てみるといいと思います

 

今回は、簡単ですがクライアントからサーバへリクエスト送信部分を見てみました

おわり

Posted by しきゆら