以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

AJAX - 基礎技術及工具

3/3 12' icon

AJAX 基礎技術

AJAX 的基礎技術,這裡指的是程式架構語法,非常固定,由幾個部份組成

  1. 建立 XMLHttpRequest 物件
  2. 選擇以 get 或 post 方式呼叫主機端處理的程式
  3. 判斷執行結果,如果順利取得回傳資料,進行相對應設計

以上三則,是三件獨立工作,合起來就叫作 AJAX,分開來說明

建立 XMLHttpRequest 物件

XMLHttpRequest 物件是瀏覽器內建的一項物件,本質上和 Date 物件,String 物件等沒什麼不同,以 new 開頭宣告即可,例如 new XMLHttpRequest(),請注意,指令是區分大小寫的。

Date 物件,在中文稱為日期物件,String 在中文稱為字串物件,而 XMLHttpRequest 在中文則可以簡單稱為「連線物件」

但,某些瀏覽器,支援同樣的動作,但宣告的語法不同,例如 IE,早在 IE 5.x 就已經支援建立 XMLHttpRequest 連線,只不過,是透過 activeX 模式進行,語法是 new ActiveXObject("Microsoft.XMLHTTP"),將上述的語合併,建立一支副程式,看起來可能像:

function createXHR(){
	var xmlhttp;
	if (window.XMLHttpRequest){
		//如果瀏覽器支援 XMLHttpRequest 物件時,例如 FireFox
		xmlhttp=new XMLHttpRequest();
	}else if (window.ActiveXObject) {
		//如果上述不成立,但支援 activeX 時,例如 IE
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}

	if (!xmlhttp){
		//建立失敗,也可以顯示些訊息
		return false;
	}else{
		//建立物件成功,回傳物件
		return xmlhttp;
	}
}

使用時,則簡單以 var xmlhttp=createXHR(); 來取得連線物件即可。

建立一段 AJAX 副程式

正如一開始所提到的,AJAX 格式非常固定,以下直接以程式來說明如何建立一段 AJAX 副程式

function myAJAX(param){
	//建立 XMLHttpRequest 物件
	var xmlhttp=createXHR();

	//  選擇以 get 或 post 方式呼叫主機端處理的程式
	xmlhttp.open('get',url,true);
	//xmlhttp.open('post',url,true);
	//  判斷執行結果
	xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4){
			if (xmlhttp.status == 200) {
				//執行正確取得資料後想執行的動作
			}else{
				//無法取得正碓資料時的動作
			}
		}
	};
	xmlhttp.send(null);
	//xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	//xmlhttp.send(formData);
}

三個動作,在上面的程式例中列出,以上就完成了 AJAX 的程式架構

細說

選擇以 get 或 post 方式呼叫主機端處理的程式部份,語法參見第 6,7 兩行,第 6 行是以 get 方式呼叫,第 7 行則是以 post 方式呼叫。

如果選擇以 get 方式呼叫,那送出呼叫的動作,就如第 18 所示;如果是以 post 方式呼叫,則無需第 18 行,改用第 19 及 20 行。

第 19 行是固定寫法,第 20 行則是把要傳送的參數先處理成以下格式

字串=值&字串=值&字串=值....

get 及 post 的差異,和表單的 get/post 相同,以 method="get" 送出的表單,你會在網址列上看到例如

http://tw.search.yahoo.com/search?p=大樂透&fr=yfp&ei=utf-8&v=0

而使用 post 方式傳遞,則在網址列上,看不到 ? 以後的內容,套回 AJAX 程式,如果是以 get 方式進行,程式看起來可能像

function myAJAX(param){
	//建立 XMLHttpRequest 物件
	var xmlhttp=createXHR();

	//  選擇以 get 或 post 方式呼叫主機端處理的程式
	xmlhttp.open('get','/search.asp?p=大樂透&fr=yfp&ei=utf-8&v=0',true);
	//  判斷執行結果
	xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4){
			if (xmlhttp.status == 200) {
				//執行正確取得資料後想執行的動作
			}else{
				//無法取得正碓資料時的動作
			}
		}
	};
	xmlhttp.send(null);
}

以 post 方式傳遞,程式看起來可能像

