Java綠地(~ming~)

          Java 草地

          常用鏈接

          統(tǒng)計(jì)

          最新評(píng)論

          Ajax基礎(chǔ)

           

          Ajax基礎(chǔ)

          .Ajax的關(guān)鍵技術(shù):

          1.使用XHTML(HTML)CSS構(gòu)建標(biāo)準(zhǔn)化的展示層

          2.使用DOM進(jìn)行動(dòng)態(tài)顯示和交互

          3.使用XMLXSLT進(jìn)行數(shù)據(jù)交換和操縱

          4.使用XMLHttpRequest異步獲取數(shù)據(jù)

          5.使用JavaScript將所有元素綁定在一起

          .javascript語法(是一種弱類型的解釋型的語言)

          1.基礎(chǔ)語法:

          <script type="text/javascript">   function init(){

               var age=22;       //語句可以加”;”,也可以不加,但是好的編程習(xí)慣最好加

               alert("age"+age+","+typeof age);

          /*數(shù)據(jù)類型:1.未定義(Undefined),變量未定義;2.空(Null),變量未初始化

          3.字符串(String),可以放在單引號(hào)或雙引號(hào)中;4.數(shù)值(Number),可以表示整數(shù)、浮點(diǎn)數(shù)

          5.布爾型(Boolean),truefalse;6.對(duì)象(Object  */

               var color=new Array();   /* 也可以是  var cloor=[];  */

               color[0]="hello";   color[1]=12;

               for(var i=0;i<color.length;i++){   alert(color[i]);   }  //任何的類型最好用var

             }

            window.onload=init; </script>  //等待所有的頁面元素都加載再load javascript


          2.
          函數(shù):函數(shù)也是對(duì)象

          <script type="text/javascript">

             function  Person(){   this.age=22;    this.name="name"; //this綁定以后才能調(diào)用到

                 this.sayHello=function(){   alert("world  "+this.name); }}  //內(nèi)部方法的定義

             var person=new Person();  //創(chuàng)建對(duì)象實(shí)例

             person.sayHello(); alert(person.age); window.onload=person.sayHello();</script>



          .DOM基礎(chǔ):Document Object Model

          1.類型:元素節(jié)點(diǎn),屬性節(jié)點(diǎn),文本節(jié)點(diǎn)

          2.基本的DOM方法:

            實(shí)例: <body><h1>hello h1</h1>       //為了跨瀏覽器節(jié)點(diǎn)寫在一起

                  <form id="form" action=""

                      ><input id="txt1" type="text" name="text1" value="123"

                      ></form>    </body>

           Javascript: function dom(){

            var txt1=document.getElementById("txt1");  alert(typeof txt1);   //返回值為對(duì)象

            var inputs=document.getElementsByTagName("input");alert("len= "+inputs.length);

             for(var i=0;i<inputs.length;i++){  var value=inputs[i].getAttribute("value");

             var val=inputs[i].setAttribute("value","145");   }  }

          3.重要DOM屬性;

          function node(){  var form=document.getElementById("form");

            var firstChild= form.firstChild.getAttribute("value"); alert("first="+firstChild);

            var lastChild= form.lastChild.getAttribute("value"); alert("last="+lastChild);

            var sibling= form.firstChild.nextSibling.getAttribute("value");

            alert("parentNode type="+form.parentNode.nodeType);

          /* nodeTpye屬性用來區(qū)分節(jié)點(diǎn)的類型,元素為1,屬性為2,文本節(jié)點(diǎn)是3  */

            alert(form.parentNode.childNodes[0].nodeValue);} /* nodeValue只對(duì)文本節(jié)點(diǎn)有效 */

           

          4.改變網(wǎng)頁結(jié)構(gòu)的DOM方法:實(shí)例(改變頁面的顯示圖片)

            Html:

          <body>   <h1 align="center"> Welcome to the DOM Magic Shop!</h1>

               <form name="magic-hat">

                 <p align="center">

                   <img id="topHat" src="topHat.gif" />       <br />

                   <input id="bt" type="button" value="Hocus!" onClick="showRabbit()"/></p>

                  </form> </body>

          簡便的方法一:

            <script type="text/javascript">

                function showRabbit(){   var topHat=document.getElementById("topHat");

                  topHat.setAttribute("src","rabbit-hat.gif");

                   var button=document.getElementById("bt");  

               button.setAttribute("value","back"); button.onclick=hiddenRabbit;  }

          function hiddenRabbit(){   var topHat=document.getElementById("topHat");

                 topHat.setAttribute("src","topHat.gif");

                 var button=document.getElementById("bt");

                 button.setAttribute("value","Hocus!");  button.onclick=showRabbit;    }

              </script>    //javascript方法的轉(zhuǎn)換

          復(fù)雜的方法二:

          function showRabbit(){

              var topHat=document.getElementById("topHat");

              var newImage =document.createElement("img");

                  newImage.setAttribute("src","rabbit-hat.gif");

              var imgParent=topHat.parentNode;

                  imgParent.insertBefore(newImage,topHat);

                  imgParent.removeChild(topHat);

              var button=document.getElementById("bt");  

                  button.setAttribute("value","back");

                  button.onclick=hiddenRabbit;    }

          appendChild(node):把新建的節(jié)點(diǎn)插入到節(jié)點(diǎn)樹的最后節(jié)點(diǎn)下,成為這個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)

          createTextNode(text):創(chuàng)建文本節(jié)點(diǎn)

           

          四.使用Ajax發(fā)送異步請(qǐng)求  XMLHttpRequest

          1Html:<body>  <table align="center">      <h2>enter location data</h2>

              <tr>     <th align="left">zipcode:</th>

               <td><input id="zipcode" type="text" name="zipcode" onblur="processZipData()"> </td> </tr>                                        //鼠標(biāo)離開時(shí)調(diào)用的函數(shù)

              <tr> <th align="left">city:</th>

                  <td><input id="city" type="text" name="city"></td>  </tr>

              <tr>  <th align="left">province:</th>

                <td><input id="province" type="text" name="province"></td></tr> </table></body>

          2Javascript: <script type="text/javascript">

            var request=false;

            function createRequest(){  //創(chuàng)建跨瀏覽器的XMLHttpRequest

              try{   request=new XMLHttpRequest();

              }catch(e){  try{   request=new ActiveXObject("Msxm12.XMLHTTP");

              }catch(e1){  try{  request=new ActiveXObject("Microsoft.XMLHTTP");

               }catch(e2){  request=false;  }   } }  if(!request)alert("error");  }

            function processZipData(){    createRequest();

              var zipcode=document.getElementById("zipcode").value;

              var url="zipcode.jsp?zipcode="+escape(zipcode);//轉(zhuǎn)義不能用明文正確發(fā)送任何字符

              request.open("GET",url,true);  //建立到服務(wù)器的新請(qǐng)求

              request.onreadystatechange=updatePage;//服務(wù)器完成請(qǐng)求后,然后調(diào)用指定任何方法

              request.send(null);  }    //向服務(wù)器發(fā)送請(qǐng)求

            function updatePage(){

               if(request.readyState==4){  if(request.status==200){

                   var response=request.responseText.split(",");  用,號(hào)分割成對(duì)象數(shù)組

                   document.getElementById("city").value=response[0];

                   document.getElementById("province").value=response[1];

                 }  }   }  </script>

           

          3.服務(wù)器端測(cè)試代碼:<%Map<String,String> datas=new HashMap<String,String>();

           datas.put("123","Hefei,Anhui");

          String zipcode=request.getParameter("zipcode");String data=datas.get(zipcode);

          if(data==null){data="error,error";}out.print(data);   %>



          五:在請(qǐng)求和響應(yīng)中使用XML

          1.修改的javascript: function updatePage(){

               if(request.readyState==4){       if(request.status==200){

                   var response= request.responseXML;   

                   var city=response.getElementsByTagName("city")[0].firstChild.nodeValue;

              var province=response.getElementsByTagName("province")[0].firstChild.nodeValue;

                   document.getElementById("city").value=city;

                   document.getElementById("province").value=province;      }   }   }

          XMLHttpRequest對(duì)象提供了一個(gè)屬性responseXML,它能以DOM Document的形式獲取服務(wù)器的XML響應(yīng)

          2.修改的服務(wù)器代碼:<%

            Map<String,String> datas=new HashMap<String,String>();

            String location1="<location>"+"<city>Hefei</city>"+"<province>Anhui</province>"

                                 +"</location>";

            String error="<location>"+"<city>error</city>"+"<province>errors</province>"

                                 +"</location>";

            datas.put("123",location1);  String zipcode=request.getParameter("zipcode");

            String data=datas.get(zipcode);  if(data==null){  data=error;  }

            response.setContentType("text/xml;charset=UTF-8");  out.print(data);%>

            //需要增加的返回的代碼格式

           

          六.使用JSON進(jìn)行數(shù)據(jù)傳輸

          1JSON (JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式。易于人閱讀和編寫,同時(shí)也易于機(jī)器解析和生成。它是基于JavaScript 的。

          2Javascript:

          function updatePage(){ // eval()函數(shù)將來源輸入無條件地視為表達(dá)式進(jìn)行解析,返回對(duì)象

               if(request.readyState==4){       if(request.status==200){

                   var response=eval("("+request.responseText+")");

                   document.getElementById("city").value=response.city;

                   document.getElementById("province").value=response.province;

                 }     }   }

          3.服務(wù)器端:<%Map<String,String>datas=new HashMap<String,String>();

            String location1="{'city':'hefei','province':'anhui'}";

            String error="{'city':'error','province':'error'}";

            datas.put("123",location1);  String zipcode=request.getParameter("zipcode");

            String data=datas.get(zipcode);

            if(data==null){    data=error;  }  out.print(data);  %>

           

          JSON數(shù)據(jù)賦值給變量:

          var company = { employees": [

            { "firstName": "Brett", "lastName":"McLaughlin", "email": brett@newInstance.com" },

            { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },

          ]}

           

          posted on 2007-09-20 00:59 mrklmxy 閱讀(448) 評(píng)論(0)  編輯  收藏


          只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。


          網(wǎng)站導(dǎo)航:
           
          主站蜘蛛池模板: 游戏| 湛江市| 绥阳县| 北碚区| 涞水县| 广宁县| 衡南县| 秦皇岛市| 昌江| 德令哈市| 中山市| 慈利县| 神农架林区| 淮阳县| 舞钢市| 中超| 沈丘县| 互助| 涟源市| 托克逊县| 宿松县| 阜康市| 南京市| 壤塘县| 崇文区| 梨树县| 合山市| 大荔县| 临夏县| 台中市| 敦化市| 财经| 青海省| 新巴尔虎右旗| 茌平县| 潜山县| 平和县| 军事| 易门县| 万载县| 汾西县|