jQuery - AJAX の概要
AJAXとは何ですか?
AJAX = 非同期 JavaScript および XML。
AJAX は、高速で動的な Web ページを作成するためのテクノロジーです。
AJAX を使用すると、バックグラウンドでサーバーと少量のデータを交換することで、Web ページを非同期に更新できます。これは、ページ全體を再読み込みしなくても、Web ページの一部を更新できることを意味します。
従來の Web ページ (AJAX を使用しない) では、コンテンツを更新する必要がある場合、Web ページ全體をリロードする必要があります。
AJAX を使用するアプリケーション ケースは數(shù)多くあります: Sina Weibo、Google Maps、Kaixin.com など。
jQuery と AJAX について
JQuery は、CSS3 およびさまざまなブラウザー (IE 6.0 以降、FF1.5 以降、Safari 2.0 以降、Opera 9.0 以降) と互換性のある軽量の JS ライブラリです。 jQuery を使用すると、ユーザーは HTML ドキュメントとイベントをより簡単に処理し、アニメーション効果を実裝し、Web サイトに AJAX インタラクションを簡単に提供できるようになります。
jQuery AJAX メソッドを使用すると、HTTP Get および HTTP Post を使用してリモート サーバーからテキスト、HTML、XML、または JSON をリクエストできます。また、この外部データを Web ページの選択した要素に直接読み込むことができます。
例:
最初にフロントエンドコードを表示します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//按鈕單擊時執(zhí)行
$("#testAjax").click(function(){
//Ajax調用處理
var html = $.ajax({
type: "POST",
url: "text.php",
data: "name=garfield&age=18",
async: false
}).responseText;
$("#myDiv").html('<h2>'+html+'</h2>');
});
});
</script>
</head>
<body>
<div id="myDiv"><h2>通過 AJAX 改變文本</h2></div>
<button id="testAjax" type="button">Ajax改變內容</button>
</body>
</html>背景のPHPコードの一部を表示した後、それにtext.phpという名前を付けました:
<?php $msg='Hello,'.$_POST['name'].',your age is '.$_POST['age'].'!'; echo $msg; ?>
このようにでは、JQuery の単純な Ajax 呼び出しの例を完成させます。
