【左京淳的JAVA WEB學習筆記】第七章 AJAX與JSON格式

java web 學習筆記

annhilltw 2021-03-22 15:53:23 ‧ 3083 瀏覽

分享至

AJAX指的是局部更新頁面的技術，例如按了讚之後圖示會變成實心的，按讚數也會增加之類的。
這個技術是透過javascript裡面的一個物件實現的，叫做XMLHttpRequest。
嗯..看起來是個傳送XML，或是JSON等其他類型的數據流的物件。

來做一個基本範例，用戶註冊時填入用戶名，後台檢查此名稱是否可用，然後回傳訊息到頁面。
新增一個UnameSvl

public class UnameSvl extends HttpServlet {
(餘略..)
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String uname = request.getParameter("uname");
  //如果使用者初次拜訪頁面，使用者名稱應為空，直接送去regist.jsp頁面填資料。
    if(uname == null) {
      request.getRequestDispatcher("/main/regist.jsp").forward(request, response);
    }
  //如果是透過AJAX訪問此Sevlet，會帶有uname參數，進行以下處理
    PrintWriter out = response.getWriter();
    if(uname == null || uname.equals("")) {
      out.print("0");
    }else {
      if(uname.equals("AAA") || uname.equals("BBB")) {
        out.print("1");
      }else {
        out.print("2");
      }
    }
    out.flush();
    out.close();
}

接下來製作regist.jsp頁面

"<%@ page language=""java"" contentType=""text/html; charset=utf-8""
    pageEncoding=""utf-8""%>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + ""://"" + request.getServerName()  
  + "":"" + request.getServerPort() + path + ""/"";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset=""utf-8"">
<title>Insert title here</title>
</head>
<script type=""text/javascript"">
  var xmlhttp;
  function validUname(){
   //若要測試此方法有沒有被調用，使用以下code:
   //alert('validUname()被啟動');
   
   //創建XMLHttpRequest物件
      if(window.XMLHttpRequest){
       xmlhttp = new XMLHttpRequest();
      }
   //利用.open方法設定參數，.send方法送request給後端。
      if(xmlhttp != null){
       xmlhttp.onreadystatechange = statechange;
       var uname = document.getElementById(""uname"").value;
       var url = ""<%=basePath%>UnameSvl?uname="" + uname;
       xmlhttp.open(""GET"",url,true);
       xmlhttp.send(null);
       }
   }
  function statechange(){
   if(xmlhttp.status == 200){
    var result= xmlhttp.responseText;
    var info;
    if(result == ""0""){info=""請填入用戶名""}
    if(result == ""1""){info=""用戶名已被使用""}
    if(result == ""2""){info=""可用的用戶名""}
    document.getElementById(""nameAlert"").innerHTML = info;
    }
   }
  
</script>
<body>
<table>
  <tr>
    <td>用戶名</td>
    <td>
      <input type=""text"" id=""uname"" name=""uname"" onblur=""validUname()"">
      <span id=""nameAlert"" style=""color:red;font-size:12px""></span>
    </td>
  </tr>
  <tr>
    <td>密碼</td>
    <td><input type=""password"" name=""pwd""></td>
  </tr>
  <tr>
    <td>密碼確認</td>
    <td><input type=""password"" name=""pwd2""></td>
  </tr>
  <tr>
    <td colspan=""2"" align=""center""><input type=""submit"" value=""送出""></td>
  </tr>
</table>
</body>
</html>"

XMLHttpRequest有readyState及status兩種屬性，可以用來設置到if條件式裡面，因應不同狀況呼叫不同函式。

readyState

存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
0: 請求未初始化
1: 伺服器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且回應已就緒

status

200: "OK"
404: 未找到頁面

使用AJAX的流程

創建物件

xmlhttp = new XMLHttpRequest();

利用.open方法設定參數，.send方法送request給後端。

xmlhttp.open("GET",url,true);
xmlhttp.send(null);

當XMLHttpRequest狀態改變時，觸發收件方法

xmlhttp.onreadystatechange = statechange;
statechange(){…}

以上就是傳統的AJAX設定方法，不過jQuery已經幫我們打包好了更簡單的語法:

$.ajax({
  type:"POST",
  url:url,
  success:function(msg){
    處理內容
  }
});

套用到此案例就會長這樣:

function validUname(){
  var uname = $('#uname').val();
  var url = "<%=basePath%>UnameSvl?uname=" + uname;
  var info;

  $.ajax({
    type:"POST",
    url:url,
    success:function(msg){
      if(msg == "0"){info = "..."}
      if(msg == "1"){info = "..."}
      if(msg == "2"){info = "..."}
      document.getElementById("nameAlert").innerHTML = info;
    }
  });
}

JSON傳輸格式

JSON是一種可快速被javascript解析的格式，比XML更快速而廣泛被使用。長得像下面這樣:

{
  "artist":"pH7",
  "title":"A LITTLE MONSTER",
  "year":1985,
  "tracks":["Lemon","sawadika"]
}

資料內容放在{}內，以":"區分鍵與值，以","區分各個資料，以[]表示列表。

做個案例

"<script  type=""text/javascript"">
var JSONstring = '{' +
'""artist"":""pH7"",' +
'""title"":""A LITTLE MONSTER"",' +
'""year"":1985,' +
'""tracks"":[""Lemon"",""sawadika""]' +
'}'

function pageLoad(){
   var album = eval(""("" + JSONstring + "")"");
   var innerHTML = ""artist = "" + album.artist + ""<br>"" + 
                   ""title = "" + album.title + ""<br>"" +
                   ""year = "" + album.year + ""<br>"";
   document.getElementById(""p1"").innerHTML = innerHTML;

   var tracks = """";
   for(var i = 0;i<album.tracks.length;i++){
     tracks += ""track#"" + i + "" = "" + album.tracks[i] + ""<br>""
   }
   document.getElementById(""p2"").innerHTML = tracks;
  }
</script>
<body onload=""pageLoad()"">
  <form id=""form1"">
    <div id=""p1""></div>
    <div id=""p2""></div>
  </form>
</body>"

用寫死的JSONstring代替後台傳來的資料，用eval()函式即可將資料存成物件。
再從物件中取出各個屬性內的資料。
使用eval()時需再加入一個括號，如下例:

var data = eval("(" + JSONstring + ")");

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22207 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