だから広範囲に我々は何をすべきか、これらの日だAJAX AJAXとAJAX、。 それは、時間を節約するダイナミクスを追加し、あなたの肌ざわりのソフトウェアアプリケーションの種類を使用しての感触を与えます。 多くの図書館でAJAXを使用する多くの方法がありますね。 しかし、このサイトはjQueryのためであることがわかりますように、我々は基本的なまたは多分いくつかの先進的なAJAXの用法を見てみましょう。
あなたは私たちには何が必要ですか？
jQueryライブラリ（もちろん）
小さなPHPスクリプト
レッツが話し始めた。 jQueryのでは、AJAXの操作を行うための方法の6種類は基本的にあります。 これらは、
- $。AJAX（オプション）
- $。取得（URL、データ、コールバック）
- $。getJSON（urlに、データ、コールバック）
- $。getscriptが（URL、コールバック）
- 負荷（URL、データ、コールバック）
- $。ポスト（URL、データ、コールバック、
別に1番から、他のすべてのメソッドは、$を使用しています。AJAXは内部。 だから$を意味する。アヤックス（）は、jQueryのAJAX操作のための私たちの母関数である。 どのように$を見てみましょう。Ajaxは（）のように見える
msg ) ; } } ) ; 応答"+ MSG）;}}）; |
これはかなりそれだ。 typeパラメータは、 "GET"や、POSTとしてAJAXのrequestionを送信したり（私は常にPOSTを好む）を入手できることを意味し、 "POST"かかります。 再度コードを見てみた場合、パラメータの残りの部分はかなり自明です。
今、私たちは、ハイパーリンクタグのリンク（<A>）を読み込み、文書内の一部のdiv要素に要求をロード小さなAJAXスクリプトを作るつもりだ。
まず、次のようになりますPHPのドキュメントの通常のHTMLを取る
<DOCTYPE HTML PUBLIC " - / / W3C / / DTD XHTML 1.0厳密/ / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<HEAD>
<TITLE> Ajaxのリンクテスト</タイトル>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="jquery-1.2.6.min.js"> </ SCRIPT>
</ HEAD>
<BODY>
</ BODY> </ HTML> |
今度は、文書にいくつかのリンクを追加してみましょう。 外観の良いメニューの種類のために私達はUL> LIとリンクを使用します。 つまり、このようになります
<ul id="nav">
<LI> <a class="ajax_link" rel="div1" href="response.php?user=john">ディビジョン1でのロード</ a>を</李>
<LI> <a class="ajax_link" rel="div2" href="response.php?user=nash">ディビジョン2でのロード</ a>を</李>
<LI> <a class="ajax_link" rel="div3" href="response.php?user=stella">ディビジョン3でのロード</ a>を</李>
<LI> <a class="ajax_link" rel="div4" href="response.php?user=jason">ディビジョン4でのロード</ a>を</李>
</ UL> |
あなたが見ることができるように私たちは、順不同のリストオブジェクトの内部リスト要素内のリンクを入れている。 <a>タグのプロパティを詳しく見てみましょう。 私たちは、HREF、クラスと通常のリンクとは別の何も見えませんrel属性を持っている。 あなたが表示された場合、私たちはいくつかのdiv名すなわちDIV1、DIV2にrel属性を与えて.. というように。 これは、我々はそれらのdiv要素にロードするのhrefの応答をしたいことを意味します。 それを行う方法？ 最初にそれらのdiv要素を追加してみましょう
<SPAN> DIV -1 </スパン>
<div id="div1" class="content_loader"> </ DIV>
の<span> DIV -2 </スパン>
<div id="div2" class="content_loader"> </ DIV>
<SPAN> DIV -3 </スパン>
<div id="div3" class="content_loader"> </ DIV>
<SPAN> DIV -4 </スパン>
<div id="div4" class="content_loader"> </ DIV> |
そして今、実部 - 私たちはリンクのクラス "ajax_link"を与えている。 我々は唯一の動的AJAXアクション "ajax_link"というクラス名を持つだけにリンクを追加します。 地獄、私たちはページのすべてのリンクはAJAXアクションを持っていない、我々は何？
だから、文書の負荷に我々はこれを行うと思います。
. ready ( function ( ) { $（ドキュメント）。 レディ （ 関数 （）{
) . click ( function ( ) { $（ "a.ajax_link"）。 クリック （ 関数 （）{
this ) ; $ current_link = $（ この ）;
$。AJAX（{
,タイプ： "ポスト"、
( "href" ) , URL：$ current_link attrは （ "HREF"）、
( e ) {成功： 関数 （E）{
+ $current_link. attr ( "rel" ) ) . html ( e ) ; 。$（ "＃" + $ current_link attrは （ "REL"））html の （E）;
}
}）;
; falseを 返します ;
}）;
}）; |
私はスクリプトを少し説明しましょう。 document.readyイベントは、ページのロード時にトリガーされるイベントです。 そして、我々は、クラス "ajax_link"を持ってリンクのクリックイベントにコードのいくつかの並べ替えを代入しています。 この$ current_link = $（this）を行うと、現在のリンクオブジェクトは、コールバック関数内で使用できるように持つことができます。 そして、私たちは持っている
$（ "＃" + $ current_link.attr（ "REL"））。htmlの（e）の
。これは、HTML（server_response）が（ "div_id"）$を意味し、私たちは、URLを使用して動的に$ AJAX機能のurlパラメータを設定している：$ current_link.attr（ "HREF"）。 だから今は、これらすべての手段ajax_link "クラスを持つすべてのこれらのリンク" " - クリックイベントハンドラを追加します - リンクを取って、次に実行し、AJAXリクエストHREF popertyとIDが一致したdiv要素に応答を読み込む"のREL "属性をリンク "。 と偽のリターンは、通常のリンクのようにリンク作業を防止 
ワナ？それにアクションを参照してくださいここにそれは行く。
そして、あなたがすることができ、ソースをダウンロードして同様に。
この小さなチュートリアルの次のセクションではなく、快適さを少しでも同じことを使用することがあります。
簡単な方法を適用する
すべてがほぼ同じままです。 私達はちょうどここにAjaxの手法を変更します。 我々は、次のと同じことを達成することができますので、全体ではなく$を書いている。Ajaxのブロック。
. ready ( function ( ) { $（ドキュメント）。 レディ （ 関数 （）{
) . click ( function ( ) { $（ "a.ajax_link"）。 クリック （ 関数 （）{
+ $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; 。$（ "＃" + $（this）を ATTR（ "REL"）） 負荷 （$（this）を ATTR（ "HREF"））;
; falseを 返します ;
}）;
}）; |
まさに、今、はるかに少ない複雑なのですか？ loadメソッドは、それが添付いる要素内のAjaxコンテンツをロードします。 （ "＃somediv_id"）$場合、負荷（ "mypage.php"）、それはそれでmypage.phpのコンテンツをロードしようとするでしょう。 かなりシンプルでしょ？ しかし、私はあなたがmainメソッド（最初の部分に示されている）に慣れることをお勧めします。
zipファイルで呼び出される別のファイルありajax2.php同じ結果を持っているこのmethosを示しています。
だから、AJAX、右、それは思ったほど難しいことではありません？ あなたはAJAX操作と非常に流暢になるときには、魔法を作成します。
ところで読んでくれてありがとう。
最近のコメント