設定獲得的標籤體、動態綁定事件以及Ajax

標籤：標籤   ajax   json   xmlhttprequest   

前言

主要談談Ajax以及jQuery對Ajax的支援

Ajax（Asynchronous javascript  and xml）以非同步地方式實現局部HTML的重新整理。建立互動式web應用程式而無需犧牲瀏覽器安全色性的流行方法。

本文設定獲得的標籤體

 

 動態綁定事件 方式一

 

方式二

 

例子

 

Ajax

1.Ajax是一種在2005年由Google推廣開來的編程模式，是一種使用現有標準的新方法通過Ajax，可以建立更好、更快以及更友好的web應用程式。

2.Ajax基於javascript和HTTP請求

3.。通過Ajax您的javascript可以使用javascript的xmlHttpRequest對象來直接與伺服器進行通訊。通過這個對象，您的javascript可在不重新載入頁面的情況與web伺服器交換資料。

4.Ajax在瀏覽器與web伺服器之間使用非同步資料轉送，這樣可使網頁從伺服器請求少量的資訊，而非整個頁面。

1.ajax

   synchronous  javascript   and   xml，為解決傳統的web中，"提交--等待---提交"的模式而產生的 技術。其本質就是用javascript擷取瀏覽器裡面的一個特殊的內建對象(XmlHttpRequest),給伺服器
   非同步發送請求，伺服器會返回xml和文本資料給XmlHttpRequest，然後，通過javascript調用 XmlHttpRequest對象中資料更新頁面，在整個過程中，頁面無重新整理。

2.ajax編程

   step1  擷取XmlHttpRequest對象
         在ie中擷取和其他的瀏覽器不一樣，其他瀏覽器都是通過new  XMLHttpRequest()來擷取，ie 中是這樣來擷取  new   ActiveXObject()。
          function  getXmlHttpRequest(){
                          var   xmlHttpRequest=null;
                         if((typeof XMLHttpRequest)!=‘undefined‘){
                                 xmlHttpRequest=new  XMLHttpRequest();
                         }else{
                              xmlHttpRequest=new  ActiveXObject("Microsoft.XMLHttp");
                         }
                       return   xmlHttpRequest;
                   }
                  
   step2  使用XmlHttpRequest發送請求
           1)發送get請求
              var   url="some.do?name=zs";
              xhr.open("get",url,true);
              get:請求的方式
              url:請求的地址，可以接上參數
              true:非同步請求
              //註冊監聽器
              xhr.onreadystatechange=f1;
              //發送請求，真正的發送請求
              xhr.send(null);
             
            2)發送post請求
              var   url="some.do";
              xhr.open("post",url,true);
              //設定訊息頭
              xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
              xhr.onreadystatechange=f1;
              xhr.send("name=zs");
    step3 伺服器處理請求，返迴響應
    step4 在監聽器處理伺服器的響應
            function  f1(){
               //處理相關的代碼
            }
           xhr.onreadystatechange=f1;
           xhr.onreadystatechange=function(){
                   if(xhr.readyState==4){
                         //擷取文本資料
                         var  txt=xhr.responseText;
                        //擷取XML  DOM對象
                        var  xml=xhr.responseXml;
                        //  dom  操作  更新頁面資料
                   }
            }

 

例子：檢查使用者是否可用

例子一，非同步地情況

1.jsp頁面

  註：jQuery對Ajax的支援  

 

2.servelet

  例子二：同步的情況 jsp頁面 Servlet代碼

<div></div>

 

 

 

 
3.XmlHttpRequest對象

 readyState屬性：XmlHttpRequest與伺服器通訊的狀態。
  0(建立完畢) ：XmlHttpRequest對象已經建立好，但沒有調用open方法。
  1(初始化):XmlHttpRequest沒有調用send()方法。
  2(發送):XmlHttpRequest開始發送資料給伺服器。
  3(擷取資料):XmlHttpRequest，正擷取伺服器返回的資料
  4(擷取資料完畢):此時，可以通過XmlHttpRequest獲得伺服器 返回的所有資料。

 reponseText屬性：伺服器返回的文本。
 responseXML屬性：伺服器返回的xml資料。
 onreadystatechange屬性：用來設定回呼函數，即處理伺服器返回的資料。
 status屬性：伺服器返回的狀態代碼，(200,500,404)

 
