PHP および Sajax を介した JavaScript での Ajax の使用

何年もの間、真にレスポンシブな Web アプリケーションを作成するという目標は、Web 開発の単純な事実によって妨げられてきました。ページの一部の情報を変更するには、ユーザーはページ全体をリロードする必要があります。しかし、もうそんなことは起こらないでしょう。非同期 Javascript と XML (Ajax) のおかげで、サーバー側から新しいコンテンツをリクエストして、ページの一部のみを変更できるようになりました。このチュートリアルでは、PHP で Ajax を使用する方法を説明し、サーバーサイド PHP と JavaScript を統合する PHP で書かれたツールである Simple Ajax Toolkit (Sajax) を紹介します。

始める前に

このチュートリアルは、リッチ Web アプリケーションの開発に興味がある人を対象としています。リッチ Web アプリケーションは、非同期 JavaScript と XML (Ajax) を PHP と組み合わせて、ユーザーがクリックするたびにページ全体を更新する必要がありません。 . コンテンツを動的に更新できます。このチュートリアルは、読者が if ステートメントや switch ステートメント、関数の使用法などの基本的な PHP 概念を理解していることを前提としています。

このチュートリアルについて

このチュートリアルでは、Ajax とそのアプリケーションを取り巻く問題について学びます。以前に作成したチュートリアルのパネルを表示する Ajax アプリケーションを PHP で構築します。パネルのリンクをクリックすると、コンテンツ領域が再ロードされ、選択したパネルのコンテンツに置き換えられるため、帯域幅とページのロード時間を節約できます。 Simple Ajax Toolkit (Sajax) は Ajax アプリケーションに統合され、Ajax の使用を同期できるため、開発が簡素化されます。

概要

本題に入る前に、Ajax、サンプル PHP アプリケーション、および Sajax を見てみましょう。 Ajax

Ajaxを使用すると、Web開発者はページの読み込みを待たなければならないというボトルネックを回避しながら、インタラクティブなWebページを作成できます。 Ajax で作成されたアプリケーションは、ボタンをクリックするだけで、Web ページの領域内のコンテンツをまったく新しいコンテンツに置き換えることができます。これの素晴らしい点は、ページが読み込まれるまで待つ必要がなく、この領域のコンテンツのみを読み込む必要があることです。 Google マップを例に挙げると、ページが読み込まれるのを待たずに、クリックして地図を移動できます。

Ajaxの問題

Ajaxを使用する際に注意しなければならないことがいくつかあります。他の Web ページと同様に、Ajax ページはブックマークできるため、GET および POST を使用してリクエストを行うときに問題が発生する可能性があります。国際化とエンコード方式の数の増加により、これらのエンコード方式を標準化することがますます重要になっています。このチュートリアルでは、これらの重要な問題について学びます。

サンプル PHP アプリケーション

このツールキットを使用する利点を示すために、最初に Ajax で、次に Sajax でアプリケーションを作成します。このアプリケーションは、パネルへのリンクが付いた以前に作成されたチュートリアルの一部です。これは、Ajax を使用する利点を示す例として使用されます。個々のパネルをクリックすると、ページの残りの部分が再度読み込まれるのを待つことなく、パネルが非同期的に読み込まれるためです。このサンプル アプリケーションでは、独自の Ajax アプリケーションを作成する方法も示します。

Sajax

Ajax アプリケーションを作成したい場合、Ajax の複雑な詳細に負担をかけたくありません。答えはサヤックスです。 Sajax は、ModernMethod の人々によって開発されたライブラリを使用して、Web 開発者向けに Ajax の高レベルの詳細を抽象化します。内部では、Sajax は Ajax と同じように機能します。ただし、Sajax ライブラリが提供する高レベル関数を使用することで、Ajax の技術的な詳細は無視できます。

Ajaxって何ですか？

このセクションは、リンクをクリックしたときに何が起こるか、Ajax を PHP アプリケーションで使用するときに必要な HTML および JavaScript コードなど、Ajax の概念を例を使用して説明する入門的な紹介です。次のセクションではもう少し詳しく説明し、このセクションで学んだ Ajax の概念を使用して PHP アプリケーションを実際に作成します。

内部の様子

Ajax は、非同期 JavaScript と XML を組み合わせたものです。非同期と言ったのは、ページ上のリンクをクリックすると、タイトルやその他の設定情報はそのままで、クリックに対応するコンテンツのみが読み込まれるからです。

リンクをクリックすると、裏で動いているのがJavaScriptの関数です。 JavaScript は、Web ブラウザと通信し、ブラウザに特定のページをロードするように指示するオブジェクトを作成します。その後、同じページ上の他のコンテンツを通常どおり参照でき、ブラウザが新しいページを完全にロードすると、ブラウザは HTML div タグで指定された場所にコンテンツを表示します。

CSSスタイルコードはspanタグと併用してリンクを作成します。

CSS スタイル コード

サンプル アプリケーションでは、span タグが通常のアンカー タグ ( リスト 1. 表示情報の指定スパンタグの

...