jQuery - AJAX 簡介

什麼是 AJAX ?

AJAX = 非同步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

AJAX 是一種用於建立快速動態網頁的技術。

透過在後台與伺服器進行少量資料交換,AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下,對網頁的某個部分進行更新。

傳統的網頁(不使用 AJAX)如果需要更新內容,則必須重載整個網站頁面。

有許多使用 AJAX 的應用程式案例:新浪微博、Google 地圖、開心網等等。

關於jQuery 與AJAX

JQuery是輕量級的js函式庫,它相容於CSS3,也相容於各種瀏覽器(IE 6.0+, FF1.5+, Safari 2.0 +, Opera 9.0+)。 jQuery讓用戶能更方便地處理HTML documents、events、實現動畫效果,並且方便地為網站提供AJAX互動。

透過jQuery AJAX 方法,您能夠使用HTTP Get 和HTTP Post 從遠端伺服器上請求文字、HTML、XML 或JSON - 同時您能夠將這些外部資料直接載入網頁的被選元素中。


#實例:

先展示一個前端程式碼:

<!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呼叫實例。

繼續學習
||
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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", //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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
图片放大关闭