function myAJAX(param){
	//建立 XMLHttpRequest 物件
	var xmlhttp=createXHR();

	//  選擇以 get 或 post 方式呼叫主機端處理的程式
	xmlhttp.open('post','/search.asp',true);
	//  判斷執行結果
	xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4){
			if (xmlhttp.status == 200) {
				//執行正確取得資料後想執行的動作
			}else{
				//無法取得正碓資料時的動作
			}
		}
	};
	xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	xmlhttp.send('p=大樂透&fr=yfp&ei=utf-8&v=0');
}

請比較兩段程式中的第 6 行,以及第 17 行以後的內容。

工具程式

以上列的程式例來說,不管使用 get 或 post,以傳送整個表單來說,基本上,都要產生 QueryString,也就是 字串=值&字串=值 這種型態內容,只不過,get 方式可能比較適用於簡單字串傳遞,或無安全顧慮的傳輸方式。

因此,把一份表單中所有欄位中的值變成符合需求的一整串字串是可能必備的工具程式,範例如

function getFormValue(form){
	var str='',ft,fv;

	for (var i=0;i<form.elements.length;i++){
		fv=form.elements[i];
		if (typeof fv.name!='undefined'){
			ft=fv.type.toLowerCase();

			switch(ft){
				case 'select-one':
					str+=fv.name+'='+escape(fv.value)+'&';
					break;
				case 'radio':
					if (fv.checked){
						str+=fv.name+'='+escape(fv.value)+'&';
					}
					break;
				case 'checkbox':
					if (fv.checked){
						str+=fv.name+'='+escape(fv.value)+'&';
					}
					break;
				case 'text':
					str+=fv.name+'='+escape(fv.value)+'&';
					break;
				case 'password':
					str+=fv.name+'='+escape(fv.value)+'&';
					break;
				case 'hidden':
					str+=fv.name+'='+escape(fv.value)+'&';
					break;
				case 'textarea':
					str+=fv.name+'='+escape(fv.value)+'&';
					break;
				default:
					break;
			}
		}
	}

	return str.split(/\s/).join('')
}

使用時,語法如

xmlhttp.send(getFormValue(document.form1));

進行到這裡,完成了整個設計及呼叫 AJAX 的動作,但,這只是開始,這個動作進行完成後,取得的資料要怎麼處理,那就千變萬化,那到底是取得什麼資料呢?以前述範例來說,呼叫的程式為 search.asp,這支程式,存在於同網域上(為安全考量,瀏覽器不允許跨網域呼叫程式),而這支程式到底在幹些什麼勾當,看設計的人怎麼處理,一般可能會有兩種結果,一種是執行完成畫面顯示一堆文字,一種是顯示一份 xml 文件。例如 http://audi.tw/Blog/AJAX/045-checkID.asp?id=audi 只傳回文字 true 或 false,也可能是 xml,例如 http://audi.tw/Blog/AJAX/048-responseXML.asp 回傳一份 xml 文件。

至於什麼格式,取決於這樣的資料,當 AJAX 執行完成,取得後該怎麼使用,或者,正確的講,是你打算怎麼用這些資料,你就怎麼設計回傳的格式。例如上述的 checkID.asp 回傳的只是文字 true 或 false,你也可以回傳 yes 或 no / 1 或 0,總而言之,取得後,你怎麼用取得的資料。

應用回傳資料

function myAJAX(param){
	//建立 XMLHttpRequest 物件
	var xmlhttp=createXHR();

	//  選擇以 get 或 post 方式呼叫主機端處理的程式
	xmlhttp.open('get','/checkID.asp?id=audi',true);
	//  判斷執行結果
	xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4){
			if (xmlhttp.status == 200) {
				if (xmlhttp.responseText=='1'){
					alert('這個帳號已經存在');
				}else{
					alert('這個帳號可用');
				}
			}else{
				//無法取得正碓資料時的動作
			}
		}
	};
	xmlhttp.send(null);
}

上述的程式,用文字說明則是 xmlhttp 宣告成為 XMLHttpRequest 物件,透過呼叫主機 checkID.asp 程式,並傳送 id=audi 字串及值,進行了處理後,畫面回應 1 或 0。

要把畫面上的資料(實際上在運作時是看不到這個畫面的)取回,有兩種方式,xmlhttp.responseText 及 xmlhttp.responseXML (同樣請注意大小寫)。

