搜尋此網誌

2010年8月19日 星期四

AJAX 的應用 Part2---接收從server傳來的資料篇

Step 1:

以jsp來說,從server side要把想輸出的資料寫到一個檔案中, for example


result.jsp

<% String xxxx= (String)request.getSession().getAttribute(oooo); out.println(xxxx); %>

Step 2:
接著寫一段receive的javascript code把剛剛的檔案讀出來,for example


loadDoc:function(){
var ajaxRequest; // The variable that makes Ajax possible!

try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange=function()
{
if (ajaxRequest.readyState==4 && ajaxRequest.status==200)
{
alert(ajaxRequest.responseText);
}
}
ajaxRequest.open("GET", "result.jsp" , true);
ajaxRequest.send();


即大功告成,至於傳request和接response的java script程式碼,要放在哪裡, 要根據自己的應用程式來決定,相信大家都沒問題的

AJAX Request 的應用--傳request到server篇

目前有很多Ajax的framework: Ext-Js ,ZK,以及google的gwt都是有名的例子.

今天本文要介紹的是很基本的Ajax使用方式,

AJAX = Asynchronous JavaScript and XML.非同步化的JavaScript和XML

AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page.

AJAX是一門和伺服器交換資料的藝術,他可以更新部分網頁內容,而不必重新載入一整個網頁

參考自下列網址:

http://www.w3schools.com/ajax/default.asp


以下是使用的例子:

var ajaxRequest; // The variable that makes Ajax possible!

try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
var queryString = "?term=" + this.name + "&rateValue=" + this.hidden.value ;
ajaxRequest.open("GET", "xxx.jsp" + queryString, true);
ajaxRequest.send(null);


以前若要傳資料到server處理,要透過form這個html原件,現在只要傳資料到後端負責處理的jsp,

asp,php link,即可達到不必更新整個網頁又可以更新特定資料的功能,減少server的loading,