Jquery ajax基礎教學_jquery

jQuery的Ajax帶來了無需刷新的web頁面革命。這裡就詳細介紹一下jQuery所涉及的Ajax操作。 （無須特殊說明，均需有伺服器配置，這裡本人用的是Tomcat 7）

1.基於請求載入檔案資料

這裡的請求通常都是網頁的某些操作，如點擊等。

而其載入資料的類型歸類為以下四種：a.載入HTML檔；b.載入JSON檔；c.載入Javascript檔；d.載入XML檔。

其對應的四種載入方法分別為：load、getJSON、getScript、get。

a.載入HTML檔

把寫好的HTML檔載入到網頁中。例如：

//load方法加载html文件 
$('#letter-a a').click(function(){ 
    $('#dictionary').load('a.html'); 
    return false; 
});

這裡a.html也是放在伺服器端的一個已經寫好的頁面文件，直接呼叫load，就可以讓所匹配的目標內載入HTML內容。

b.載入JSON檔

把寫好的JSON檔案載入到網頁中。例如：

//加载json文件 
$('#letter-b a').click(function(){ 
  $.getJSON('b.json',function(data){ 
    var html = ''; 
    $.each(data,function(entryIndex, entry){ 
      html += "<div class='entry'>"; 
      html += "<h3 id="entry-term">" + entry.term + "</h3>"; 
      html += "<div class='part'>" + entry.part + "</div>"; 
      html += "<div class='definition'>"; 
      html += entry.definition; 
      if(entry.quote){ 
        html += '<div class="quote">'; 
        $.each(entry.quote, function(lineIndex, line){ 
          html += '<div class="quote-line">' + line + '</div>'; 
        }); 
        if(entry.author){ 
          html += '<div class="quote-author">' + entry.author + '</div>'; 
        } 
      } 
      html += "</div>"; 
      html += "</div>"; 
    }); 
    $('#dictionary').html(html); 
  }); 
  return false;  
}); 

getJSON方法第一個參數是指載入的檔案路徑，第二個參數是一個載入完成以後的回呼函數。透過這個回呼函數，就可以對載入好的data進行操作。重複的部分使用each循環處理。最後將拼湊好的html字串使用html方法加入到目標id=dictionary的元素中。

c.載入Javascript檔

載入Javascript檔和載入HTML檔類似。這裡要注意的是，使用getScript方法載入的Javascript會根據當下Javascript環境直接運作。例如：

//执行脚本 
$('#letter-c a').click(function(){ 
    $.getScript('c.js'); 
    return false; 
}); 

d.載入XML檔

jQuery中可以使用get方法載入XML檔。例如：

//加载XML文档 
$('#letter-d a').click(function(){ 
    $.get('d.xml',function(data){ 
      $('#dictionary').empty(); 
      $(data).find('entry').each(function(){ 
        var $entry = $(this); 
        var html = '<div class="entry">'; 
        html += '<h3 id="entry-attr-term">' + $entry.attr('term') + '</h3>'; 
        html += '<div class="part">' + $entry.attr('part') + '</div>'; 
        html += '<div class="definition">'; 
        html += $entry.find('definition').text(); 
        var $quote = $entry.find('quote'); 
        if($quote.length) 
        { 
          html += '<div class="quote">'; 
          $quote.find('line').each(function(){ 
            html += '<div class="quote-line">'; 
            html += $(this).text() + '</div>'; 
          }); 
          if($quote.attr('author')){ 
            html += '<div class="quote-author">'; 
            html += $quote.attr('author') + '</div>'; 
          } 
          html += '</div>'; 
        } 
        html += '</div>'; 
        html += '</div>'; 
        $('#dictionary').append($(html)); 
      }); 
    }); 
    return false; 
}); 

XML檔案有一個特點就是，你可以像用jQuery操作HTML那樣操作XML的那些元素。如使用attr方法、text方法等等。

2.基於Get方法向伺服器取得資料