responseText 是把執行結果,用純文字的方式回傳,responseXML 則是把執行結果,回傳成為 xml 文件。例如 http://audi.tw/Blog/AJAX/057-autoComplete.asp?searchStr=a 結果是 xml,下面有兩個測試鈕,一個測回傳文字,一個測試回傳 XML。

所以,即使後端設計輸出的結果是 XML,仍可以用 responseText 取回,只不過,所有標籤都被當作文字來處理。

所以不要妄想由後端程式產生一堆 HTML 碼,再抓回前台呈現(但是如果你真的想這麼作......)

至於回傳資料以 XML 格式接受,那可以進行的變化就很多了,下次再聊。不過,下一篇實在不知道要歸類在 AJAX 裡還是 Javascript 裡。

 

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

Umanizzare presídios   2017/11/12 下午 01:58:00

It's very easy to find out any matter on web as compared to textbooks, as I found this post at
this website.

Grupo Serval presídios   2017/11/12 上午 02:55:00

Excellent blog here! Also your website loads up very fast!
What host are you using? Can I get your affiliate link to your
host? I wish my website loaded up as quickly as yours lol

Lelio Vieira Carneiro Junior   2017/11/10 上午 08:54:00

There's definately a great deal to find out about this issue.
I love all of the points you have made.

noellaschroff.weebly.com   2017/8/12 上午 09:42:00

Hello Dear, are you truly visiting this web site regularly, if so after that you will
without doubt take good knowledge.

What do you do for Achilles tendonitis?   2017/8/4 下午 02:13:00

I want to to thank you for this fantastic read!!
I definitely loved every bit of it. I've got you bookmarked to look at new things you post…

How do you treat Achilles tendonitis?   2017/7/31 上午 10:39:00

Excellent blog here! Additionally your website so much up fast!
What host are you using? Can I am getting your
affiliate hyperlink for your host? I desire my site loaded up as fast as yours lol

isadorayouse.hatenablog.com   2017/7/31 上午 01:21:00

Aw, this was an extremely good post. Finding the time and actual effort
to make a very good article… but what can I say… I put things off a whole lot and
don't seem to get anything done.

Can you get taller with yoga?   2017/7/28 上午 11:00:00

Your style is really unique in comparison to other people I have read stuff from.
Thank you for posting when you have the opportunity, Guess I'll just
book mark this web site.

vitamin d helps foot pain   2017/7/4 上午 07:10:00

Glad to be one of several visitants on this awe inspiring web site :D.

foot pain identifier   2017/6/21 下午 01:58:00

First of all I want to say superb blog! I had a quick question in which I'd like to
ask if you do not mind. I was curious to know how you
center yourself and clear your head prior to writing.

I've had a tough time clearing my thoughts in getting my ideas out
there. I truly do take pleasure in writing however it just seems like the first
10 to 15 minutes are generally wasted just trying to figure out how to begin. Any ideas or hints?
Thank you!

http://veolatix.jimdo.com/   2017/6/11 上午 05:31:00

Hey there! I could have sworn I've been to this site before but
after reading through some of the post I realized it's new to me.
Nonetheless, I'm definitely glad I found it and I'll be bookmarking and
checking back often!

lonafeher.hatenablog.com   2017/5/21 上午 11:17:00

Good day! Do you know if they make any plugins to assist
with SEO? I'm trying to get my blog to rank for some targeted
keywords but I'm not seeing very good results. If you know of any
please share. Appreciate it!

http://wiseloser6165.livejournal.com/   2017/5/18 下午 04:29:00

First off I want to say fantastic blog! I had a quick question which I'd like to ask if
you do not mind. I was curious to know how you center yourself and clear your
head before writing. I have had a hard time clearing my thoughts in getting my
thoughts out. I truly do take pleasure in writing however it just seems
like the first 10 to 15 minutes are usually lost just trying
to figure out how to begin. Any ideas or tips?
Thanks!

manicure   2017/5/4 上午 05:57:00

I am regular reader, how are you everybody? This post
posted at this web site is truly good.

manicure   2017/5/3 下午 03:51:00

Hi there to all, it's in fact a fastidious for me to visit this website, it contains precious Information.

BHW   2017/4/16 下午 03:06:00

It's remarkable to pay a quick visit this site and reading the views of all mates on the topic of this article, while I am also zealous of getting know-how.

給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: