jQuery in Action Ch.8 筆記

ch.8 Talk to the server with Ajax

簡單地說明了ajax運作的過程

首先先介紹jQuery中ajax最簡單的一個command

url是要求的網址
parameters是以object形式帶入的參數
如果有值是使用POST method，省略的話則是使用GET method
callback是當load好的值已經被放入elements後執行的function
這個function有三個參數 response text、the status code跟the XHR instance

$('.injectMe').load('/someResource #div');

這個例子會讀取/someResource頁面的東西
並將內容填入所有class=injectMe的elements中
有一點可以提的是 在url這個參數中 如果只是要取得該頁面上部份的內容時
可以在後面加上selector
像這個例子就是取得/someResource中<div>裡的內容

而如果要使用表單中的值帶入參數
可以利用serialize()來將要傳送的值轉成query string

<form id="form1" name="form1">
<input type="text" name="myname" value="joe">
<input type="text" name="age" value="18">
<input type="text" name="city" value="taipei">
</form>

var str = $("#form1").serialize();
//str會轉成這樣
// myname=joe&age=18&city=taipei

而serializeArray()則是會返回一個object

var myobj = $("#form1").serializeArray();

myobj會轉成這樣
[{name: 'myname', value:'joe'},{name: 'age', value:'18'},{name: 'city', value:'taipei'}]

舉一個賣鞋的頁面來練習load()

以get method連線

$.get(
	'getmydata.php',
	{a:1, b:2, c:3},
	function(data){alert(data);}
);

url是要求的網址
parameters是參數(Object或是字串)
callback是返回的function 這個function可以有兩個參數 第一個是返回的內容 第二個是status

url是要求的網址
parameters是參數(Object或是字串)
callback是返回的function 這個function可以有兩個參數 第一個是返回的內容 第二個是status
與$.get()相同 但是是返回JSON形式的值

以post method連線
url是要求的網址
parameters是參數(Object或是字串)
callback是返回的function 這個function可以有兩個參數 第一個是返回的內容 第二個是status

前一節介紹的是簡易的ajax連線方式
這節則是會介紹比較詳細 可以設定較多細節的方式

可以帶的參數很多
這裡舉較常使用的三個
其他的可以到docs看

$.ajax({
  url: "test.js",
  type: "GET",
  dataType: "script"
});

url是要求的網址
type是POST或是GET
dataType是返回值的形式 可以填入的有xml、xml、xml、json、jsonp、text

$.ajaxSetup()設定同一個頁面中$.ajax()可以共用的參數
可以帶入的參數也就是前一小節(8.4.1)所說的參數
這個不會影響到load()
而設定type時也不會影響到$.get()跟$.post()

除了可以用$.ajaxSetup()預設參數外
還有在ajax連線中的不同階段可以使用的function
ajaxStart()、ajaxSend()、ajaxSuccess()、ajaxError()、ajaxComplete()、ajaxStop()
可以到docs看

是一個綜合練習的例子