fc2ブログ

レンタルサーバにおけるPHP4を用いたREST -Ajax編1-

前回、PHP4を使った簡単なRESTの方法についてまとめました。
»レンタルサーバにおけるPHP4を用いたREST -準備編-
»レンタルサーバにおけるPHP4を用いたREST -実践編-
今回は、Ajaxを用いたRESTを行う方法をまとめます。

ファイル構成,ライブラリ,Web API

ファイル構成

1) form.html・・・フォームを記載したHTMLファイル
2) xmlhttp.js・・・Ajax処理を行うJavascriptファイル
3) proxy.php・・・APIにRESTリクエストを行うプロキシファイル
以後、3つのファイルは同一のディレクトリにアップロードしてあると仮定します。

PEARライブラリ
»HTTP_Request
»PHP XML Library
Web API
»SimpleAPI vol.3 - Wikipedia API

form.html

テキストエリアとボタンを持つシンプルなHTMLフォームです。

送信ボタンがおされると後述するxmlhttp.js(外部Javascriptファイル)のsendData関数を呼び出します。sendDataがサーバサイドのプログラム(proxy.php)との非同期通信処理を担います。 テキスト入力ボックスの値はxmlhttp.jsからgetElementById('keyword')によって取得します。 responseAreaにRESTの結果として返されるドキュメントを表示します。xmlhttp.jsを外部ファイルとして読み込むために、head要素に下記の記述を行ないます。


<script src="xmlhttp.js" type="text/javascript" charset="utf-8">script>

xmlhttp.js

xmlhttp.jsはproxy.phpと非同期通信を行います。サンプルでは、proxy.phpにform.htmlから取得したkeywordパラメータをつけてHTTPのGETリクエストを行ないます。レスポンスとして返されるxmlドキュメントを表示します。

keywordパラメータはURLエンコード処理を行なう必要があります。


function sendData() {
    xmlHttpObject = null;
    if(window.XMLHttpRequest) { // safari,firefox
        xmlHttpObject = new XMLHttpRequest();
    }
    else if(window.ActiveXObject) {
        try{
            xmlHttpObject = new ActiveXObject("Msxml2.XMLHTTP"); // IE5
        }catch(e){
            try{
                xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP"); // IE5
            }catch(e) {
                return null;
            }
        }
    }
    //HTTPレスポンス ステータスコード コールバック関数の設定
    if(xmlHttpObject) xmlHttpObject.onreadystatechange = display;

    // フォームの値を取得->PHPへパース
    if(xmlHttpObject) {
        var keyword = document.getElementById("keyword").value // 検索キーワード取得
        keyword = encodeURL(keyword);                   // URLエンコード
        var query = "?keyword=" + keyword;
        var url = "proxy.php";
        var requestQuery = url + query;
        var requestElm = document.getElementById("requestArea");
        requestElm.innerHTML = requestQuery;
        xmlHttpObject.open("Get",requestQuery,true);
        xmlHttpObject.send(null);
     }
}


// コールバック関数
function display() {
    if((xmlHttpObject.readyState == 4) && (xmlHttpObject.status == 200)) {
        var xml = xmlHttpObject.responseXML;
        var elm = xml.getElementsByTagName("body");
        var count = elm.length;
        var contents = "";
        for(var i=0;i";
        }
        document.getElementById("responseArea").innerHTML = contents;
    } else {
        document.getElementById("responseArea").innerHTML = "検索中...";
    }
}

proxy.php

Ajaxはドメインを超えた通信はできません。Ajax(xmlhttp.js)はサーバサイドのプログラム(proxy.php)を呼び出し、呼び出されたproxy.phpがWeb APIへRESTを行ないます。

form.html ⇒ xmlhttp ⇒ proxy.php &rArr Wikipedia API
form.html ⇐ xmlhttp ⇐ proxy.php &lArr Wikipedia API


setURL($rest);
$result = $request->sendRequest();
if (!PEAR::isError($result)) {
    $xml = $request->getResponseBody();
}
//XMLドキュメントとして出力
mb_http_output('utf-8');
header('Content-type: text/xml; charset=utf-8');
echo $xml;
?>

 スポンサードリンク

スポンサーサイト



  1. ブックマークに追加する
  1. ブログランキングFC2
  1. テーマ:プログラミング
  2. ジャンル:コンピュータ
  1. 2007/10/23 (火)|
  2. [PHP]Ajax
  3. | トラックバック：0
  4. | コメント：0

レンタルサーバにおけるPHP4を用いたREST -実践編-

RESTはGETによるHTTPリクエストに対して結果がXMLで返されます。Wikipediaのキーワード検索を例にとりまとめています。


