• Ajax


    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();

  • 相关阅读:
    Linux报错排解
    linux中wget 、apt-get、yum rpm区别
    Java NIO系列教程
    Java NIO系列教程(七) FileChannel
    使用一条sql查询多个表中的记录数
    ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)
    java.security.NoSuchAlgorithmException: SHA1PRNG SecureRandom not available
    javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorException: PKIX path building failed
    Oracle查询锁表和解锁
    Data source rejected establishment of connection, message from server: "Too many connections"
  • 原文地址:https://www.cnblogs.com/gaochaojin/p/4822678.html
Copyright © 2020-2023  润新知