手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

jQuery XML 解析器和搜索機(jī)制

2016-10-18    藍(lán)藍(lán)設(shè)計的小編

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

 

介紹

這里所描述的過程將使你能夠創(chuàng)建一個簡單的基于jQuery / XML的解析器和搜索機(jī)制。此過程將通過一個AJAX請求檢索XML,然后在jQuery中分析數(shù)據(jù),為搜索機(jī)制做準(zhǔn)備。該解決方案將基于不區(qū)分大小寫的全部或部分關(guān)鍵字匹配地返回結(jié)果。來自于關(guān)鍵字搜索的返回結(jié)果設(shè)置將被格式化為一個直接鏈接到相應(yīng)網(wǎng)站的超鏈接。jQuery搜索方法非常類似于Mike Endale的一個項目,不過增加了一個DOM解析器,正則表達(dá)式以及結(jié)果集分組。

背景

客戶端需要一個簡單的搜索工具來查找基于關(guān)鍵字搜索的本地內(nèi)部網(wǎng)站。關(guān)鍵字搜索必須不區(qū)分大小寫,并允許返回部分匹配的結(jié)果。歸咎于客戶端內(nèi)容管理系統(tǒng)的架構(gòu),因此(SharePoint)只能執(zhí)行客戶端腳本。其解決方案的另一個障礙是,源數(shù)據(jù)將來自多個源。數(shù)據(jù)被存儲在多個Excel電子表格,CSV文件和MS Access數(shù)據(jù)庫內(nèi)。這就對我們提出了這樣的需要:開發(fā)具有一系列查詢和一個宏的Access解決方案,充當(dāng)可合并、擦洗,并最后格式化數(shù)據(jù)作為XML輸出的偽ETL。對于這個解決方案的目的,我們將詳細(xì)介紹JavaScript XML分析器的設(shè)計,而不是偽Access ETL宏工具的設(shè)計。

使用代碼

該解決方案的做法是利用一個簡單的基于JavaScript / XML的搜索來發(fā)送數(shù)據(jù)結(jié)果到HTML / JavaScript前端。前端將引用腳本:jQuery,XML和CSS文件。XML格式將因為它的可讀性和它是數(shù)據(jù)交換行業(yè)標(biāo)準(zhǔn)格式之一的事實而被使用。 XML數(shù)據(jù)將通過使用AJAX的客戶端jQuery解析,并通過Internet Explorer 11呈現(xiàn)。

解決方案將使用RegExp對象來處理關(guān)鍵字匹配,驗證和特殊字符處理。RegExp對象字符串將檢查危險語法從而提高解決方案的穩(wěn)定性和整體可用性。

我們將默認(rèn)使用JavaScript分組功能來返回匹配結(jié)果作為折疊的紀(jì)錄集。折疊的記錄集線項目將被URL鏈接到相關(guān)的Project Workspace網(wǎng)站。在擴(kuò)展的組記錄集下,結(jié)果將存在于相關(guān)的子記錄中,當(dāng)通過On Click事件展開的時候。

信息架構(gòu)

解析器函數(shù)有一個復(fù)雜的帶有節(jié)點和屬性的層次XML樹,并且將它轉(zhuǎn)變成等價的JavaScript對象和屬性。客戶端基于JavaScript / XML的搜索需要經(jīng)過以下步驟:

1.偽ETL工具準(zhǔn)備數(shù)據(jù)到XML文件(本項目不包括這一步驟)

2.此XML文件加載到指定的位置(本項目不包括這一步驟)

3.在點擊事件發(fā)生時,JavaScript解析器將使用AJAX方法加載XML數(shù)據(jù)

4.檢查搜索中關(guān)鍵字的存在

  • 如果沒有關(guān)鍵字存在拋出錯誤消息“Please enter a search keyword”

5.如果有節(jié)點包含URL屬性的字符串,那么節(jié)點加入到數(shù)組中。

6.RegExp對象關(guān)鍵字通過替代匹配特殊字符處理

7.RegExp對象關(guān)鍵字匹配轉(zhuǎn)換為不區(qū)分大小寫

8.循環(huán)數(shù)組匹配基于驗證的RegExp對象

  • 如果沒有結(jié)果,那就拋出錯誤消息“No results were found!”