之前的例子都是從伺服器上靜態的取得資料檔案。而Ajax的價值不只如此，透過get方法從伺服器動態的獲取數據，為web頁面無刷新的實作提供了莫大的幫助。

以下就使用get方法從伺服器取得一段所需的資料。這裡，本人結合J2EE的Struts2框架和TOMCAT搭建的伺服器端。具體伺服器端多種多樣，可以是php apache或是其他什麼的都可以。

操作如下，使用者點選Eavesdrop則傳送get方法到伺服器，取得Eavesdrop的數據，並且傳回json值，然後在jQuery中組裝。

程式碼如下：

//GET方法加载服务器内容 
$('#letter-e a').click(function(){ 
    var requestData = {term:$(this).text().toUpperCase()}; 
    $.get('EGet.action', requestData, function(data){       
      //返回的数据包结构根据Struts2配置如下： 
      //{"resultMSG":"{ 内部另一个json结构 }","success":"true"} 
      //先将返回的数据包拆包 
      var responseObj = eval("("+data+")"); 
      if(responseObj.success == 'true') 
      { 
        $('#dictionary').empty(); 
        //返回成功，接下来再次解包resultMSG 
        var dataObj = eval("("+responseObj.resultMSG+")"); 
        var html = ""; 
        html += "<div class='entry'>"; 
        html += "<h3 id="dataObj-term">" + dataObj.term + "</h3>"; 
        html += "<div class='part'>" + dataObj.part + "</div>"; 
        html += "<div class='definition'>"; 
        html += dataObj.definition; 
        if(dataObj.quote){ 
          html += '<div class="quote">'; 
          $.each(dataObj.quote, function(lineIndex, line){ 
            html += '<div class="quote-line">' + line + '</div>'; 
          }); 
          if(dataObj.author){ 
            html += '<div class="quote-author">' + dataObj.author + '</div>'; 
          } 
        } 
        html += "</div>"; 
        html += "</div>"; 
        $('#dictionary').html(html); 
      } 
      else 
      { 
        var $warning = $('<div>Sorry, your term was not found!</div>'); 
        $('#dictionary').html($warning); 
      } 
    }); 
    return false; 
}); 

這裡要說明的是由於struts2配置，回傳的時候在需要的資料外又打了一層包，用來表示結果內容的resultMSG和是否ajax存取成功的success欄位。所以使用了2次eval解包。

這裡我後台java程式傳遞過來的並非配置好的HTML，而是只是json類型的數據，本人認為在java層面編寫html並傳遞不如直接傳遞數據方便，以後修改樣式或者頁面結構也都不如直接修改javascript方便。

透過get方法取得伺服器數據，相當於向伺服器提交以下這種請求：EGet.action?term=XXX

下面放出java後台檔碼：

1.EGet.java

