a. Location + reload
程式碼：每二秒重新整理一次頁面
Code: Refresh the page every 2 seconds
<script>
var now =new Date();
document.write(now);
setTimeout('window.location.reload()',2000);
</script>
執行結果：
Result:
2. JavaScript Example
a. ScrollWindow
程式碼：頁面每0.1秒自動往上捲
Code: The page automatically rolls up every 0.1 seconds
<script>
function scrollWindow() {
window.scroll(0, 1*scrollY);
if ( scrollY > 800 ) {
scrollY = 0;
window.scroll(0, 0);
}
else {
scrollY++;
}
timerID = setTimeout("scrollWindow()", 100);
}
</script>
</head>
<body onload="scrollWindow()">
XXXXX
XXXXXX...
......
</body>
PS1：
1. <body> 要有 onload="scrollWindow"
1. <body> must include onload="scrollWindow"
2. 要有內文，且超過 一頁，(這裡設定800)
2. Must have text and more than one page. The setting here is 800
3. Ajax
a. 在所有 Ajax 應用程式中基本都雷同的流程：
1. 從 Web 表單中獲取需要的資料。
2. 建立要連接的 URL。
3. 打開到伺服器的連接。
4. 設置伺服器在完成後要運行的函數。
5. 發送請求。
a. Basically the same process in all Ajax applications
1. Get the information you need from the web form.
2. Create a URL to connect to.
3. Open the connection to the server.
4. Set the function to be run after the server is finished.
5. Send the request.
b. 需要用於 XMLHttpRequest 物件的幾個方法和屬性
方法：
1. open()：建立到伺服器的新請求。
2. send()：向伺服器發送請求。
3. abort()：退出當前請求。
屬性：
4. readyState：提供當前 HTML 的就緒狀態。
5. responseText：伺服器返回的請求回應文本。
b. Several methods and properties are required for the XMLHttpRequest object
Method：
1. open(): Creates a new request to the server.
2. send(): Sends a request to the server.
3. abort(): Exit the current request.
Attributes:
4. readyState: Provides the current state of the HTML.
5. responseText: The request-response text returned by the server.
程式碼一：
Code 1:
<script >
var request = new XMLHttpRequest();
request.open("GET", "ajaxr.html", true);
//這裡的 true 是指，非同步的意思。
// "true" means asynchronous
request.onreadystatechange = updatePage;
//這裡的 onreadystatechange是指，當頁面狀態改變時
// "onreadystatechange" means when the page status changes
request.send(null); //送出 //send
function updatePage()
{
alert(request.responseText);
}
</script>
c. 但是要加入一些判斷，程式才會完整
c. Add some determine to complete the application
程式碼二：修改 function的部分就好
Code2: Just modify the part of the function
function updatePage()
{
if (request.readyState == 4)
//這裡的 4 是指，HTTP 就緒狀態。(詳見下方PS2)
// 4 means HTTP ready status (Refer to the PS2 below)
{
if (request.status == 200)
//這裡的 200 是指，網頁讀取成功
// 200 means Web page read successfully
{
alert(request.responseText);
}
}
}
PS2：
在 Ajax 應用程式中需要瞭解五種 HTTP 就緒狀態：
0：請求沒有發出（在調用 open() 之前）。
1：請求已經建立但還沒有發出（調用 send() 之前）。
2：請求已經發出正在處理之中（這裡通常可以從回應得到內容標題部）。
3：請求已經處理，回應中通常有部分資料可用，但是伺服器還沒有完成回應。
4：回應已完成，可以訪問伺服器回應並使用它。
PS2：
There are five HTTP ready states to understand in an Ajax application:
0: The request was not issued (before calling open()).
1: The request has been established but has not yet been issued (before send() is called).
2: The request has been sent out of processing (here usually the content header section can be obtained from the response).
3: The request has been processed. Some data is usually available in the response, but the server has not completed the response.
4: The response is complete and you can access the server response and use it.
4. Ajax + JSP
a. 利用 AJAX 傳送二個值到後台，計算乘積之後再送回前台
a. Use AJAX to transfer two values to the background, calculate the product and send it back to the foreground.
程式碼 ajax002.jsp：前台
Code ajax002.jsp: front end
<script language="javascript" type="text/javascript">
var request = new XMLHttpRequest();
function calc()
//複製上面的程式，加上 function 承接下方按鈕的 onclick
/ / Copy the above program, plus function to accept the onclick button below
{
request.open("GET", "res.jsp?q1=" + document.getElementById('q1').value + "&q2=" + document.getElementById('q2').value, true);
request.onreadystatechange = updatePage;
request.send(null);
}
function updatePage()
{
if (request.readyState == 4)
{
if (request.status == 200)
{
document.getElementById('ans').innerHTML = request.responseText;
}
}
}
</script>
</head>
放二個空格相乘以及"="按鈕"，並設一個 Span在後面
Multiply two spaces and "=" button" and set a Span behind
<body>
<form id="form1" name="form1" method="post" action="">
<label>
<input name="q1" type="text" id="q1" size="5" />
</label>
x
<label>
<input name="q2" type="text" id="q2" size="5" />
</label>
<input type="button" name="button" id="button" value="=" onclick="calc()"/>
<span id='ans'></span>
</form>
</body>
程式碼 res.jsp：後台
Code res.jsp: back end
<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%
int i, j;
i = Integer.parseInt(request.getParameter("q1"));
j = Integer.parseInt(request.getParameter("q2"));
out.print(i*j);
%>
執行結果：
Result:
No comments:
Post a Comment