jQuery和AJAX

轉自: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 parameter specifies the URL to send the request to.

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(){

$("button").click(function(){

$("div").load('test1.txt',function(){alert("abc");});

});

});

</script>

</head>

<body>

<div>

<h2>Let AJAX change this text</h2>

</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(){

$("button").click(function(){

$.ajax({url:"test1.txt",success:function(result){

$("div").html(result);

}});

});

});

</script>

</head>

<body>

<div>

<h2>Let AJAX change this text</h2>

</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數組


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章