AJAXとは何ですか?
AJAX = 非同期 JavaScript および XML。
AJAX は、高速で動的な Web ページを作成するためのテクノロジーです。
AJAX を使用すると、バックグラウンドでサーバーと少量のデータを交換することで、Web ページを非同期に更新できます。これは、ページ全体を再読み込みしなくても、Web ページの一部を更新できることを意味します。
従来の Web ページ (AJAX を使用しない) では、コンテンツを更新する必要がある場合、Web ページ全体をリロードする必要があります。
AJAX を使用するアプリケーション ケースは数多くあります: 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(){
//按钮单击时执行
$("#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 呼び出しの例を完成させます。
次のセクション