20jQuery-AJAXmysql的优化

Posted yungcs_

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了20jQuery-AJAXmysql的优化相关的知识,希望对你有一定的参考价值。

要求
1)掌握jQuery常用AJAX-API
2)掌握Java调用mysql / Oracle过程与函数

一)jQuery常用AJAX-API
目的:简化客户端与服务端进行局部刷新的异步通讯
(1)取得服务端当前时间
简单形式:jQuery对象.load(url)
返回结果自动添加到jQuery对象代表的标签中间
如果是Servlet的话,采用的是GET方式
复杂形式:jQuery对象.load(url,sendData,function(backData,textStatus,ajax)… …)
sendData = “user.name”:”jack”,”user.pass”:”123”;
以JSON格式文本方式发送,使用POST方式发送,服务端能收到数据
注意:对于load方法而言,如果请求体无参数发送的话,load方法
采用GET方式提交
注意:对于load方法而言,如果请求体有参数发送的话,load方法
采用POST方式提交
注意:使用load方法时,自动进行编码,无需手工编码

<script type="text/javascript">
        $(":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);
        );
    </script>
    load()方法参数解释:
    参数一:url发送到哪里去
    参数二: sendData发送请求体中的数据,符合JSON格式,例如:key:value,key:value
    参数三:function处理函数,类似于传统方式ajax.onreadystatechange = 处理函数

    其中参数三为function处理函数最多可以接收三个参数,含义如下
    第一个参数:服务端返回的数据,例如:backData
    第二个参数:服务端状态码的文本描述,例如:success、error、
    第三个参数:ajax异步对象,即XMLHttpRequest对象
    以上所有参数的名字可以任意,但必须按顺序书写,尽量做到见名知意

(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

    <script type="text/javascript">
        //定位按钮,同时添加单击事件
        $(":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 = $("<img src='" + tip + "' height='18px' widht='18px'/>")
                //清空span节点中的内容
                $("span").text("");
                //将img节点添加到span节点中
                $("span").append( $img );
            );
        );
    </script>

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 version="1.0" encoding="UTF-8"?>
<root>
    <city>广州</city>
    <city>中山</city>
    <city>深圳</city>
    <city>佛山</city>
    <city>珠海</city>
</root>
<script type="text/javascript">
        $(":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);
                );
            );
        );
    </script>

(5)省份-城市,基于jQuery的AJAX二级联动,用Struts2整合AJAX【非数据库版】

        $.ajax(
            
              type:"POST",
              url:"$pageContext.request.contextPath/findCityByProvinceRequest?id="+new Date().getTime(),
              data:"province":province,
              success:function(backData,textStatus,ajax)
            
        );
        注意:这里每个key值不能乱写 
    <select id="province">
        <option>选择省份</option>
        <option>广东</option>
        <option>湖南</option>
    </select>
    <select id="city">
        <option>选择城市</option>
    </select>

<script type="text/javascript">
        $("#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 );
                        );
                    
                );
            
        );
    </script>

public class ProvinceCityAction extends ActionSupport
    private String province;//广东
    public void setProvince(String province) 
        this.province = province;
    
    public String findCityByProvince() throws Exception 
        cityList = new ArrayList<String>();
        if("广东".equals(province))
            cityList.add("湛江");
            cityList.add("汕头");
        else if("湖南".equals(province))
            cityList.add("邵阳");
            cityList.add("浏阳");
        
        return "ok";
    
    private List<String> cityList;
    public List<String> getCityList() 
        return cityList;
    
    /**
     * var backData = 
     *                   "cityList":["邵阳","浏阳"]
     *                
     */
<struts>

   <package name="timePackage" extends="json-default" namespace="/">

        <global-results>
            <result name="ok" type="json"/>
        </global-results>

        <!-- 获取服务端时间 -->
        <action 
            name="loadTimeRequest" 
            class="cn.itcast.javaee.js.time.TimeAction" 
            method="loadTimeMethod"/>

        <!-- 检查用户名和密码是否存在 -->
        <action 
            name="checkRequest" 
            class="cn.itcast.javaee.js.register.RegisterAction" 
            method="checkMethod"/>

        <!-- 根据省份查询城市 -->   
        <action 
            name="findCityByProvince" 
            class="cn.itcast.javaee.js.provincecity.ProvinceCityAction" 
            method="findCityByProvince"/>

   </package>

</struts>

二)掌握Java调用Oracle过程与函数
写一个计算个人所得税的应用

--定义过程
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;
/

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号员工的的姓名,职位,月薪

–定义函数

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

作业:
1)基于jQuery的AJAX应用—-三级联动【数据库版或是非数据库版不限制】
省/市/区
广东/广州/天河,越秀
广东/深圳/罗湖,福田

湖南/长沙/雨花,天心
湖南/株洲/荷塘,天元

湖北/武汉/江夏,洪山
湖北/宜昌/西陵,夷陵

以上是关于20jQuery-AJAXmysql的优化的主要内容,如果未能解决你的问题,请参考以下文章

第20天SQL进阶-查询优化- performance_schema系列二:常用配置详解(SQL 小虚竹)

第20天SQL进阶-查询优化- performance_schema系列二:常用配置详解(SQL 小虚竹)

第20天SQL进阶-查询优化- performance_schema系列二:常用配置详解(SQL 小虚竹)

复习 Android 性能优化的第20天,居然被一个小细节劫走offer

奥威Power-BI 旅游业BI方案——按省份分析旅游情况

python构建 城市和省份字典 的实例应用