jQuery in Action Ch.8 筆記

2009-06-30

ch.8 Talk to the server with Ajax

8.1 Brushing up on Ajax

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

8.2 Loading content into elements
8.2.1 Loading content with jQuery

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

load(url,parameters,callback)

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

而如果要使用表單中的值帶入參數
可以利用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()

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

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

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

8.2.2 Loading dynamic inventory data

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

8.3 Making GET and POST requests
8.3.1 Getting data with jQuery
$.get(url,parameters,callback)

以get method連線

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

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

8.3.2 Getting JSON data
$.getJSON(url,parameters,callback)

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

8.3.3 Making POST requests
$.post(url,parameters,callback)

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

8.4 Taking full control of an Ajax request

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

8.4.1 Making Ajax requests with all the trimmings
$.ajax(options)

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

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

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

8.4.2 Setting request defaults
$.ajaxSetup(properties)

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

8.4.3 Global functions

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

8.5 Putting it all together

是一個綜合練習的例子

發表迴響

彙整

分類