4.緩衝問題

   在ie瀏覽器中，如果請求是get方式的請求，ie瀏覽器會將 請求的資料緩衝起來，如果下次訪問，地址沒變，ie瀏覽器 就不會發送真正的請求，會將緩衝的資料顯示給使用者。 
   解決方式：
     1.可以在地址後面加上一個隨機數。
     2.使用post方式發送請求。

 
 5.編碼問題

    1).在瀏覽器中，如果請求方式post，瀏覽器是會utf-8對資料進行編碼。 
    2).在瀏覽器中，如果請求方式get，ie使用的"gbk/gb2312" 對中文進行編碼，
    firefox使用utf-8。    

      解決編碼問題：
          step1.  修改tomca中的server.xml  .
                      添加URIEcoding="utf-8",
                      對get請求使用utf-8進行編碼
          step2. 對請求的地址使用 encodeURI()函數，
                     對地址中中文使用utf-8編碼

 
 6.prototype

    $(id) : document.getElementById(id);
    $F(id): document.getElementById(id).value;
    $(id1,id2.....) 擷取多個對象，返回一個數組
    evalJSON：將符合JSON格式的字串，轉換成JS對象。

 

 7.JSON

    javascript  tonation   object,是一種輕量級的資料交換的格式，    主要用來在伺服器和js之間交換資料。

    1).JSON中表示對象
        a.表示一個對象
           var   obj={‘屬性‘:‘屬性值‘，‘屬性‘:‘屬性值‘，‘屬性‘:‘屬性值‘....}
           屬性要加上引號。
           屬性值如果是字串要加上引號。
           屬性值的類型：string，number，null、object、boolean
       b.表示一個數組
          var  arr=[{},{},{}]
    2).將java對象轉換成JSON格式的字串     
        a.轉換一個對象
            JSONObject   jobj=JSONObject.fromObject(obj);
            jobj.toString();
        b.轉換數組或集合
        JSONArray  arr=JSONArray.fromObject(stus);
        arr.toString();
            
            

  註冊頁面檢查使用者是否可用和城市下拉框的級聯

1.WebRoob目錄下的註冊頁面regist.jsp

 

  2.WEB-INF 目錄下的web.xml   3.lib目錄下的jar包名稱

json-lib-2.2.3-jdk15.jar

 

4.src目錄下得實體類Option.java

 

5.src目錄下的Servlet

ActionServlet.java

 

 

 

jQuery對於Ajax的支援

$.get(url,回呼函數，資料類型);

$.post(url,資料，回呼函數，資料類型);

 

傳遞json資料

json={屬性名稱：屬性值，屬性名稱：屬性值}；

 

例子：下拉框的級聯

 

jsp頁面

 Servlet代碼

 

註：圖層的設定

樣式：z-index:正數；//500為分界線  設定圖層

js對象：div.style.zindex=正數

mybg.style.filter=‘"Alpha(opacity=30)";//設定透明度

mybg.style.overflow=‘hidden‘;

 

 

 

總結

 

知識回顧

 

JQuery 是一種js的架構
       類似的架構 ExtJS
     架構:程式碼的一種有機組合，是程式開發過程中的一種半成品
依賴庫：jquery-1.4.3.js
文法：
 $(  )