<form method="GET" action="">
<input type="text" name="keyword" />
<input type="submit" value="検索" />
</form>
<?php
// include_pathの設定
ini_set("include_path", "●●●" . PATH_SEPARATOR . ini_get("include_path") );

// ライブラリ インクルード
require_once 'HTTP/Request.php';
require_once 'xml.php';

// キーワード取得
$keyword = $_GET['keyword'];
// URLエンコーディング
$keyword = urlencode($keyword);

// リクエスト作成
$rest= "http://wikipedia.simpleapi.net/api?keyword=". $keyword;

// HTTPリクエスト
$request = new HTTP_Request();
$request->setURL($rest);
$result = $request->sendRequest();
if (!PEAR::isError($result)) {
      $xml = $request->getResponseBody();
}

// XMLを配列へ
$data = XML_unserialize($xml);
// 出力
print_r($data)
?>

解説

上述したコードを詳しくまとめています。文字コードはUTF-8とします。


<form method="GET" action="">
<input type="text" name="keyword" />
<input type="submit" value="検索" />
</form>

シンプルなHTMLフォームです。


// include_pathの設定
ini_set("include_path", "●●●" . PATH_SEPARATOR . ini_get("include_path") );

●●●でPEARディレクトリへパスを設定しています。予めPEARディレクトリへのパスがと通っている場合は必要ありません。


// ライブラリ インクルード
require_once 'HTTP/Request.php';
require_once 'xml.php';

PEARのインストールディレクトリからライブラリを読み込みます。


// キーワード取得
$keyword = $_GET['keyword'];
// URLエンコーディング
$keyword = urlencode($keyword);

// リクエスト作成
$rest= "http://wikipedia.simpleapi.net/api?keyword=". $keyword;

HTMLフォームからの検索キーワードを取得してWikipedia APIに投げるRESTリクエストを作成します。


// HTTPリクエスト
$request = new HTTP_Request();
$request->setURL($rest);
$result = $request->sendRequest();
if (!PEAR::isError($result)) {
      $xml = $request->getResponseBody();
}

HTTPリクエストのGETメソッドを用いてRESTを行います。返されるXMLデータを変数xmlで取得します。


// XMLを配列へ
$data = XML_unserialize($xml);
// 出力
print_r($data)

XMLドキュメントを配列へパースします。パースされた配列をそのまま出力しています。

関連記事
»レンタルサーバにおけるPHP4を用いたREST -準備編-

 スポンサードリンク

  1. ブックマークに追加する
  1. ブログランキングFC2
  1. 2007/10/22 (月)|
  2. [PHP]Ajax
  3. | トラックバック：0
  4. | コメント：0

レンタルサーバにおけるPHP4を用いたREST -準備編-

PHP4でRESTを行うための健忘禄です。RESTではGETによるHTTPリクエストに対して、XMLデータがHTTPレスポンスとして返されます※1。

※1:HTTPレスポンスとしてJSONを返すサービスもあります。

環境と利用ライブラリ

今回の説明で利用したレンタルサーバの環境です。また利用ライブラリHTTP_Request※1,PHP XML Library※2(PEAR)についてまとめています

※1:HTTP_RequestはPHPからHTTPリクエストを簡単に行うことができるPEARライブラリです。
※2:PHP XML LibraryはRESTのレスポンスとして返されるXMLをPHP4でシンプルに扱うためのPEARライブラリです。

レンタルサーバの環境

実際に試した環境は下記の通りです。

  • Apache : Apache/2.0.51
  • PHP : 4.3.11
  • MySQL : 3.23

利用レンタルサーバの環境は下記のコードで調べることができます。


<?php
    phpinfo();
?>

利用するPEARライブラリ

PEARのHTTP_RequestとPHP XML Libraryを利用します。
»HTTP_Request
»PHP XML Library

RESTはHTTPリクエストを行ないます。HTTP_RequestはPHPからHTTPリクエストを簡単に行うためのPEARライブラリです。また、PHP XML LibraryはRESTのレスポンスとして返されるXMLをPHP4でシンプルに処理するためのPEARライブラリです。

レンタルサーバでPEARを利用するには

PEARを利用するにはライブラリをインストールする必要があります。大きく、下記の場合に分けることができます。

  • (1)PEAR(HTTP_Request,PHP XML Library)がインストール済み
  • (2)PEAR(HTTP_Request,PHP XML Library)がインストールされていない

HTTP_Request,PHP XML Libraryインストール済み

PHP XML Libraryが利用可能な場合は、プログラムから下記のコードで利用できます※1。


require_once 'HTTP/Request.php';
require_once 'xml.php';

※1:php.iniの設定でPEARのインストールディレクトリにパスを通す必要がありますが、PEARがインストール済みの場合はパスの設定も行われているはずです。