9.用斑馬條紋的奇數(shù)和偶數(shù)行對組構(gòu)建結(jié)果集

10.用相關(guān)的Work Order構(gòu)建組匹配PPID行作為子組

11.填充結(jié)果,然后將它們傳遞到最后呈現(xiàn)的集合

12.顯示具有列和所有分組標(biāo)題的結(jié)果集合

  • 分組在默認(rèn)情況下折疊

用戶界面

用戶界面是一個簡單的基于HTML / JavaScript客戶端搜索來返回關(guān)鍵字匹配結(jié)果——默認(rèn)為折疊和分組的記錄集合。以行項目顯示的折疊紀(jì)錄集合直接URL鏈接到相關(guān)項目的網(wǎng)站。在擴(kuò)展組記錄集合下,結(jié)果在On Click事件擴(kuò)大時將保留相關(guān)的子記錄。

內(nèi)嵌頁面引用

我們需要做的第一件事是引用我們的腳本:jQuery,XML和CSS文件。

<link rel="stylesheet" href="path/default.css" /> <script type="text/javascript" src="path/jquery-1.4.2.min.js"></script> <script id="data" type="text/javascript" src="path/search.js" xmlData="data.xml"></script> <input id="term" type="text"/> < input name="Search" id="searchButton" type="button" value="Search"/> <div id="result">< /div>

你會發(fā)現(xiàn)我們已經(jīng)添加了xmlData屬性到search.js引用。這是傳遞來自于HTML文件的XML文件位置的最佳方式。如果你有你有多個項目xml文件想要用作為數(shù)據(jù)源的話,那么這就很有幫助。

XML數(shù)據(jù)源

XML數(shù)據(jù)源可以以任何方式或任何大小來構(gòu)造;但建議保持源XML文件小于1 MB,以便于保持適當(dāng)?shù)姆治銎黜憫?yīng)時間。下面是XML源用于此項目的一個例子:

<?xml version="1.0" encoding="UTF-8"?> <dataroot generated="2015-11-20T10:30" xmlns:od="urn:schemas-microsoft-com:officedata"> <etl> <PPID Lead="Slow,Roy" Description="NORTH OF FAIR" PID="P002"> <WO Description="SHELTON - BANK (SAFETY)" PM="Slow,Roy" Status="CLOSED" WID="305577" WOXREF="SHEL" Program="REINFORCEMENT"> </WO> <Archive>Archived</Archive> <record search="P002NORTH OF FAIRSHELSHELTON 305577SHELTON - BANK (SAFETY)Slow,Roy"/> <url address="P002"/> </PPID> </etl> </dataroot>

錯誤處理

對于這個項目,我們已經(jīng)在兩個關(guān)鍵領(lǐng)域使用過錯誤處理。如果沒有關(guān)鍵字存在,那么錯誤消息“Please enter a search keyword”將出現(xiàn)。如果沒有個結(jié)果生成,則拋出錯誤消息“No results were found!”。

//Check if a keyword exists if (keyword == '') {
      errMsg += 'Please enter a search keyword';
    } else {
      searchThis();
    }
if (i == 0) { pub += '< div>'; pub += 'No results were found!'; pub += '< /div>';

使用jQuery AJAX請求

我們將通過預(yù)定義的能在頁面級別啟用的jQuery庫通過異步JavaScript函數(shù)調(diào)用XML。 AJAX的全稱是“異Asynchronous JavaScript and XML”,由Jesse James Garrett,Adaptive Path的創(chuàng)始人所杜撰。AJAX依賴于XMLHttpRequest,CSS,DOM和其他技術(shù)。AJAX的主要特點是它的“異步”性質(zhì),這意味著它可以從服務(wù)器而無需刷新頁面來發(fā)送和接收數(shù)據(jù)。在異步模式中,客戶端和服務(wù)器會獨立地工作,以及獨立地進(jìn)行通信,從而允許用戶持續(xù)與網(wǎng)頁交互,不管服務(wù)器上發(fā)生了什么。

function searchThis() {
  $.ajax({
    type: "GET",
    url: XMLSource,
    dataType: "xml",
    success: function (xml) {
      loadPublication(xml)
    }
  });
}

使用DOM解析和正則表達(dá)式

由于jQuery本身不能解析XML字符串;我們將充分利用瀏覽器的DOM解析方法——大多數(shù)瀏覽器以這種或那種形式支持?;鸷?,Chrome,Safari以及的Internet Explorer瀏覽器均支持這種方法,它們都具有DOMParser對象。較早的Internet Explorer瀏覽器(如IE 8)使用其專有的ActiveX對象??梢詣?chuàng)建跨瀏覽器的解決方案,來檢查是否缺少DOMParser,但這超出了這個項目的范圍,但是可能以后在額外的跨瀏覽器支持中會添加。

