国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 學院 > 開發設計 > 正文

Ajax

2019-11-14 15:36:08
字體:
來源:轉載
供稿:網友

1.什么是Ajax?   (asynchronous javascript and xml)
    是一種用來改善用戶體驗的技術,其實質是利用瀏覽器提供的一個特殊對象(xmlhttpRequest)異步地向服務器發送請求,
    服務器返回部分數據,瀏覽器利用這些數據對當前頁面做局部更新,整個過程,頁面無刷新,不打斷用戶的操作。
    注:
        異步: 當ajax對象(XMLHttPRequest)向服務器發送請求的時候,瀏覽器不會銷毀當前頁面,用戶仍然可以對當前頁面做其它操作
使用BS結構時:

old-web

使用AJAX工作原理:

ajax-web

2.ajax對象
    (1)如何獲得該對象?
         function getXhr(){
              var xhr = null;
              if(window.XMLHttpRequest){
                  xhr = new XMLHttpRequest();
              }else{
                  xhr = new ActiveXObject('microsoft.XMLHttp');
              }
              return xhr;
          }
    (2)幾個重要屬性
        1)onreadystatechange:綁訂事件處理函數,用來處理readystatechange事件。
            注:
                當ajax對象的readystate屬性值發生了改變,比如從0變成了1,就會產生該事件。
        2)readyState:有五個值,分別是0,1,2,3,4,表示ajax對象通信的狀態,其中,4表示ajax對象已經獲得了服務器返回的所有的數據。
        3)responseText:獲得服務器返回文本數據。
        4)responseXML:獲得服務器返回的xml文檔。
        5)status:獲得狀態碼。     
3.編程步驟
    step1,獲得ajax對象
    比如: var xhr = getXhr();
    step2,發送請求
      1)get請求
        xhr.open('get','check_uname.do?username=Tom',true);
        xhr.onreadystatechange=f1;   
        xhr.send(null);
       注
           true:異步地(當ajax對象(XMLHttpRequest)向服務器發送請求的時候,瀏覽器不會銷毀當前頁面,用戶仍然可以對當前頁面做其它操作)。
           false:同步地(當ajax對象(XMLHttpRequest)向服務器發送請求的時候,瀏覽器不會銷毀當前頁面,瀏覽器會鎖定當前頁面,用戶不
                   能夠對當前頁面做其它操作)。   

       2)post請求       
            xhr.open('post','check_uname.do',true);
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
            xhr.onreadystatechange=f1;
            xhr.send('username=Tom');
            注:
                ajax對象在發送post請求時,默認不會添加"content-type"消息頭,所以,需要調用setRequestHeader方法來手動添加。

    step3,編寫服務器端的處理程序。一般來說,服務器端不需要返回完整的頁面,只需要返回部分的數據。
    step4,事件處理函數   
            function f1(){
                //獲得服務器返回的部分數據
                if(xhr.readyState == 4 && xhr.status == 200){
                    var txt = xhr.responseText;
                    //更新頁面
                    ...
                }
            }

4.緩存問題
    (1)什么是緩存問題?
        ie瀏覽器在發送get請求時,會比較請求地址是否訪問過,如果訪問過,則不再發送新的請求,而是顯示之前的訪問的結果。
    (2)解決方式
        在請求地址后面添加上一個隨機數。

       xhr.open('get','shownumber.do?'+Math.random(),true);

5.編碼問題
   (1)get請求
        1)為什么會產生亂碼?
         對于中文參數值,ie瀏覽器會使用"gbk"來編碼,其它瀏覽器會使用"utf-8"來編碼。服務器端默認會使用"iso-8859-1"來解碼。
        2)如何解決?
            step1,服務器端統一使用"utf-8"來解碼。
                修改tomcat的server.xml文件<Connector URIEncoding="utf-8"/>
                注:只針對get請求有效。
            step2,使用encodeURI函數對請求參數進行編碼。
                注:encodeURI是一個內置的函數,會使用utf-8來編碼。 

                var uri = 'check.do?username='+$F('username');
                xhr.open('get',encodeURI(uri),true);

      
   (2)post請求
        1)為什么會產生亂碼?
            瀏覽器會使用"utf-8"來編碼。而服務器默認使用"iso-8859-1"來解碼。
        2)如何解決?
            request.setCharacterEncoding("utf-8");

6.json(Javascript object notation)
        www.json.org
    (1)json是什么?
       輕量級的數據交換格式
       1)數據交換
           將要交換的數據轉換成一種與平臺無關的數據格式(比如xml),然后交給接收方來處理。
       2)輕量級
           相對于xml,json文檔要更小,解析速度要更快。
     (2)基本語法
          1)表示一個對象
              {屬性名:屬性值,屬性名:屬性值...}

              var obj = {"name":"明樓","age":33};
              注:
                  a.屬性名必須使用雙引號括起來。
                  b.屬性值可以是string,number,true/false,null,object。
                  c.屬性值如果是string,必須使用雙引號括起來。
          2)表示由多個對象組成的數組
              [{},{},{}....]   

              var arr = [{"name":"明樓","age":23},{"name":"明臺","age":33}];
    (3)如何使用json?
        1)將java對象(或者java對象組成的數組或者集合)轉換成json字符串的形式。
            使用json提供的jar包JSONObject,JSONArray

            java對象:

    JSONObject obj =  JSONObject.fromObject(s);

     String jsonStr = obj.toString();

    java對象組成的數組或集合:

     JSONArray obj = JSONArray.fromObject(stocks);

     String jsonStr = obj.toString();

   2)將json字符串轉換成javascript對象(或者javascript對象組成的數組)。

            prototype.js提供的evalJSON()函數。
            $(id): 依據id查找節點。
            $F(id): 依據id查找節點,返回value。
            strip():除掉字符串兩端的空格。
            evalJSON():將json字符串轉換成javascript對象或者javascript對象組成的數組。

            json字符串轉換成javascript對象:

            var str = '{"code":"600015","name":"山東高速","price":10}';

            var obj = str.evalJSON();

            java字符串轉換成javascript對象組成的數組:

           var str = '[{"name":"明樓","age":23},{"name":"明臺","age":33}]';

            var arr = str.evalJSON();


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 犍为县| 恩平市| 定日县| 平乡县| 临安市| 海原县| 聂拉木县| 韩城市| 临沧市| 大渡口区| 民勤县| 新化县| 上虞市| 正定县| 邛崃市| 大城县| 彭山县| 海原县| 宁海县| 镇平县| 镇远县| 阜康市| 长岭县| 安仁县| 咸阳市| 库尔勒市| 修水县| 罗山县| 汤阴县| 汝阳县| 凌云县| 和田县| 合山市| 启东市| 根河市| 江华| 吴江市| 石泉县| 项城市| 华宁县| 青阳县|