package lhb; 
import com.opensymphony.xwork2.ActionSupport; 
public class EGet extends ActionSupport 
{ 
  private String term; 
  private Terms sampleTerm; 
  private String success; 
  private String resultMSG; 
  /** 
   * 
   */ 
  private static final long serialVersionUID = 1L; 
  public String execute() throws Exception 
  { 
    initData(); 
    if(term.equals(sampleTerm.getTerm())) 
    { 
      success = "true"; 
      resultMSG = "{\"term\": \""+sampleTerm.getTerm()+"\","+ 
          "\"part\": \""+sampleTerm.getPart()+"\","+ 
          "\"definition\": \""+sampleTerm.getDefinition()+"\","+ 
          "\"quote\": ["+ 
          "\"Is public worship, then, a sin,\","+ 
          "\"That for devotions paid to Bacchus\","+ 
          "\"The lictors dare to run us in,\","+ 
          "\"And resolutely thump and whack us?\""+ 
          "],"+ 
          "\"author\": \""+sampleTerm.getAuthor()+"\"}"; 
    } 
    else{ 
      success = "false"; 
      resultMSG = "fail"; 
    } 
    return SUCCESS; 
  } 
  //初始化数据 
  private void initData() 
  { 
    String partEAVESDROP = "v.i."; 
    String definitionEAVESDROP = "Secretly to overhear a catalogue of the crimes and vices of another or yourself."; 
    String quoteEAVESDROP[] = {"A lady with one of her ears applied", 
        "To an open keyhole heard, inside,", 
        "Two female gossips in converse free —", 
        "The subject engaging them was she.", 
        "\"I think,\" said one, \"and my husband thinks", 
        "That she's a prying, inquisitive minx!\"", 
        "As soon as no more of it she could hear", 
        "The lady, indignant, removed her ear.", 
        "\"I will not stay,\" she said, with a pout,", 
        "\"To hear my character lied about!\""}; 
    String authorEAVESDROP = "Gopete Sherany"; 
    Terms EAVESDROP = new Terms(); 
    EAVESDROP.setTerm("EAVESDROP"); 
    EAVESDROP.setPart(partEAVESDROP); 
    EAVESDROP.setDefinition(definitionEAVESDROP); 
    EAVESDROP.setQuote(quoteEAVESDROP); 
    EAVESDROP.setAuthor(authorEAVESDROP); 
    sampleTerm = EAVESDROP; 
  } 
  public String getTerm() 
  { 
    return term; 
  } 
  public void setTerm(String term) 
  { 
    this.term = term; 
  } 
  public String getSuccess() 
  { 
    return success; 
  } 
  public void setSuccess(String success) 
  { 
    this.success = success; 
  } 
  public String getResultMSG() 
  { 
    return resultMSG; 
  } 
  public void setResultMSG(String resultMSG) 
  { 
    this.resultMSG = resultMSG; 
  } 
} 

這個action中的資料本身就直接配置了，這裡只是做一個示範使用。真正的這些數據在專案中一般是存放在資料庫中的。由於這主要是jQuery方面的小範例，就不弄那麼麻煩了。

2.Terms.java

package lhb; 
public class Terms 
{ 
  private String term; 
  private String part; 
  private String definition; 
  private String quote[]; 
  private String author; 
  public String getTerm() 
  { 
    return term; 
  } 
  public void setTerm(String term) 
  { 
    this.term = term; 
  } 
  public String getPart() 
  { 
    return part; 
  } 
  public void setPart(String part) 
  { 
    this.part = part; 
  } 
  public String getDefinition() 
  { 
    return definition; 
  } 
  public void setDefinition(String definition) 
  { 
    this.definition = definition; 
  } 
  public String[] getQuote() 
  { 
    return quote; 
  } 
  public void setQuote(String[] quote) 
  { 
    this.quote = quote; 
  } 
  public String getAuthor() 
  { 
    return author; 
  } 
  public void setAuthor(String author) 
  { 
    this.author = author; 
  } 
} 

這個類別純粹就是一個pojo類別。沒有特別的方法。

3.struts.xml

這是struts2的json方式傳遞配置

<&#63;xml version="1.0" encoding="UTF-8"&#63;> 
<!DOCTYPE struts PUBLIC 
  "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" 
  "http://struts.apache.org/dtds/struts-2.3.dtd"> 
<struts> 
  <!-- 指定全局国际化资源文件 --> 
  <constant name="struts.custom.i18n.resources" value="i18n"/> 
  <!-- 指定国际化编码所使用的字符集 --> 
  <constant name="struts.i18n.encoding" value="GBK"/> 
  <!-- JSON的action --> 
  <package name="jsonInfo" extends="json-default"> 
    <action name="EGet" class="lhb.EGet"> 
      <result type="json"> 
        <param name="contentType">text/html</param> 
        <param name="includeProperties">success, resultMSG</param> 
      </result> 
    </action> 
  </package> 
</struts> 

這裡可以看到includeProperties裡所配置的外面一層json，success和resultMSG。這在實際中很好用。如果伺服器中沒有取得需要的值，雖然ajax存取成功，但是獲得的結果並不算成功，因為沒有取得需要的值。這裡加入了success標示，方便前台jQuery操作。

