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

來源:互聯網
上載者:User

標籤:標籤   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>");
    }
   });
  });
  
 });

 

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.