首頁 > 開發者 > Ajax

一個簡單實用的AJAX例子

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

學習AJAX時,作了以下這個簡單的AJAX例子,沒用任何動態語言,完全HTML和JAVASCRIPT,至於伺服器源也就小偷了一下www.cc168.com.cn(長城證券)的開放式基金每日淨值查詢頁面。
用XMLHTTP對象擷取到WEB頁面HTTP內容後，採用Split的方式進行截取，取出自己需要的web部分，然後綁定到頁面的div上。CSS樣式表也就遠程使用了cc168.com.cn的。
^_^，希望長城證券能夠寬恕這種偷盜行為。程式員的事，能算“偷”嗎？最多算個竊. :- )
原理很簡單，但是感覺這種方式比較有用。如果自己網站想提供功能，又不想做資料web服務的話，不妨竊之。

<html>
<head>
<link href="http://www.cc168.com.cn/css/index.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://www.cc168.com.cn/css/framework.css" type="text/css"/>
 <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)
   {
    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>
</html>

代碼講解：
1、代碼主要分為JS處理和BODY兩大部分（廢話 ^_^）
2、BODY部分用了幾個層：dataSele : 顯示日期選擇下拉框；flag : 狀態標示；date: 顯示選中的日期；outgroup：顯示基金的淨值結果組；out 到 out3 則是幾種類型的開放式基金淨值結果
3、JS部分：頁面載入處理：頁面初始化設定；建立XMLHTTP對象：按不同用戶端瀏覽器建立不同的XMLHTTP連線物件；調用遠程方法：構造連接字串，發送請求；回調處理函數：判斷連線物件的返回狀態，進行狀態顯示，完全擷取結果後，進行DOM方式的層賦值；建立日期選擇下拉框：動態建立日期選擇下拉框，並為其加上選擇事件。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
ajax manual ajax payload w3s ajax ajax websocket ajax datagrid ajax settimeout ajax controls
相關文章
ajax入門指南（二）
ajax使用_雜類
jQuery ajax 檔案下載_ajax
AJAX各種實現方式比較_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More