1. 程式人生 > >2014年辛星jquery解讀第三節 Ajax

2014年辛星jquery解讀第三節 Ajax

執行 情況 clas mod ajax type name lba html

***************Ajax*********************

1.Ajax是Asynchronous Javascript And XML的簡寫,它指的是異步Javascript和XML。簡單來說,就是不刷新整個頁面的情況下來和server端進行數據的交互,而且可以在網頁上進行顯示。

2.jQuery對Ajax的支持還是比較完好的。它能夠讓我們以GET或者POST方式從server讀取信息,而且顯示它。

3.jQuery通過以下幾個方法對Ajax進行支持。


**************load方法*******************

1.load方法從server載入數據。而且把返回的數據放入被選元素中。語法格式:

$(選擇器).load(URL,data,callback);

2.這裏的URL就是我們希望發送數據到的URL地址,data參數是 可選的,它規定與請求一同發送的查詢字符串鍵值對的集合。可選的callback參數是load方法完畢之後所運行的函數名稱。

3.比方我們後臺server以php為例,我們先寫一個前臺的html文件,代碼例如以下:

<html>
<head>
	<script src = "jquery.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$("button").click(function(){
			$("#msg").load("http://localhost/a.php");
			});
		}
	);


	</script>
</head>
<p>該段文本不會被刷新</p>
<p id= "msg">點擊以下按鈕顯示信息</p>
<button>查詢</button>
</html>
然後我們還須要在www文件夾或者htdocs文件夾下新建一個a.php文件,它的內容例如以下:

<?php

echo "我是辛星";
然後我們執行頁面。當我們點擊“查詢”button的時候,發現上面的文本沒有變化,可是“點擊以下button顯示信息”變成了”我是辛星“,這就是一次簡單的異步傳輸。


************說明****************

1.當然load還有其它參數。詳細的能夠參照手冊。

2.還有兩個函數應用也非常廣泛。那就是get和post,我們下一節講到。



2014年辛星jquery解讀第三節 Ajax