基於其他方法取得伺服器資料從寫法上與get基本一致，如post方法、load方法。這裡就不再贅述了。

3.動態提交表單

透過jQuery的AJAX支持，可以讓我們很方便的動態提交表單而不用刷新頁面。

如下面範例：

$('#letter-f form').submit(function(){ 
    //调用preventDefault方法阻止事件冒泡，具体工作就是如果网页有脚本错误，那么则会阻止提交form表单 
    event.preventDefault(); 
    var formValues = $('input[id="term"]').val(); 
    var requestStr = {'term':formValues.toUpperCase()}; 
    $.get('EGet.action', requestStr, function(data){ 
      var responseObj = $.parseJSON(data); 
      if(responseObj.success == 'true') 
      { 
        var html = ''; 
        var dataObj = $.parseJSON(responseObj.resultMSG); 
        html += "<div class='entry'>"; 
        html += "<h3 id="dataObj-term">" + dataObj.term + "</h3>"; 
        html += "<div class='part'>" + dataObj.part + "</div>"; 
        html += "<div class='definition'>"; 
        html += dataObj.definition; 
        if(dataObj.quote){ 
          html += '<div class="quote">'; 
          $.each(dataObj.quote, function(lineIndex, line){ 
            html += '<div class="quote-line">' + line + '</div>'; 
          }); 
          if(dataObj.author){ 
            html += '<div class="quote-author">' + dataObj.author + '</div>'; 
          } 
        } 
        html += "</div>"; 
        html += "</div>"; 
        $('#dictionary').html(html); 
      } 
      else{ 
        var warning = $('Sorry, your term was not found!'); 
        $('#dictionary').html(warning); 
      } 
    }); 
}); 

这个例子援引的数据还是上一个EGet.action所用的那个数据。程序的操作过程基本是：

首先调用这个 preventDefault();这个方法在注释里也说明了，用于阻止事件冒泡带来的不便与麻烦。

接下来通过$()获得input的元素，使用val方法获得其值，接下来的使用方法与上例基本相同。

这里也可以使用serialize方法将input元素序列化成如下格式“term=xxx”这样。不过由于服务器端的java程序中的那些数据时硬编码的，所有，不是太方便用，就没用。

4.关于Ajax的观察员函数

jQuery包含了2个全局的ajax观察员函数：ajaxStart和ajaxStop。

分别在执行ajax操作的起始和结束时调用。例如：

//ajax的观察员函数 ajaxStart 和 ajaxStop 
  $('<div id="loading">Loading...</div>').insertBefore('#dictionary') 
    .ajaxStart(function(){ 
      $(this).show(); 
    }).ajaxStop(function(){ 
      $(this).hide(); 
    }); 

这里无论哪个a标签触发ajax操作，包括静态载入文件和动态服务器访问，都会触发ajaxStart和ajaxStop。
关于错误处理，常用的三个函数：success、complete、error。

下面以error为例：

.error(function(jqXHR){ 
  $('#dictionary').html('An Error occurred:'+ jqXHR.status).append(jqXHR.responseText); 
}); 

可以以连缀的写法将error方法放置于get方法之后：“$.get().error()”这样。
刚才看了一下，这个可以将Tomcat的报错，加载到页面之上。这在有的时候还是很有用的。如图：

不过不知道为何这个将我原有样式也覆盖了一些，如果有哪位网友知道，麻烦指正一下问题所在。谢谢了。

5.Ajax和事件

Ajax动态访问服务器以后生成的元素，如果想绑定事件的话，一种方法是每次取到都重新绑定处理程序，这种相对来说比较简单，但是不适合DOM结构经常变化的场景。如果DOM结构经常变化，那么就需要用live方法，实现事件委托。

live用法与bind一样。

关于jquery ajax基础教程今天小编就给大家介绍到这里，后续还会持续给大家介绍，希望大家继续关注脚本之家网站，有你们的关注我们会做的更好，谢谢！