轉自:http://blog.sina.com.cn/s/blog_6d3c1ec60101civr.html
參考網站
http://www.w3schools.com/jquery/jquery_ajax.asp
A、AJAX
AJAX = Asynchronous JavaScript and XML.
AJAX is not a new programming language, but a new way to use existing standards.
AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.
異步JavaScript和XML。
AJAX不是一個新的程序語言,而是使用現存標準的一種新方法。
AJAX和服務器交換數據,並修改web網頁的一部分,而不是重新加載整個網頁。
B、jQuery實現AJAX
若不用jQuery只使用標準的JavaScript也可以實現AJAX。但是jQuery提供了更爲方便的方式。
jQuery provides a rich set of methods for AJAX web development.
With jQuery AJAX, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post.
And you can load remote data directly into the selected HTML elements of your web page!
jQuery爲AJAX Web開發提供了大量方法。
通過jQuery AJAX,你可以從遠程服務器上使用HTTP Get或HTTP Post來請求text,html,xml,json等。
你可以在你的web頁面上選中的HTML元素中直接加載遠程服務器的數據。
B.1、load()方法
The jQuery load() method is a powerful AJAX function. It loads data from a server and puts the returned data into the selected element.
jQuery的load()方法是非常有用的AJAX函數。它從服務器上加載數據並把返回的數據放到選中的HTML元素中。
Syntax(語法)
$(selector).load(URL,data,callback);
The required
URL:指定請求的URL。
The optional data parameter specifies data to send to the server along with the request.
data(可選):指定通過請求發送的服務器上的數據。
The optional callback parameter is the name of a function to be executed after the request is completed.
callback:指定在請求成功執行之後回調函數的名稱。
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
});
</script>
</head>
<body>
<div>
</div>
<button>Change Content</button>
</body>
</html>
B.2、$.ajax()
The jQuery $.ajax() method also performs an AJAX request.
$.ajax() offers more functionality than load(), get(), and post(), but it is also more difficult to use.
jQuery的$.ajax()方法也是執行一個AJAX請求。
$.ajax()比load(), get(), post()提供更多的功能,但是它也比它們更難以使用。
Syntax(語法)
$.ajax(options);
The options parameter takes name:value pairs defining URL, passwords, data types, filters, character sets, timeout and error functions.
options:該參數以name:value成對出現,定義了URL,passwords, data types, filters, character sets, timeout和error functions。
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
});
</script>
</head>
<body>
<div>
</div>
<button>Change Content</button>
</body>
</html>
B.3、其它jQuery AJAX方法
$.ajax()
Performs an AJAX request
ajaxComplete()
Specifies a function to run when the AJAX request completes
指定一個函數在完成執行AJAX請求後運行它。
ajaxError()
Specifies a function to run when the AJAX request completes with an error
指定一個函數在完成執行AJAX請求但帶有錯誤後運行它。
ajaxSend()
Specifies a function to run before the AJAX request is sent
指定一個函數在AJAX請求發送前運行它。
$.ajaxSetup()
Sets the default values for future AJAX requests
爲未來的AJAX請求設置默認值。
ajaxStart()
Specifies a function to run when the first AJAX request begins
指定一個函數當地一個AJAX請求開始時運行它。
ajaxStop()
Specifies a function to run when all AJAX requests have completed
指定一個函數當所有AJAX請求完成後運行它。
ajaxSuccess()
Specifies a function to run an AJAX request completes successfully
指定一個函數當某個AJAX請求成功執行後運行它。
$.get()
Loads data from a server using an AJAX HTTP GET request
使用AJAX HTTP GET請求來加載服務器數據。
$.getJSON()
Loads JSON-encoded data from a server using a HTTP GET request
使用HTTP GET請求來加載服務器上的JSON數據。
$.getScript()
Loads (and executes) a JavaScript from the a server using an AJAX HTTP GET request
使用HTTP GET請求加載並執行服務器上的一個JavaScript。
load()
Loads data from a server and puts the returned HTML into the selected element
$.param()
Creates a serialized representation of an array or object (can be used as URL query string for AJAX requests)
爲一個數組或對象創建一個可序列化的表示法。
$.post()
Loads data from a server using an AJAX HTTP POST request
使用AJAX HTTP POST請求來加載服務器數據。
serialize()
Encodes a set of form elements as a string for submission
把一組form元素編碼成string用來提交
serializeArray()
Encodes a set of form elements as an array of names and values
把一組form元素編碼成name和value數組