jQuery と PHP を使用して Ajax 駆動の Web ページを構築する (1)_PHP チュートリアル

ほとんどの PHP 開発者は、昔ながらの方法でスキルを学びました。彼らは通常、単純な PHP ページを定義して構築する方法を学び、次にそれらのページを単純な MySQL テーブルに接続し、そこから独自のページを開発する方法を学びます。スキル レベルが上がるにつれて、より複雑な PHP 関数の作成方法、MySQL 内でのテーブルの結合方法、その他の高度なタスクの実行方法も学びます。

その過程で、Web アプリケーションを使用するためのクライアント側のスキルを習得することもあります。 XHTML や CSS、さらには JavaScript プログラミングについて学ぶこともできます。取り組むプロジェクトの種類が増えるにつれ、Ajax を使って Web アプリケーションに Web 2.0 または「デスクトップ」の雰囲気を与える機会も得られるかもしれません。ただし、Ajax を初めて使用した経験が私と同じであれば、さまざまな関数を手動で実装し、Ajax 駆動のページを作成する骨の折れるプロセスを経るなど、すでにやりすぎていることでしょう。

Ajax はまだ一部の人にとって謎です。これは、Web 開発/インタラクション コミュニティの「クールな子」や「悪い子」がやっているようなことのようですが、彼らにはそれを理解して使用する時間も忍耐力も能力もありません。多くの顧客は Ajax スタイルの機能を追加することを好むため、これは非常に残念です。Ajax スタイルの機能を追加すると、Web アプリケーションが使いやすくなります。あなたがこれらの PHP 開発者の一人であれば、心配する必要はありません。この記事を読んだ後は、真の Ajax プロになるのに十分な知識が得られます。

この記事では、jQuery を使用して Ajax 機能を PHP Web アプリケーションに簡単に追加する方法を説明します。 PHP と MySQL を使用して、名前と電話番号を含む電話帳という単純な Web アプリケーションを構築します。このアプリには、名前や電話番号を検索できること、MySQL テーブルがあることなど、期待されるすべての標準機能が備わっています。次に、jQuery をアプリケーションに追加して、入力時に名前と電話番号をリアルタイムで検索できるようにします。上記のタスクを完了すると、jQuery と Ajax に関する十分な基本知識が得られます。

Ajax とは何ですか?

Ajax を説明する最良の方法は、従来の方法と対比することです。ほとんどの Web ページとアプリケーションは同期モードで動作します。リンクまたはフォームの送信ボタンをクリックすると、サーバーにリクエストが送信され、サーバーはリクエストを処理して応答を返します。このモデルを一言で表すと、「クリックして、待って、見てください」ということになります。これは、終わりのないすすぎと繰り返しのサイクルとして知られているものです。言い換えれば、ページが更新された情報を頻繁に表示する必要がある場合は、何らかの自動更新ハックを導入する必要があります。さもなければ、ユーザーが更新するかリンクをクリックして更新を実行できるようにする必要があります。

Ajax はすべてを変えます。 Ajax の最初の文字 A は非同期を表します。 Ajax を使用すると、任意のプログラミング言語でページを作成し、データベースやその他のバックエンド サーバー プロセスからの情報を使用してページのさまざまな部分を更新できます。たとえば、販売する商品を表示する電子商取引サイトがあるとします。すべての商品ページには、タイトル、販売説明、サムネイル画像、在庫数量などの共通項目がいくつかあります。

Web サイトの訪問者に在庫数量に関する最新情報を取得させたいとします。 MySQL クエリを含む別の PHP ページを実行し、ユーザー入力やイベントのクリック待機ビュー Synchronicity モードを使用せずに、元のページに情報を再入力する Ajax 関数を追加できます。

Ajax の j は JavaScript を表し、すべてのアクションの原動力となります。これは良い点でもあり、悪い点でもあります。良い点は、これがクライアント側のコードであるため移植性があり、サーバーに影響を与えないことです。PHP 開発者にとって悪い点は、これまでのコードとは完全に異なることです。 . その環境。これには、Ajax との対話方法を大幅に簡素化し、コード補完を高速化する jQuery などのツールとフレームワークが必要です。

最後の 2 つの項目: + と x は何を表しますか?これらは と XML を表しますが、XML 部分は正確ではありません。 Ajax アプリケーションの多くは、XML コードがなくても問題なく動作します。HTML をやり取りするだけで、プレーン テキストを渡すだけです。このオブジェクトを使用すると、既存のページの表示や動作を妨げずにバックグラウンドでデータを取得できるため、x で XMLHttpRequest を表す方がより正確です。

jQueryとは何ですか?

jQuery は、John Resig によって作成され、2006 年初めにインターネットにリリースされた軽量の JavaScript ライブラリです。これは、マサチューセッツ工科大学 (MIT) と GNU 一般公衆利用許諾書の両方に基づいてライセンス供与された、無料のオープンソース ソフトウェアです。シンプルで直観的であるため、開発コミュニティの多くの人々を魅了しています。

それではなぜそんなに人気があるのでしょうか？なぜなら、JavaScript を簡素化する使いやすいライブラリを提供しているため、誰でも (そう、精通したバックエンド プログラマーでも) 苦労せずに並外れたエフェクトを作成できるからです。ドキュメント オブジェクト モデル (DOM) 要素の選択、CSS の変更と操作、要素の魅力化、Ajax の処理を​​行うことができます。この機能はすべて、jQuery サイトからダウンロードできる JavaScript ファイルから実装されています (「参考文献」を参照)。

jQuery をダウンロードした後、単純な ﹤script﹥ タグを含めることで、それを任意の HTML または PHP ファイルに追加できます:

﹤script type="text/javascript" src="/path/to/jquery.js"﹥﹤/script﹥

非常に単純だが面倒なタスクを実行する必要があるとします。サイト上のすべてのフォームタグの末尾にコロン (:) を追加するなど、多くの手作業が必要になります。各 form タグをループして各行の末尾にコロンを追加することも、次のように jQuery コードをデプロイすることもできます。

リスト 1. jQuery を使用してコロンを追加します。 (function(){

$("label").append(":"); }); もちろん、jQuery を使ってできることは他にもたくさんあります。これは単なる始まりに過ぎません。 jQuery は、単純な組み込み関数を使用して、ページの読み込みを待機している間にコードが確実に動作するようにします。別のコード行を使用すると、すべてのタグを面倒にループしてそこで変更を加えなくても、コードで見つかったすべての DOM ラベル要素に大幅な変更をクライアント内で加えることができます。

﹤/script﹥

この関数は単純です。準備が整い、完全にロードされると ($(document).ready() 部分)、すべての DOM ラベル要素を検索し、見つかったテキストの末尾にコロンを追加する匿名関数が実行されます。 $() 関数の機能を使用すると、ローカル名で DOM 要素にアクセスできるため、このインターフェイスは、すでに DOM に精通している開発者にとって最適な選択肢になります。

1

http://www.bkjia.com/PHPjc/446637.html
www.bkjia.com

tru​​e

http://www.bkjia.com/PHPjc/446637.html技術記事ほとんどの PHP 開発者は、昔ながらの方法でスキルを学びます。通常、彼らは最初に単純な PHP ページを定義して構築する方法を学び、次にそれらのページを単純なページに接続する方法を学びます...