HTTP_Request,PHP XML Library未インストール

確実ではありませんがインストールされていない場合は下記の方法でインストールして、利用できる場合があります。

PEARをローカルに展開
サーバへアップロード
PHPのプログラム内からPEARディレクトリへパスを通す

PHPのプログラムからinclude_pathの設定は次のようにして行います。


<?php
ini_set("include_path", 追加するパス . PATH_SEPARATOR . ini_get("include_path") );
?>

PATH_SEPARATORはPHP定数です。

関連記事
»レンタルサーバにおけるPHP4を用いたREST -実践編-

 スポンサードリンク

  1. ブックマークに追加する
  1. ブログランキングFC2
  1. テーマ:プログラミング
  2. ジャンル:コンピュータ
  1. 2007/10/22 (月)|
  2. [PHP]Ajax
  3. | トラックバック：0
  4. | コメント：0

HTTP_Request -PEARを使ったHTTPリクエスト-

多くの有名なWebサービスAPIがRESTに対応しています。RESTではGETによるHTTPリクエストに対してXMLがHTTPレスポンスとして返されます。

PEARのHTTP_Requestクラスを用いたGETリクエストの方法をまとめています。

require_once 'HTTP/Request.php';
$url = 'http://ドメイン/○○○/×××・・・';
$request = &new HTTP_Request();
$request->setURL($url);
$result = $request->sendRequest();
if (!PEAR::isError($result))
{
    $data = $request->getResponseBody();
}

HTTPレスポンスのボディ部が$dataに入ります。RESTを用いたWebサービスではXMLデータなどになります。

 スポンサードリンク

  1. ブックマークに追加する
  1. ブログランキングFC2
  1. 2007/10/08 (月)|
  2. [PHP]PEAR
  3. | トラックバック：0
  4. | コメント：0

MODxで外部Javascriptファイルを利用する

MODxで外部Javascriptファイルを利用するには大きく2通りの方法があります。

  • (1)既存のJavascriptファイルを利用
  • (2)MODxの新規ドキュメントからJavascriptファイルを作成

(1)の方法は、通常のHP作成と同じように、FTPでアップロードしたJavascriptファイルを下記のようにhead部分で読み込みます。

<script src="Javascriptファイルのパス" type="text/javascript"></script>

本記事ではMODxの新規ドキュメントの作成からJavascriptファイルを作成する方法をまとめます。

MODxでJavascriptファイルを作成

新規ドキュメント作成からCSSファイルを作成する場合に、注意すべき主な項目をまとめます。

ドキュメントエイリアス
拡張子(js)まで記入します※1。

使用テンプレート
(blank)を選択します
メニューに表示
チェックをオフにします。
コンテンツタイプ
text/javascriptを選択します。

※1:HTMLファイル(text/html)の場合は拡張子は記入しません。またCSSファイル(text/css)は拡張子(cs)まで記入します。

head部分で読み込みます。

<script src="ドキュメントのパス" type="text/javascript"></script>

 スポンサードリンク

  1. ブックマークに追加する
  1. ブログランキングFC2
  1. テーマ:WEBデザイン
  2. ジャンル:コンピュータ
  1. 2007/10/01 (月)|
  2. [MODx]MODx
  3. | トラックバック：0
  4. | コメント：0

MODxで外部CSSファイルを利用する

MODxで外部CSSファイルを利用するには大きく2通りの方法があります。

  • (1)既存のCSSファイルを利用
  • (2)MODxの新規ドキュメントからCSSファイルを作成

(1)の方法は、通常のHP作成と同じように、FTPでアップロードしたCSSファイルを下記のようにhead部分で読み込みます。

<link rel="stylesheet" href="CSSファイルへのパス" type="text/css" media="screen" />

本記事ではMODxの新規ドキュメントの作成からCSSファイルを作成する方法をまとめます。

MODxでCSSファイルを作成

新規ドキュメント作成からCSSファイルを作成する場合に、注意すべき主な項目をまとめます。

ドキュメントエイリアス
拡張子(css)まで記入します※1。

使用テンプレート
(blank)を選択します
メニューに表示
チェックをオフにします。
コンテンツタイプ
text/cssを選択します。

※1:HTMLファイル(text/html)の場合は拡張子は記入しません。またJavascriptファイル(text/javascript)は拡張子(js)まで記入します。

head部分で読み込みます。

<link rel="stylesheet" href="ドキュメントのパス" type="text/css" media="screen" />

 スポンサードリンク

  1. ブックマークに追加する
  1. ブログランキングFC2
  1. テーマ:WEBデザイン
  2. ジャンル:コンピュータ
  1. 2007/10/01 (月)|
  2. [MODx]MODx
  3. | トラックバック：0
  4. | コメント：0