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,