想象使用一个简单HTML文件来把一个请求发送到一个服务器端脚本,收到一个基于该请求的定制XML文件,然后把它显示给用户而几乎不需要刷新浏览器!本文作者将同你一起探讨怎样在普通Web应用程序中联合PHP和AJAX技术来创建实时的数据传输而不需要进行浏览器刷新。
尽管本文所使用的是PHP语言,但是请记住任何服务器端语言都会正常工作。为了理解本文,我假定你基本理解JavaScript和PHP或一类似服务器端语言。
本文示例使用AJAX来把一请求从一个RSS馈送发送到一定制的PHP对象。该PHP对象复制一份在本地服务器上的该馈送并返回这一路径。该请求对象收到这一路径,分析它,并且把数据以HTML形式显示给用户。这听起来涉及很多步骤,其实它仅由4个小文件组成。之所以使用了4个小文件,是为了平衡它们各自特定的力量而使整个系统的处理极富效率性。
我想,有些读者可能会问,为什么你要创建在本地服务器上的馈送的一个副本而不是简单分析最原始的馈送。原因是,这样以来可以允许绕过XML HTTP Request对象所强加的跨域限制。后面,我还会解释怎样创建这个定制的PHP对象;但是首先,让我们从表单创建开始。
创建发出请求的表单
你要做的第一事情是,在你的HTML的head标签之间包括你可能想使用的JavaScript和任何CSS文件。我包括了一个式样表来实现该聚合器的最后布局并用一个JavaScript文件来发出请求和进行馈送分析:
下一步,创建一个表单,它针对你所选择的一个RSS馈送发出请求。我创建的表单只包括一个输入字段和一个提交该请求的按钮。该请求的查询是一个字符串,它由馈送输入值和一个将在服务器端被校验的口令字组成;作为一个示例,我使用了下面形式:
"password=mypassword
该代码在每次页面加载之时发出一次请求;因此,如果页面被刷新,现有的在该输入域中的馈送串将在页面加载时被请求。下面是一个表单数据的示例,连同一些div标签用来显示已分析的馈送的特定结点:
复制代码 代码如下:
コードをコピー コードは次のとおりです。
// ディレクトリが存在しない場合は、
$dir = "rss"
if (!is_dir($dir); )
{
mkdir($dir, 0666);
}
コピー コード コードは次のとおりです:
//一意の名前を作成します
$file=md5($rss_url);
$path="$dir/$file.xml" ;
コードをコピーします コードは次のとおりです:
// フィードをローカル サーバーにコピーします。
copy($rss_url, "$path");
return $path;
次に、小さいながらも強力な RSS クラス全体を示します。 ? php
class RSS
{
function get($rss_url)
{
if($rss_url != "")
{
// ディレクトリを作成します存在しません a
$dir = "rss";
if(!is_dir($dir))
{
mkdir($dir, 0666) }
; //一意の名前を作成します
$file = md5($rss_url);
$path = "$dir/$file.xml"
//フィードをローカル サーバーにコピーします
copy($ rss_url, "$ path");
return $path; は、まさに要求しているファイルです。このファイルは、最初にリクエストからクエリされたパスワード変数を検証し、リクエスタが許可されたユーザーではないことを示すメッセージを返すか、RSS フィード (リクエスト メソッドによって処理された後にローカル サーバーにコピーされる) を指します。応答するためのパス。 RSS フィードに応答するには、RSS オブジェクトを含めてインスタンス化する必要があり、要求されたフィードの URL をパラメータとして使用してリクエスト メソッドをアクティブにする必要があります:
コードをコピー
コードは次のとおりです:
<
if($password == "mypassword")
{
require_once('classes/RSS.class.php'); ();
echo $rss->get($request);
else
{
echo "あなたは不正なユーザーです"; >
GET/POST と AJAX の組み合わせ
POST リクエストを行うには、まずリクエスト オブジェクトを作成する必要があります。リクエスト オブジェクトの作成経験がない場合は、私の記事「AJAX の使用方法」を読むか、この記事のサンプル ソース コードを勉強してください。リクエスト オブジェクトが作成されたら、sendFeed メソッドを呼び出し、フォームで作成した URL を渡すことができます:
コードは次のとおりです:関数 sendFeed(url){ post.onreadystatechange = sendRequest;
post.open("POST", url, true); >} PHP オブジェクトからの応答が受信され、正しくロードされると、応答に対応するローカル ファイルに対して別のリクエストが行われます。この場合、post.responseText は新しいファイルへのパスを提供します。
function sendRequest(){
if(checkReadyState(post)){
request = createRequestObject()
request .onreadystatechange; = onResponse;
request.open("GET", post.responseText, true);
request.send(null)
レスポンスの分析
RSS フィード間の違いにより、応答の分析が困難になる場合があります。タイトルと説明ノードを含む画像が含まれるものもあれば、含まれないものもあります。したがって、フィードバックを分析するときは、フィードバックに画像が含まれているかどうかを解読するために少しのチェックを行う必要があります。画像が含まれている場合は、その画像をフィードのタイトルとリンクとともに画像 div タグに表示できます:
コードをコピー
var _title = response.getElementsByTagName('title')[0].firstChild.data; var _link = response.getElementsByTagName('link ')[0] .firstChild.data;; _logo = "" _title "
"; checkForTag(response.getElementsByTagName('image')[0])) { var _url = response.getElementsByTagName('url')[0].firstChild.data = "
"
document.getElementById('logo').innerHTML = _logo;
各画像を表示するためにチェックする必要があるだけでなく、フィード内のすべてのアイテムを反復処理するときにもチェックする必要があります。画像が存在すると、タイトルおよびリンク ノードの他のすべてのインデックス作成が適切に機能しなくなるためです。したがって、画像タグが見つかったら、各パスでインデックス値 (1) を増やしてタイトルとリンク ノードのインデックスを調整する必要があります:
コピー コード
コードは次のとおりです:
} var _title; =response.getElementsByTagName('title')[i].firstChild.data; var _link = response.getElementsByTagName('link')[i].firstChild.data; を使用できます。特定のタグが存在するかどうかを確認する checkForTag メソッド: function checkForTag(tag){
if(tag != unknown) { return true;
}
else{
return false ;
}
}
フィード分析を実行するにはさまざまな可能性があります。たとえば、項目をカテゴリに割り当て、そのカテゴリを折りたたみ可能にして、ユーザーが見たいものを選択できるようにすることができます。例として、日付を使用してアイテムを分類します。これは、特定のアイテムの pubDate が前のアイテムの pubDate と異なるかどうかを解読し、それに応じて新しい日付を表示することで実現されます:
コードをコピー コードは次のとおりです:
if(i>1){
varPreviousPubDate = response.getElementsByTagName('pubDate')[i-1 ] .firstChild.data;
}
if(pubDate !=PreviousPubDate ||previousPubDate == 未定義){
_copy = "
コードをコピー コードは次のとおりです。次のように:
function showDetails(index){
document.getElementById('details').innerHTML = response.getElementsByTagName('description')[index].firstChild.data; >}
結論