選取器
 基本選取器

 id選取器
 $("#id值")

 標籤選取器
 $("標籤名稱")

 Class選取器
 $(".class值")

 群組選取器
 $("標籤名稱1,標籤名稱2");

 包含選取器
 $("標籤名稱1 標籤名稱2");

 表單選取器
 $(":input")  選出所有的input標籤
 :text      選出input標籤中type為text的所有標籤
 :password
 :button
 :radio
 :reset
 :checkbox
 :hidden
 :submit
 :image
 :file

 條件限定選取器
  基本條件限定
  :first
  :last
  :lt(下標)
  :gt(下標)
  :odd   奇數，下標從0開始
  :even  偶數，下標從0開始
  :eq(下標)
  :not(選取器)  取反，去除選取器中選中的

  內容限定
  :contains(字元)  選中含有某個字元的標籤
  :parent       是否含有子標籤
  :empty 
  :has(選取器)     選中含有某個子標籤的父標籤

  屬性限定
  [屬性名稱]    選出含有此屬性的所有標籤
  [屬性名稱=屬性值]

  可見度限定
  :visible  選出可見的
  :hidden   選出隱藏的

  選中限定
  :checked
  :selected

  子標籤的限定
  :first-child
  :last-child
  :nth-child(運算式)

 
 DOM
  擷取標籤
   $(選取器);
  建立標籤對象
   $("標籤");  任何JQuery API返回的都是JQuery對象
  插入標籤
   父標籤.append("子標籤")  追加子標籤
   父標籤.prepend("子標籤") 在最前面插入子標籤
   標籤.before("標籤");
   標籤.after("標籤");
   子標籤.appendTo("父標籤選取器") 將子標籤追加到對應的父標籤
  刪除標籤
   標籤.remove(選取器)  刪除特定標籤
   標籤.remove()  刪除標籤
   標籤.empty()   刪除所有內容
  獲得添加屬性
   屬性值 = 標籤.attr(屬性名稱)
   標籤.attr("屬性名稱","屬性值")
   標籤.attr({"屬性名稱","屬性值","屬性名稱","屬性值"});
  改變樣式
   標籤.css("樣式屬性名稱","樣式值")
   標籤.css({樣式屬性名稱:"樣式值",樣式屬性名稱:"樣式值"});
   標籤.addClass("class值");
   標籤.removeClass("class選取器的值");
  動畫效果
   show(fast/slow/數字);
   hide();

   fadeIn(fast/slow/數字);    淡入淡出
   fadeOut();
  設定獲得標籤體
   var  xx = 標籤.html()
   標籤.html("內容")
   var val =標籤.text()
   標籤.text("文本");
 
 動態綁定事件
  1.$(document).ready(function事件);   HTML文檔載入完成之後執行Ready中綁定的事件
  
  $(document).ready(function(){
   //獲得事件發生的標籤
          $("#span2").bind("mouseover",function(){
   
   alert("hello");
   });

  });

  $(document).ready(function(){

   $("#span2").mouseover(function(){
    alert("aaaaa");
   });
  });
  

  2.$(function(){
   function事件
    });

    $(function(){

   $("#span2").mouseover(function(){
    
    alert("aaa");
   });

  });

 JQuery對於Ajax的支援
  $.get(url,回呼函數,資料類型)
  $.post(url,資料,回呼函數,資料類型)
  $.ajax();

  
  $(function(){
  
   $(":text:first").blur(function(){
    var val = $(":text:first").attr("value");
    var url = "http://localhost:8899/helloJSP129/as?name="+val;
    $.get(url,function(data){
     $("#span1").html(data);
    });
    //$.post(url, { name: "John", time: "2pm" } );
   });
  
  });

 傳遞Json資料
 json = {屬性名稱:屬性值,屬性名稱:屬性值}
 $(function(){
  $("select:first").change(function(){
   var val = $("select option:selected").attr("value");
   $.get("http://localhost:8899/helloJSP129/js?country="+val,function(data){
    //將json字串轉成json對象,獲得json對象數組
    var jsons = eval("("+data+")");
    //獲得最後一個select,將jquery對象轉換成js對象
    //var sel = $("select:last").get(0);
    var sel = $("select:last");
    sel.empty();
    for(var i=0;i<jsons.length;i++){
     sel.append("<option value=‘"+jsons[i].id+"‘>"+jsons[i].name+"</option>");
    }
   });
  });
  
 });