<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
.boder {
border-bottom-color: #808080;
}
.loading2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #FFFFAA;
position: absolute;
padding: 1px;
display:none;
}
-->
</style>
<title>AJAX試驗</title><table width="27%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="9%">ID <div id="loading1" class="loading2">載入中</div></td>
<td width="91%"> <span class="boder" id="id"> <!--顯示id--></span></td>
</tr>
<tr>
<td>Name</td>
<td> <span class="boder" id="name"><!--顯示name--></span></td>
</tr>
<tr>
<td>Address</td>
<td> <span class="boder" id="address"><!--顯示address--></span></td>
</tr>
</table>
<p><a href="javascript:makeRequest('get');">下一則 </a></p>
<p><a href="javascript:makeRequest('post');">指定第三筆Record</a></p>
</body>
</head>
</html>
<script type="text/javascript" language="javascript">
function makeRequest(x) {
document.getElementById("loading1").style.display="block";
var http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
// 定義事件處理函數為 alterContents()
http_request.onreadystatechange = function() {
alertContents(http_request);
//共有五個階段
//0 (尚未初始化;)
//1 (載入中; http_request 已經設定好了，但是還沒呼叫 send())
//2 (載入完成; http_request 已經送給 server 了，server 已經開始 處理了，你可以取得 content header 了。)
//3 (可以互動的; http_request 已經部份完成了，所以有可能取得 部份處理完的資料)
//4 (完成的; compelte) };
switch(x){
case 'get':
http_request.open('GET', "engine.asp", true);
http_request.send(null);
break;
case 'post':
http_request.open('POST', 'engine.asp', true);
//HTTP的方法可用POST或GET,目標網頁(不能跨domain),是否非同步(非同步的意思是代表在跟遠端取得資源的同時，browser 可以繼續執行 Javascript 的內容)因為大都設為true(非同步)
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//如果使用 POST 的方式，我們除了要設定 MIME 的類型
http_request.send('id=3');
//送參數，若有兩個以上參數可用http_request.send('id=3&aa=5');
//若要把變數當成參數可用http_request.send('id='+變數+'&aa='+變數); break;
}
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
.boder {
border-bottom-color: #808080;
}
.loading2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #FFFFAA;
position: absolute;
padding: 1px;
display:none;
}
-->
</style>
<title>AJAX試驗</title><table width="27%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="9%">ID <div id="loading1" class="loading2">載入中</div></td>
<td width="91%"> <span class="boder" id="id"> <!--顯示id--></span></td>
</tr>
<tr>
<td>Name</td>
<td> <span class="boder" id="name"><!--顯示name--></span></td>
</tr>
<tr>
<td>Address</td>
<td> <span class="boder" id="address"><!--顯示address--></span></td>
</tr>
</table>
<p><a href="javascript:makeRequest('get');">下一則 </a></p>
<p><a href="javascript:makeRequest('post');">指定第三筆Record</a></p>
</body>
</head>
</html>
<script type="text/javascript" language="javascript">
function makeRequest(x) {
document.getElementById("loading1").style.display="block";
var http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
// 定義事件處理函數為 alterContents()
http_request.onreadystatechange = function() {
alertContents(http_request);
//共有五個階段
//0 (尚未初始化;)
//1 (載入中; http_request 已經設定好了，但是還沒呼叫 send())
//2 (載入完成; http_request 已經送給 server 了，server 已經開始 處理了，你可以取得 content header 了。)
//3 (可以互動的; http_request 已經部份完成了，所以有可能取得 部份處理完的資料)
//4 (完成的; compelte) };
switch(x){
case 'get':
http_request.open('GET', "engine.asp", true);
http_request.send(null);
break;
case 'post':
http_request.open('POST', 'engine.asp', true);
//HTTP的方法可用POST或GET,目標網頁(不能跨domain),是否非同步(非同步的意思是代表在跟遠端取得資源的同時，browser 可以繼續執行 Javascript 的內容)因為大都設為true(非同步)
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//如果使用 POST 的方式，我們除了要設定 MIME 的類型
http_request.send('id=3');
//送參數，若有兩個以上參數可用http_request.send('id=3&aa=5');
//若要把變數當成參數可用http_request.send('id='+變數+'&aa='+變數); break;
}
}
function alertContents(http_request) {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
var xmldoc = http_request.responseXML;//宣告xml物件
var id_node = xmldoc.getElementsByTagName('id');
//設定要取的節點，會以陣列傳回
var name_node = xmldoc.getElementsByTagName('name');
var addr_node = xmldoc.getElementsByTagName('address');
document.getElementById("id").innerHTML=id_node[0].firstChild.nodeValue
//取節點的值
document.getElementById("name").innerHTML=name_node[0].firstChild.nodeValue
document.getElementById("address").innerHTML=addr_node[0].firstChild.nodeValue
document.getElementById("loading1").style.display="none";//關掉loading的div標籤 } else
{
alert('There was a problem with the request.');
}
}
}
</script>
if (http_request.readyState == 4) {
if (http_request.status == 200) {
var xmldoc = http_request.responseXML;//宣告xml物件
var id_node = xmldoc.getElementsByTagName('id');
//設定要取的節點，會以陣列傳回
var name_node = xmldoc.getElementsByTagName('name');
var addr_node = xmldoc.getElementsByTagName('address');
document.getElementById("id").innerHTML=id_node[0].firstChild.nodeValue
//取節點的值
document.getElementById("name").innerHTML=name_node[0].firstChild.nodeValue
document.getElementById("address").innerHTML=addr_node[0].firstChild.nodeValue
document.getElementById("loading1").style.display="none";//關掉loading的div標籤 } else
{
alert('There was a problem with the request.');
}
}
}
</script>
| <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> <%'隨機選題目並輸出為XML%> <!--#include file="connectDB.asp"--> <% Response.Expires=-1500 Response.CacheControl="no-cache" '禁止快取 id=request("id") set rs=server.CreateObject("ADODB.Recordset") if id="" then '若沒帶參數過來便亂數取一筆record sql="select * from Employees ORDER BY NEWID()" else '取第三筆record sql="select * from Employees where EmployeeID="&id end if rs.Open sql , conn , 3 , 1 Response.ContentType="text/xml" '將文件編碼指定為XML格式，asp產生xml格式時必加 response.write "<?xml version="&chr(34)&"1.0"&chr(34)&" encoding="&chr(34)&"utf-8"&chr(34)&"?>" response.write "<areas>" response.write "<id>"&rs("EmployeeID")&"</id>" response.write "<name>"&rs("FirstName")&"</name>" response.write "<address>"&rs("Address")&"</address>" response.write "</areas>" rs.close %> |
沒有留言:
張貼留言