AJAX学习（转发）
一 ,XMLHttpRequest 物件 是 ajax 的主要工作對象是
一個完整的聲明一個相容各流覽器的 XMLHttpRequest 的 js 代碼如下
<script language =" javascript " type =" text/javascript ">
var request;
function createRequest() {
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject (" Msxml2.XMLHTTP ");
} catch (othermicrosoft) {
try {
request = new ActiveXObject (" Microsoft.XMLHTTP ");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert (" Error initializing XMLHttpRequest!, 此流覽器不支持 ");
}
</script>
在 ajax 編程中 , 還會常用到的一個語句是
document.getElementById(" phone ").value , 取得值
調用 request 物件來向伺服器發請求時 ,js 代碼如下 ,
function getCustomerInfo() {
var phone = document .getElementById(" phone ").value;
var url = " getCustomer.asp?phone= " + escape (phone); //getCustomer.asp為請求的頁面
request. open (" GET ", url, true ); // 這個地方已將資訊發到緩存
request.onreadystatechange = updatePage; // 這個表示 , 請求發出到伺服器的狀態回饋 ,updatePage 事件為自定義錯誤處理
request.send( null ); // 發送
}
function updatePage() {
if (xmlHttp.readyState == 1)
{
document .getElementById("flag").innerHTML = " 正在載入連接物件 ...... ";
}
if (xmlHttp.readyState == 2)
{
document .getElementById("flag").innerHTML = " 連接物件載入完畢。 ";
}
if (xmlHttp.readyState == 3) {
document .getElementById("flag").innerHTML = " 資料獲取中 ...... ";}
if (request. readyState == 4)
if (request. status == 200)
alert (" Server is done! 伺服器已收到 , ");
else if (request. status == 404)
alert (" Request URL does not exist, 發送的位址錯了 , 沒有此頁面 ");
else if (request. status == 403) {
alert (" Access denied. 無權訪問 ");
else
alert (" Error: status code is " + request. status );
}
附一 :XMLHttpRequest 物件的 open() 方法來完成。該方法有五個參數 ：
XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
request-type ： 發送請求的類型。典型的值是 GET 或 POST ， 但也可以發送 HEAD 請求。
url ： 要連接的 URL 。
asynch ： 如果希望使用非同步連接則為 true ， 否則為 false 。該參數是可選的，默認為 true。
username ：如果需要身份驗證，則可以在此指定用戶名。該可選參數沒有預設值。
password ：如果需要身份驗證，則可以在此指定口令。該可選參數沒有預設值。
附二 : 關於 request.readyState 的狀態 , 有
0 ：請求沒有發出（在調用 open() 之前）。
1 ：請求已經建立但還沒有發出（調用 send() 之前）。 一般用不著這之前
2 ：請求已經發出正在處理之中（這裏通常可以從回應得到內容頭部）。
3 ：請求已經處理，回應中通常有部分資料可用，但是伺服器還沒有完成回應。
4 ：回應已完成，可以訪問伺服器回應並使用它。
若請求正常 , 且頁面有反回的輸出資訊時 , 將 updatePage 方法處理再改成
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText.split("|"); // 切割字串
document .getElementById("order").value = response[0];
document .getElementById("address").innerHTML =response[1].replace(/ \ n /g, "");
} else
alert ("status is " + request.status);
}
}
附三 :
XMLHttpRequest 成員 , 對象
屬性有
onreadystatechange * 指定當 readyState 屬性改變時的事件處理控制碼。只寫
readyState 返回當前請求的狀態 ， 唯讀 .
responseBody 將回應資訊正文以 unsigned byte 陣列形式返回 . 唯讀
responseStream 以 Ado Stream 物件的形式返回回應資訊。唯讀
responseText 將回應資訊作為字串返回 . 唯讀
responseXML 將回應資訊格式化為 Xml Document 物件並返回 ， 唯讀
status 返回當前請求的 http 狀態碼 . 唯讀
statusText 返回當前請求的回應行狀態 ， 唯讀
方法
abort 取消當前請求
getAllResponseHeaders 獲取回應的所有 http 頭
getResponseHeader 從回應資訊中獲取指定的 http 頭
open 創建一個新的 http 請求 ， 並指定此請求的方法、 URL 以及驗證資訊 ( 用戶名 / 密碼 )
send 發送請求到 http 伺服器並接收回應
setRequestHeader 單獨指定請求的某個 http 頭 ()
事件
無
二 , document.createElement("html 標籤 "), 創建頁面元素
取得了值了 , 就要顯示出來了 , 通常都是用 js 動態創建元素 , 插入到當前頁元素了
2.1 在一個 table 表格內增加行內容 , 控制項
var row = document.createElement("tr");
row.setAttribute("id", name);
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(name));
row.appendChild(cell);
var deleteButton = document.createElement("input");
deleteButton.setAttribute("type", "button");
deleteButton.setAttribute("value", " 刪除 ");
deleteButton.onclick = function () {
deleteSort(name);
} ;
cell = document.createElement("td");
cell.appendChild(deleteButton);
row.appendChild(cell);
document .getElementById("sortList").appendChild(row);
在 html 頁的 table 相應增加行的位置 , 放一句 <tbody id="sortList"></tbody>
2.2 相應的刪除表行 js 如下 :
function deleteSort(id) {
if (id!=null){
var rowToDelete = document.getElementById(id);
var sortList = document.getElementById("sortList");
sortList.removeChild(rowToDelete);
}
}
2.3 一個完整的讀取標準和 RSS 訂閱 xml 文檔的代碼
<script language="javascript">
var XML_Http_Request = false;
function createXMLHttpRequest(){
// 創建 XMLHttpRequest 對象 ,
XML_Http_Request = false;
if (window.XMLHttpRequest){
//for Mozilla
XML_Http_Request = new XMLHttpRequest();
if (XML_Http_Request.overrideMimeType){
XML_Http_Request.overrideMimeType("text/xml");
}
}
else if(window.ActiveXObject){
//for IE
try{
XML_Http_Request = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e){
try{
XML_Http_Request = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e){
}
}
}
}
function send_Request(url){
// 讀取標準 xml 訂閱
createXMLHttpRequest();
if (!XML_Http_Request){
window .alert("Cannot create XMLHttpRequest instance!");
return false;
}
XML_Http_Request.onreadystatechange = processRequest;
XML_Http_Request.open("GET",url,true);
//true--- 非同步 ;false--- 同步
XML_Http_Request.send(null);
}
function processRequest(){
if (XML_Http_Request.readyState == 4) {
if (XML_Http_Request.status == 200) {
/*********************** 處理內容部分 *****************************/
//statements
var results = XML_Http_Request.responseXML;
var title = null;
var item = null;
var link = null;
var description = null;
var ccc = results.getElementsByTagName("channel");
var headtitle = ccc[0].getElementsByTagName("title")[0].firstChild.nodeValue;
var headlink = ccc[0].getElementsByTagName("link")[0].firstChild.nodeValue;
var cell = document.createElement("div");
cell.innerHTML = "<h1><a href="+headlink+" target=_blank>"+headtitle+"</a></h1><br>";
document .getElementById("result").appendChild(cell);
var items = results.getElementsByTagName("item");
for (var i = 0; i < items.length; i++) {
item = items[i];
link =item.getElementsByTagName("link")[0].firstChild.nodeValue;
title = item.getElementsByTagName("title")[0].firstChild.nodeValue;
var cell = document.createElement("div");
cell.innerHTML = "<li><a href="+link+" target=_blank>"+title+"</a></li><br>";
document .getElementById("result").appendChild(cell);
}
/*******************************************************************************/
} } }
</script>
</head>
<body onLoad="javascript:send_Request('http://www.cnblogs.com/jxghost/Rss.aspx');">
<div id="result"></div>
2.34 利用 XMLHttpRequest 竊取動態網頁的某一部分 ( 網頁有規律 ).
代碼目標是取得證券交易公司網站的交易報表部分 . 目標頁是 :http://www.cc168.com.cn/service/FundNetValue.jsp?newEndDate=2006-10-20
這一部分是 jsp 動態生成的 , 正好表頭以 <td class="info-head" width="400" valign="top"> 開始 , 表尾以 </td></tr> 結速 ,
<script language="javascript">
window .onload = function()
{
CreateDateSelect();
}
var xmlHttp = false;
var e; // 創建 XMLHTTP 對象
function getXMLHTTPObj()
{
var C = null;
try {
C = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
C = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (sc) {
C = null;}
}
if ( !C && typeof XMLHttpRequest != "undefined" ) { C = new XMLHttpRequest();}
return C;
}
// 調用遠程方法
function callServer(e) {
try {
if ( xmlHttp && xmlHttp .readyState != 0 ) { xmlHttp.abort();}
xmlHttp = getXMLHTTPObj();
if ( xmlHttp ) {
document .getElementById("outgroup").style.display = "none";
var dateSele = e.options[e.selectedIndex].value; // 獲取查詢日期
document .getElementById("date").innerHTML = dateSele + " 開放式基金淨值";
var url = "http://www.cc168.com.cn/service/FundNetValue.jsp?newEndDate=" + dateSele; // 構造查詢連接字串
xmlHttp.open("GET", url, true); // 打開連接
xmlHttp.onreadystatechange = updatePage; // 設置回調函數
xmlHttp.send(null); // 發送請求 }
else {
document .getElementById("flag").innerHTML = "XMLHTTP 對象創建失敗 "; }
}
catch (e) {
document .getElementById("flag").innerHTML = " 查詢錯誤 : " + e;}
}
// 回調處理函數
function updatePage() {
try {
if (xmlHttp.readyState == 1)
{
document .getElementById("flag").innerHTML = " 正在載入連接物件 ...... ";
}
if (xmlHttp.readyState == 2)
{
document .getElementById("flag").innerHTML = " 連接物件載入完畢。 ";
}
if (xmlHttp.readyState == 3)
{
document .getElementById("flag").innerHTML = " 資料獲取中 ...... ";
}
if (xmlHttp.readyState == 4)
{ // 以下切割頁面 , 取得所要的部分 html 代碼
var response = xmlHttp.responseText;
var OpenValue = response.split("<td class=\"info-head\" width=\"400\" valign=\"top\">")[1];
var OpenValue = OpenValue.split("</td></tr>")[0];
//alert(OpenValue);
document.getElementById("out").innerHTML = OpenValue;
var OpenValue1 = response.split("<td class=\"info-head\" width=\"400\" valign=\"top\">")[2];
var OpenValue1 = OpenValue1.split("</td></tr>")[0];
document .getElementById("out1").innerHTML = OpenValue1;
var OpenValue2 = response.split("<td class=\"info-head\" width=\"400\" valign=\"top\">")[3];
var OpenValue2 = OpenValue2.split("</td></tr>")[0];
document .getElementById("out2").innerHTML = OpenValue2;
var OpenValue3 = response.split("<td class=\"info-head\" width=\"400\" valign=\"top\">")[4];
var OpenValue3 = OpenValue3.split("</td></tr>")[0];
document .getElementById("out3").innerHTML = OpenValue3;
document .getElementById("flag").innerHTML = " 查詢結束 ";
document .getElementById("outgroup").style.display = ""; // 送顯
} }
catch (e) {
document .getElementById("flag").innerHTML = " 回調處理錯誤 : " + e;
} }
// 創建日期選擇下拉清單
function CreateDateSelect()
{
var html = [];
for (var iYear=2005; iYear<=2006; iYear ++) {
for ( var iMonth=1; iMonth<=12; iMonth ++ ) {
for ( var iDay=1; iDay<=31; iDay ++ ) {
html[html.length] = "<option value=\"" + iYear + "\-" + iMonth + "\-" + iDay + "\">" + iYear + " 年
+ iMonth + " 月 " + iDay + " 日 " + "</option>";
} }}
document.getElementById("dateSele").innerHTML = "<select name=\"dateSele\" id=\"dateSele\" onchange
\"callServer(this);\"> " + html.join("") + "</select>";
}
</script>
</head>
<body>
<form>
<div> 請選擇交易日期 :</div>
<div>
<div id="dateSele" align=left>
</div>
<div id="flag" align=right></div>
</div>
<div id="date"></div>
<div id="outgroup" style="display:None">
<div id="out"></div>
<div id="out1"></div>
<div id="out2"></div>
<div id="out3"></div>
</div>
</form>
</body>
DOM 物件是 Ajax 編程的主要操作對象 .
浙公网安备 33010602011771号