jQuery-AJAX、mysqlの最適化

12808 ワード

一)jQuery常用AJAX-API
目的:クライアントとサービス側のローカルリフレッシュの非同期通信を簡素化する
1)サービス側現時点取得
  • 単純形式:jQuery .load(url)
  • は、結果がjQueryオブジェクトが表すラベルの中央に自動的に追加されることを返す.サーブレットであればGET方式
  • を採用しています
  • 複雑な形式:
  • jQuery .load(url,sendData,function(backData,textStatus,ajax){... ...}); sendData = {"user.name":"jack","user.pass":"123"}; ( JSON , POST , )
  • load()メソッドパラメータの説明:
  • パラメータ1:url送信先
  • パラメータ2:sendDataは要求体のデータを送信し、JSONフォーマットに適合する.例えば:{key:value,key:value}
  • パラメータ3:function処理関数、従来方式ajaxに類似する.onreadystatechange=処理関数
  • ここで、パラメータ3はfunction処理関数であり、最大3つのパラメータを受信することができ、意味は以下の通りである.
  • 最初のパラメータ:サービス側から返されるデータ、例えばbackData
  • 第2のパラメータ:サービス側ステータスコードのテキスト記述、例えばsuccess、error、
  • 第3パラメータ:ajax非同期オブジェクト、すなわちXMLHttpRequestオブジェクト
  • 以上のすべてのパラメータの名前は任意ですが、順番に書かなければなりません.できるだけ名前を見て意味を知るようにしなければなりません.

  • 注意:loadメソッドでは、要求体がパラメータなしで送信される場合、loadメソッドはGET方式で送信される.要求体にパラメータ送信がある場合、loadメソッドはPOST方式で送信される.loadメソッドを使用する場合、手動符号化
  • を必要とせずに自動的に符号化する.
        
            $(":button").click(function(){
                var url = "${pageContext.request.contextPath}/loadTimeRequest?time"+new Date().getTime();
                var sendData = null;
                $.load(url,sendData,function(a,b,ajax){
                    var jsonJAVA = ajax.responseText;
                    var jsonJS = eval("("+jsonJAVA+")");
                    var strTime = jsonJS.strTime;
                    $("span:first").html(strTime).css("color","red");
                    $("span:last").html(strTime).css("color","blue");
                });
                //$("span").load(url);
            });
        
    

    2)登録ユーザー名とパスワードが存在するかどうかを確認する
  • $.get(url,sendData,function(backData,textStatus,ajax){... ...})
  • $.post(url,sendData,function(backData,textStatus,ajax){... ...})->提唱
  • 注意:getまたはpostメソッドを使用する場合、手動で
  • を符号化する必要がなく、自動的に符号化されます.
    3)jQueryオブジェクト.serialize()
  • 役割:JSON形式のテキスト
  • を自動的に生成する
  • 注意:jQueryオブジェクトごとにname属性が設定されます.name属性は要求パラメータ名
  • とみなされるためです.
  • 注意:ラベル要素
  • を使用する必要があります.
  • 適用:属性が多すぎる場合、このAPI
  • の採用を強く推奨する
        
            //    ,        
            $(":button").click(function(){
                //        
                var username = $(":text:first").val();
                var password = $(":text:last").val();
                //   
                username = $.trim(username);
                password = $.trim(password);
                //        
                var url = "${pageContext.request.contextPath}/checkRequest?time="+new Date().getTime();
                /*    JSON  
                var sendData = {
                    "user.username":username,
                    "user.password":password
                };
                */
                /*    JSON  */
                var sendData = $("form").serialize();
                $.post(url,sendData,function(backData,textStatus,ajax){
                    //backData   JSON  /  ,    .       
                    var tip = backData.tip;
                    //  img  
                    var $img = $("![](" + tip + ")")
                    //  span      
                    $("span").text("");
                    // img     span   
                    $("span").append( $img );
                });
            });
        
    
    public class RegisterAction extends ActionSupport{
        private User user;
        public User getUser() {
            return user;
        }
        public void setUser(User user) {
            this.user = user;
        }
        /**
         *               
         */
        public String checkMethod() throws Exception {
            tip = "images/MsgSent.gif";
            if("  ".equals(user.getUsername()) && "123".equals(user.getPassword())){
                tip = "images/MsgError.gif";
            }
            return "ok";
        }
        private String tip;
        public String getTip() {
            return tip;
        }
        /**
         * var backData = {
         *                  "tip":"images/MsgError.gif"
         *                }
         */
    }
    

    4)jQuery解析XML
  • xml :
  • 
    
          
          
          
          
          
    
    
  • jQuery :
  • 
            $(":button").click(function(){
                var url = "${pageContext.request.contextPath}/03_city.xml";
                var sendData = null;
                $.get(url,sendData,function(backData,textStatus,ajax){
                    /*
                    // xml    jquery  ,    jquery api  xml  
                    var $xml = $(backData);
                    var $city = $xml.find("city");
                    $city.each(function(){
                        //     city  
                        var city = $(this).text();
                        alert(city);
                    });
                    */
                    var xml = ajax.responseXML;
                    var $xml = $(xml);
                    var $city = $xml.find("city");
                    $city.each(function(){
                        //     city  
                        var city = $(this).text();
                        alert(city);
                    });
                });
            });
        
    

    5)省-都市、jQueryのAJAX二級連動に基づき、Struts 2でAJAXを統合する【非データベース版】
  • js :
  •     
        
    
            $("#province").change(function(){
                //            ,     
                $("#city option:gt(0)").remove();
                var province = $("#province option:selected").text();
                if("    " != province){
                    $.ajax({
                        "type":"POST",
                        "url":"${pageContext.request.contextPath}/findCityByProvince?time="+new Date().getTime(),
                        "sendData":{"province":province},
                        "success":function(backData,textStatus,ajax){
                            //js  
                            var city = backData.cityList;
                            //jquery  
                            var $city = $(city);
                            //each()
                            $city.each(function(){
                                //this      
                                var $option = $("<option>" + this + "</option>");
                                $("#city").append( $option );
                            });
                        }
                    });
                }
            });
        
    
  • java :
  • public class ProvinceCityAction extends ActionSupport{
        private String province;//  
        public void setProvince(String province) {
            this.province = province;
        }
        public String findCityByProvince() throws Exception {
            cityList = new ArrayList();
            if("  ".equals(province)){
                cityList.add("  ");
                cityList.add("  ");
            }else if("  ".equals(province)){
                cityList.add("  ");
                cityList.add("  ");
            }
            return "ok";
        }
        private List cityList;
        public List getCityList() {
            return cityList;
        }
        /**
         * var backData = {
         *                   "cityList":["  ","  "]
         *                }
         */
    }
    
  • struts :
  • 
       
            
                
            
    
            
            
    
            
            
                
               
            
       
    
    

    二)Java呼び出しOracleプロセスと関数の把握
  • 個人所得税の計算の応用を書く
  • sql :

  • --    
    create or replace procedure get_rax(salary in number,rax out number)
    as
        --      
        bal number;
    begin
        bal := salary - 3500;
        if bal<=1500 then
           rax := bal * 0.03 - 0;
        elsif bal<=4500 then
           rax := bal * 0.1 - 105;
        elsif bal<=9000 then
           rax := bal * 0.2 - 555;
        elsif bal<=35000 then
           rax := bal * 0.25 - 1005;
        elsif bal<=55000 then
           rax := bal * 0.3 - 2755;
        elsif bal<=80000 then
           rax := bal * 0.35 - 5505;
        else
           rax := bal * 0.45 - 13505;
        end if;
    end;
    /
    --    
    declare
       --  
       rax number; 
       salary number := &salary;
    begin
       get_rax(salary,rax); 
       dbms_output.put_line(salary||'      '||rax||'  ');
    end;
    /
    
  • java :
  • public class TestCallOracleProc {
        public static void main(String[] args) throws Exception{
            String sql = "{call get_rax(?,?)}";
            Connection conn = JdbcUtil.getConnection();
            CallableStatement cstmt = conn.prepareCall(sql);
            cstmt.setInt(1,10000);
            cstmt.registerOutParameter(2,Types.INTEGER);
            cstmt.execute();
            Integer rax = cstmt.getInt(2);
            System.out.println("10000    " + rax + "  ");
            JdbcUtil.close(cstmt);
            JdbcUtil.close(conn);
        }
    }
    
  • 7788号従業員の名前、職階、月給を照会
  • sql文:
  • --    
    create or replace function findEmpNameAndJobAndSal(pempno in number,pjob out varchar2,psal out number) 
    return varchar2
    as
        pename emp.ename%type;
    begin
        select ename,job,sal into pename,pjob,psal from emp where empno = pempno;
        return pename;
    end;
    /
    --    
    declare
        pename emp.ename%type;
        pjob   emp.job%type;
        psal   emp.sal%type;
    begin
        pename := findEmpNameAndJobAndSal(7788,pjob,psal);
        dbms_output.put_line('7788'||'--'||pename||'--'||pjob||'--'||psal);
    end;
    /
    
  • java :
  • public class TestCallOracleFunc {
        public static void main(String[] args) throws Exception{
            String sql = "{?=call findEmpNameAndJobAndSal(?,?,?)}";
            Connection conn = JdbcUtil.getConnection();
            CallableStatement cstmt = conn.prepareCall(sql);
            cstmt.registerOutParameter(1,Types.VARCHAR);
            cstmt.setInt(2,7788);
            cstmt.registerOutParameter(3,Types.VARCHAR);
            cstmt.registerOutParameter(4,Types.INTEGER);
            cstmt.execute();
            String ename = cstmt.getString(1);
            String job = cstmt.getString(3);
            Integer sal = cstmt.getInt(4);
            System.out.println(ename+":"+job+":"+sal);
            JdbcUtil.close(cstmt);
            JdbcUtil.close(conn);
        }
    }
    

    三)mysqlの最適化
  • なぜ最適化するのか:実際のプロジェクトの起動に伴い、データベースはしばらくの間実行され、最初のデータベース設定は、実際のデータベースの実行性能といくつかの違いがあります.この場合、最適化調整
  • を行う必要があります.
  • データベースの最適化という課題は大きく、4つのクラスに分けることができます.
  • ホスト性能
  • メモリ使用性能
  • ネットワーク伝送性能
  • SQL文実行性能【ソフトウェアエンジニア】
  • 次のデータベースSQLの最適化スキームを示します:-1)最も効率的なテーブル名の順序を選択します(筆記試験の一般試験)
  • データベースの解析器は、FROM句の表名を右から左の順に処理し、FROM句に最後に書かれた表が最初に処理されます.FROM句に複数の表が含まれている場合は、レコード数が最も少ない表を最後に置く必要があります.3つ以上の表がクエリーに接続されている場合は、他の表で参照されている表を最後に置く必要があります.
  • 例:従業員の番号、名前、給与、給与等級、部門名
  • を問い合わせる
          select emp.empno,emp.ename,emp.sal,salgrade.grade,dept.dname
          from salgrade,dept,emp
          where (emp.deptno = dept.deptno) and (emp.sal between salgrade.losal and salgrade.hisal)          
    
    - 1)             ,          ,    ,      
    - 2)           ,       ,    ,      
    

    -2)WHERE句中の接続順序(筆記試験常考)-データベースは右から左の順序でWHERE句を解析するが,この原理により表間の接続は他のWHERE条件の左に書かなければならず,最大数の記録をフィルタできる条件はWHERE句の右に書かなければならない.たとえば、従業員の番号、名前、給与、部門名の照会
          select emp.empno,emp.ename,emp.sal,dept.dname
          from emp,dept
          where (emp.deptno = dept.deptno) and (emp.sal > 1500)   
    

    -3)SELECT句では*番を使用しない-データベースは解析中に*をすべてのカラム名に順次変換します.この作業はデータ辞書を検索することによって行われます.これは、select empno,ename from emp;より多くの時間を費やすことを意味します.
    -4)DELETEの代わりにTRUNCATEを使用
    -5)COMMITをできるだけ多く使う:COMMITはロールバックポイントを解放するから
    -6)HAVING句をWHERE句で置き換え、WHEREが先に実行し、HAVINGが後に実行する
    -7)内部関数を多く使用してSQL効率を高める
    -8)テーブルの別名の使用:salgrade s
    -9)カラムの別名を使用する:enamee