首頁 > 開發者 > Ajax

我的第一個AJAX程式

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

MyFirstAjax.htm:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>My First Ajax</TITLE>

<script language="JavaScript">
//===============================================================================================================
   var xmlHttp;
   function createXMLHttpRequest()
        {
    
           if(window.ActiveXObject)
   xmlHttp=new window.ActiveXObject("Microsoft.XMLHttp");
  else if(window.XMLHttpRequest)
          xmlHttp=new window.XMLHttpRequest();
 
  }

  
//===============================================================================================================
 function LoadList()
 {
  createXMLHttpRequest();
  xmlHttp.OnReadyStateChange=HandleStateChange_1;
  xmlHttp.open("Get","data.xml",true);
  xmlHttp.send(null);
 }

  function HandleStateChange_1()
  {
     if(xmlHttp.ReadyState==4)
     {
     if(xmlHttp.Status==200)
     {
        try
        {
           FillList();
        }
  catch (exception)
        {
   alert("error");
        }
       
     }
     }
 }

function addOption(list, text, value)
{
var index=list.options.length;
list.options[index]=new Option(text, value);
//list.selectedIndex=index;
}

function FillList()
 {
  var xmlDoc=xmlHttp.responseXML;
  var Nodes=xmlDoc.getElementsByTagName("pro");
  for(i=0;i<Nodes.length;i++)
     {
  var NodeValue=Nodes[i].getAttribute("name");
  addOption(document.ajax.Province,NodeValue,NodeValue);

     }
    
 }
//===============================================================================================================
function startRequest()
    {
  createXMLHttpRequest();
  xmlHttp.OnReadyStateChange=HandleStateChange;
  xmlHttp.open("Get","data.xml",true);
  xmlHttp.send(null);
    }

 function HandleStateChange()
  {
     if(xmlHttp.ReadyState==4)
     {
     if(xmlHttp.Status==200)
     {
        try
        {
           simple(document.ajax.Province.selectedIndex);
        }
        catch (exception)
        {
         alert("error");
        }
     }
     }
  }
 function simple(index)
 {
   //alert(document.ajax.Province.selectedIndex); //selectedIndex從0開始；如果未選中 返回-1
   if(index==-1)
   {
    document.ajax.Province.selectedIndex=0;
    index=0;
   }

     var str="";
        var pro=document.ajax.name.value;
  var xmlDoc=xmlHttp.responseXML;
  var JiangNode=xmlDoc.getElementsByTagName("pro")[index];
  //alert(JiangNode.getAttribute("name"));
  str=JiangNode.getAttribute("name")+":"
  var detailNode=JiangNode.getElementsByTagName("detail");
  for(i=0;i<detailNode.length;i++)
     {
     if(i==0)
     {
      str=str+detailNode[i].childNodes[0].nodeValue;
     }
     else
     {
      str=str+","+detailNode[i].childNodes[0].nodeValue;    
     }
     }
     document.ajax.name.value=str;
 }
 //===============================================================================================================
 function re_Size()
{
 //alert(event.srcElement.name);
 if(event.srcElement.name=="add")
 {
  document.ajax.Province.size=document.ajax.Province.size+1;
 }
 else if(event.srcElement.name=="sub")
 {
  if(document.ajax.Province.size>=2)
   document.ajax.Province.size=document.ajax.Province.size-1;
 }
}
</script>

</HEAD>
<BODY onLoad="LoadList()">

 

<form action=# name="ajax">
<input type=button name="add" value=" + " onClick="re_Size()">
<input type=button name="sub" value=" - " onClick="re_Size()">

<br>
<select name="Province" size=5>
</select>
<br>
<input type=text name="name" size=50></input>
<input type=button value="Get" onclick="startRequest()"></input>
</form>

</BODY>
</HTML>

data.xml:
<?xml version="1.0" encoding="gb2312" ?>
<root>
<pro name="江蘇省">
   <detail>南京</detail>
   <detail>蘇州</detail>
   <detail>無錫</detail>
   <detail>常州</detail>
   <detail>鎮江</detail>
   <detail>南通</detail>
   <detail>揚州</detail>
   <detail>徐州</detail>
</pro>
<pro name="浙江省">
   <detail>杭州</detail>
   <detail>寧波</detail>
   <detail>溫州</detail>
   <detail>紹興</detail>
   <detail>嘉興</detail>
   <detail>湖州</detail>
</pro>
<pro name="福建省">
   <detail>福州</detail>
   <detail>廈門</detail>
</pro>
<pro name="廣東省">
   <detail>廣州</detail>
   <detail>深圳</detail>
   <detail>東莞</detail>
   <detail>珠海</detail>
</pro>
<pro name="山東省">
   <detail>濟南</detail>
   <detail>青島</detail>
   <detail>威海</detail>
   <detail>煙台</detail>
</pro>
</root>

本文章原先以中文撰寫並發佈於 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