解析AJAX中的一些關(guān)鍵技術(shù)_AJAX教程

      編輯Tag賺U幣
      教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!

      推薦:實(shí)現(xiàn)基于Ajax的無(wú)限級(jí)菜單
      現(xiàn)在到處都有這方面的教程,我重點(diǎn)說(shuō)一下我自己搞的一個(gè)框架。 特點(diǎn): 支持Form的無(wú)閃提交(方法有點(diǎn)笨) 支持MVC框架,即支持傳統(tǒng)網(wǎng)頁(yè)架構(gòu) 多線程并發(fā)請(qǐng)求(要語(yǔ)言支持線程) 動(dòng)態(tài)加載文件,只加載有用的!處理了Ajax框架臃腫的JS文件問(wèn)題。 采用no tabl

      ajax架構(gòu)中主要涉及的技術(shù):
      client: javascript解析xml, 操縱DOM修改html頁(yè)面,javascript是“OO”的語(yǔ)言。
      server: servlet + dao, 實(shí)現(xiàn)service接口即可

      下面是client中主要的代碼:
      1。JS中封裝解析xml的代碼,以及實(shí)例應(yīng)用。
      Quote
      //類(lèi)的構(gòu)造,傳入xml文檔和需要處理的標(biāo)簽名稱(chēng)
      function DataSet(xmldoc, tagLabel) {
      this.rootObj = xmldoc.getElementsByTagName(tagLabel)

      //3個(gè)方法
      this.getCount = getCount
      this.getData = getData
      this.getAttribute = getAttribute
      }
      function getCount(){
      return this.rootObj.length
      }
      function getData(index, tagName){
      if (index >= this.count) return "index overflow"
      var node = this.rootObj[index]
      var str = node.getElementsByTagName(tagName)[0].firstChild.data
      return str
      }

      function getAttribute(index, tagName) {
      if (index >= this.count) return "index overflow"
      var node = this.rootObj[index]
      var str = node.getAttribute(tagName)
      return str
      }
      //如何使用DataSet類(lèi)
      function updateByXML(xmlDoc) {

      var employeeDS = new DataSet(xmlDoc,"employee"); //關(guān)心的標(biāo)簽名稱(chēng)
      var count = employeeDS.getCount()
      for(i=0;i<count;i++) {
      var name = employeeDS.getAttribute(i,"name")
      var job = employeeDS.getData(i,"job")
      var salary = employeeDS.getData(i,"salary")
      alert(name + "," + job + "," + salary)
      }
      //使用的xml格式,類(lèi)似如下
      <?xml version="1.0" encoding="gb2312"?>
      <employees>
      <employee name="Billgates">
      <job>Programmer</job>
      <salary>32768</salary>
      </employee>
      <employee name="王濤">
      <job>無(wú)業(yè)游民</job>
      <salary>70000</salary>
      </employee>
      <employee name="Big 中華">
      <job>哈爾濱CEO</job>
      <salary>100000</salary>
      </employee>
      </employees>
      2。操縱DOM,創(chuàng)建table,顯示獲得的數(shù)據(jù)
      Quote
      function deleteOldTable() {
      delRow = document.getElementsByTagName("table").length
      //此句僅在本例中使用,因?yàn)楸纠幸呀?jīng)有一個(gè)table了,因此不能刪除,需要根據(jù)情況變化一下2005.11.17
      if(delRow == 1) return

      var node = document.getElementsByTagName("table")[delRow-1]; //表格
      var c = node.childNodes.length
      for(i=0;i<c;i++)
      node.removeChild(node.childNodes[0]); //刪除全部單元行
      }

      //傳入DataSet的一個(gè)實(shí)例即可
      function makeTable(m_ds) {

      deleteOldTable() //先清除以前的結(jié)果

      var table = document.createElement("table");
      table.setAttribute("border","1");
      table.setAttribute("width","100%");

      document.body.appendChild(table);
      var header = table.createTHead();
      var headerrow = header.insertRow(0);
      headerrow.insertCell(0).appendChild(document.createTextNode("姓名"));
      headerrow.insertCell(1).appendChild(document.createTextNode("職業(yè)"));
      headerrow.insertCell(2).appendChild(document.createTextNode("工資"));

      for(var i=0;i<m_ds.getCount();i++) {
      var name = m_ds.getAttribute(i,"name")
      var job = m_ds.getData(i,"job")
      var salary = m_ds.getData(i,"salary")

      var row = table.insertRow(i+1);
      row.insertCell(0).appendChild(document.createTextNode(name));
      row.insertCell(1).appendChild(document.createTextNode(job));
      row.insertCell(2).appendChild(document.createTextNode(salary));
      }
      }
       

      分享:詳談WEB 2.0中AJAX的應(yīng)用
      最近互聯(lián)網(wǎng)上比較火熱的話題當(dāng)然是關(guān)于WEB2.0的應(yīng)用,其中AJAX又是WEB2.0的核心之一。AJAX是Asynchronous JavaScript and XML 的縮寫(xiě)。它并不是一門(mén)新的語(yǔ)言或技術(shù),它實(shí)際上是幾項(xiàng)技術(shù)按一定的方式組合在一在同共的協(xié)作中發(fā)揮各自的作用,它包括 使用XHTML和

      來(lái)源:模板無(wú)憂//所屬分類(lèi):AJAX教程/更新時(shí)間:2010-05-27
      相關(guān)AJAX教程