知道JavaScript RegExp(正則表達(dá)式)功能和語法來處理任意特殊字符。同時通過定義正則表達(dá)式來忽略大小寫,以便于在關(guān)鍵字搜索時更加友好。

function loadPublication(xmlData) {
  i = 0; var row; var searchExp = ""; var ppid = "P";

  $(xmlData).find('PPID').each(function () { // Check if a site URL attr exists if($(this).find('url').attr('address').length) { //Set the search string Variables var record          = $(this).find('record').attr('search'); var archive         = $(this).find('Archive'); //Escape characters in keyword expression and use global match RegExp.escape = function(keyword) { return keyword.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
              }; //Keyword expression will be case agnostic var exp = new RegExp(keyword, "i"); //Use formated keyword as the default search searchExp = record.match(exp); //If the search expression is not null if (searchExp != null) { //Start building the result if ((i % 2) == 0) {
              row = 'even';
              } else {
              row = 'odd';
              } if($(this).attr('PID') != ppid) {
                  ppid = $(this).attr('PID');

                  i++;

分組返回結(jié)果

用戶界面是一個簡單的基于HTML / JavaScript客戶端搜索來返回關(guān)鍵字匹配結(jié)果默認(rèn)為折疊又分組的記錄集合。以行項目顯示的折疊紀(jì)錄集合直接URL鏈接到相關(guān)項目的網(wǎng)站。在擴(kuò)展組記錄集合下,結(jié)果在On Click事件擴(kuò)大時將保留相關(guān)的子記錄。

//Grouping of the results function expgroupby(e) {
    docElts=document.all;
    numElts=docElts.length;
    images = e.getElementsByTagName("IMG");
    img=images[0];
    srcPath=img.src;
    index=srcPath.lastIndexOf("/");
    imgName=srcPath.slice(index+1); var b="auto"; if(imgName=="plus.gif"){
        b="";
        img.src="/_layouts/images/minus.gif" }else{
        b="none";
        img.src="/_layouts/images/plus.gif" }
    oldName=img.name;
    img.name=img.alt;
    spanNode=img; while(spanNode!=null){
        spanNode=spanNode.parentNode; if(spanNode!=null&&spanNode.id!=null&&spanNode.id=="wrapper")break } while(spanNode.nextSibling!=null&&spanNode.nextSibling.id!="wrapper"){
        spanNode=spanNode.nextSibling;
        spanNode.style.display=b;
    }
}

完整的源代碼

下面是這個項目完整的源代碼例子。

//Full source $(document).ready(function () { //Global Variables var XMLSource = $('#data').attr('xmlData'); var keyword = ''; var pub = ''; var i = 0;

  $("#searchButton").click(function () {
    keyword = $("input#term").val(); //Reset any message var errMsg = '';
    pub = ''; //Check if a keyword exists if (keyword == '') {
      errMsg += 'Please enter a search keyword';
    } else {
      searchThis();
    } if (errMsg != '') {
      pub += '< div>';
      pub += errMsg;
      pub += '< /div>';
    } //Show error $('#result').html(pub);

  }); //Use enter key to trigger the search query  $("input#term").keypress(function (e) { var key = e.which; if (key == 13){
     $("#searchButton").click(); return false;
    }
  }); function searchThis() {
    $.ajax({
      type: "GET",
      url: XMLSource,
      dataType: "xml",
      success: function (xml) {
        loadPublication(xml)
      }
    });
  } function loadPublication(xmlData) {
    i = 0; var row; var searchExp = ""; var ppid = "P";     

    $(xmlData).find('PPID').each(function () { // Check if a site URL attr exists  if($(this).find('url').attr('address').length) { var record   = $(this).find('record').attr('search'); var archive  = $(this).find('Archive'); //Escape characters in keyword expression and use global match  RegExp.escape = function(keyword) { return keyword.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
                }; //Keyword expression will be case agnostic var exp = new RegExp(keyword, "i"); //Use formated keyword as the default search searchExp = record.match(exp); //If the search expression is not null if (searchExp != null) { //Start building the result if ((i % 2) == 0) {
            row = 'even';
                } else {
            row = 'odd';
                } if($(this).attr('PID') != ppid) {
                    ppid = $(this).attr('PID');

                    i++; //Grouped header row with URL links from the xml attr pub += '< tr id="wrapper"code-string" style="margin: 0px; padding: 0px; border: 0px; color: rgb(128, 0, 128);">'">'   
    + '< td colspan="8">'
    + '< a onclick="javascript:expgroupby(this);return false;" href="javascript:">'
    + '< img name="collapse" alt="expand" src="/_layouts/images/plus.gif" border="0" />< /a>'
    + '< a href="http://project.com/sites/tp/Projects/' + $(this).find('url').attr('address') + '">' + '  ' + $(this).attr('PID')+ ' - ' + $(this).attr('Description') + ' - ' + $(this).attr('Lead') + '< /a>< /td>' + '</tr>';

    } //Bottom grouped expand detail fields pub += '<tr id="item" style="display: none;">' + '< td valign="top">' + $(this).find('WO').attr('WID') + '< /td>' + '< td valign="top">' + $(this).find('WO').attr('Description') + '< /td>' + '< td valign="top">' + $(this).find('WO').attr('PM') + '< /td>' + '< td valign="top">' + $(this).find('WO').attr('Status') + '< /td>' + '< td valign="top">' + $(this).find('WO').attr('WOXREF') + '< /td>' + '< td valign="top">' + $(this).find('WO').attr('Program') + '< /td>' + '< td valign="top">' + $(this).find('Archive').text() + '< /td>' + '< /tr>';           
        }
    }
}); if (i == 0) {
      pub += '< div>';
      pub += 'No results were found!';
      pub += '< /div>'; //Populate the result $('#result').html(pub);
    } else { //Pass the result set showResult(pub);
    }
  } function showResult(resultSet) { //Show the result with the titles of the column fields pub = '< div>There are ' + i + ' results!< /div>';
    pub += '< table id="grid" border="0">';
    pub += '< thead>< tr>< td>< th>PPID - Project Description - Lead PM< /th>< /td>< /tr>';
    pub += '< tr>< th>WO Number< /th>';
    pub += '< th>WO Description< /th>';
    pub += '< th>Project Manager< /th>';
    pub += '< th>Status< /th>';
    pub += '< th>XRef< /th>';
    pub += '< th>Program< /th>';
    pub += '< th>Archive Status< /th>';
    pub += '< /tr>< /thead>';
    pub += '< tbody>';

    pub += resultSet;

    pub += '< /tbody>';
    pub += '< /table>'; //Populate the results $('#result').html(pub)

    $('#grid').tablesorter();
  }
}); //Grouping of the results function expgroupby(e) {
    docElts=document.all;
    numElts=docElts.length;
    images = e.getElementsByTagName("IMG");
    img=images[0];
    srcPath=img.src;
    index=srcPath.lastIndexOf("/");
    imgName=srcPath.slice(index+1); var b="auto"; if(imgName=="plus.gif"){
        b="";
        img.src="/_layouts/images/minus.gif" }else{
        b="none";
        img.src="/_layouts/images/plus.gif" }
    oldName=img.name;
    img.name=img.alt;
    spanNode=img; while(spanNode!=null){
        spanNode=spanNode.parentNode; if(spanNode!=null&&spanNode.id!=null&&spanNode.id=="wrapper")break } while(spanNode.nextSibling!=null&&spanNode.nextSibling.id!="wrapper"){
        spanNode=spanNode.nextSibling;
        spanNode.style.display=b;
    }
}
 
 
 

 藍(lán)藍(lán)設(shè)計www.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計  包裝設(shè)計 、 圖標(biāo)定制  用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù) 

 

分享本文至:

日歷

鏈接

個人資料

藍(lán)藍(lán)設(shè)計的小編 http://www.88yangsc.com

存檔