13Ajax和JQuery

1.Ajax

1.1是什么?

“Asynchronous Javascript And XML”（异步JavaScript和XML），

并不是新的技术，只是把原有的技术，整合到一起而已。

1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。

1.2有什么用?

咱们的网页如果想要刷新局部内容。 那么需要重新载入整个网页。用户体验不是很好。 就是为了解决局部刷新的问题。 保持其他部分不动，只刷新某些地方。

1.3数据请求 Get

1)创建对象

function ajaxFunction() {
        var xmlHttp;
        try { // Firefox, Opera 8.0+, Safari
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            try { // Internet Explorer
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        return xmlHttp;
    }

2）发送请求

//执行get请求
    function get() {
        //1. 创建xmlhttprequest 对象
        var request = ajaxFunction();

        //2. 发送请求。
        /*    
                    参数一： 请求类型  GET or  POST
                    参数二： 请求的路径
                    参数三： 是否异步， true  or false
                    
                */
        request.open("GET", "/day13Ajax/DemoServlet01", true);
        request.send();
    }

如果发送请求的同时，还想获取数据，那么代码如下

//执行get请求
    function get() {
        //1. 创建xmlhttprequest 对象
        var request = ajaxFunction();

        //2. 发送请求。
        /*    
                    参数一： 请求类型  GET or  POST
                    参数二： 请求的路径
                    参数三： 是否异步， true  or false
                    
                */
        //request.open("GET", "/day13Ajax/DemoServlet01", true);
        request.open("GET", "/day13Ajax/DemoServlet01?name=aa&age=18", true);
        
        //3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
        request.onreadystatechange = function(){
            
            //前半段表示 已经能够正常处理。  再判断状态码是否是200
            if(request.readyState == 4 && request.status == 200){
                //弹出响应的信息
                alert(request.responseText);
            }
        }
        request.send();

1.4数据请求 Post

package cn.jxufe.web;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class DemoServlet01 extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("收到了一个请求。。。");
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        System.out.println("收到了一个请求。。。" + name + "=" + age);

        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write("收到了请求...");
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("现在来了一个post请求，将要去走get的代码了。");
        doGet(request, response);
    }

}

如果不带数据

function ajaxFunction() {
        var xmlHttp;
        try { // Firefox, Opera 8.0+, Safari
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            try { // Internet Explorer
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        return xmlHttp;
    }
    //执行get请求
    function post() {
        //1. 创建xmlhttprequest 对象
        var request = ajaxFunction();

        //2. 发送请求。
        /*    
                    参数一： 请求类型  GET or  POST
                    参数二： 请求的路径
                    参数三： 是否异步， true  or false
                    
                */
        request.open("POST", "/day13Ajax/DemoServlet01", true);
        request.send();
    }

带数据

    function ajaxFunction() {
        var xmlHttp;
        try { // Firefox, Opera 8.0+, Safari
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            try { // Internet Explorer
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        return xmlHttp;
    }
    //执行get请求
    function post() {
        //1. 创建xmlhttprequest 对象
        var request = ajaxFunction();

        //2. 发送请求。
        /*    
                    参数一： 请求类型  GET or  POST
                    参数二： 请求的路径
                    参数三： 是否异步， true  or false
                    
                */
        request.open("POST", "/day13Ajax/DemoServlet01", true);

        //如果想带数据，就写下面的两行

        //如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        //带数据过去  ， 在send方法里面写表单数据。 
        request.send("name=obama&age=19");
    }

//执行get请求
    function post() {
        //1. 创建xmlhttprequest 对象
        var request = ajaxFunction();

        //2. 发送请求。
        /*    
                    参数一： 请求类型  GET or  POST
                    参数二： 请求的路径
                    参数三： 是否异步， true  or false
                    
                */
        request.open("POST", "/day13Ajax/DemoServlet01", true);

        //3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
        request.onreadystatechange = function() {

            //前半段表示 已经能够正常处理。  再判断状态码是否是200
            if (request.readyState == 4 && request.status == 200) {
                //弹出响应的信息
                alert(request.responseText);
            }
        }

        //如果想带数据，就写下面的两行

        //如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        //带数据过去  ， 在send方法里面写表单数据。 
        request.send("name=obama&age=19");

    }

2.JQuery

2.1是什么?

javascript 的代码框架。

2.2有什么用?

简化代码，提高效率。

2.3核心 

write less do more , 写得更少，做的更多。

2.4load()方法

package cn.jxufe.web;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class DemoServlet02 extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("收到了请求。。。");
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write("给你一份数据");
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP '01demo.jsp' starting page</title>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

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

        //$("#aaa").val("aaa");
        //$("#aaa").html("9999999");

        //$("#aaa").load("/day16/DemoServlet02");

        //$("#text01") --- document.getElementById("text01");
        $("#aaa").load("/day13Ajax/DemoServlet02", function(responseText, statusTXT, xhr) {
            //alert("jieguo:"+responseText);
            //找到id为text01的元素， 设置它的value属性值为 responseText 对应的值
            $("#aaa").val(responseText);
        });
    }
</script>
</head>

<body>
    <!-- <h3><a href="" onclick="load()">使用JQuery执行load方法</a></h3>  -->
    <h3>
        <input type="button" onclick="load()" value="使用JQuery执行load方法">
    </h3>

    <input type="text" id="aaa">

</body>
</html>

2.5get()方法

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP '01demo.jsp' starting page</title>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<script type="text/javascript">
    //$.get(URL,callback);
    function get() {
        $.get("/day13Ajax/DemoServlet02", function(data, status) {
            //alert("结果是：" + data);
            //$("#div01")  -- document.getElementById("div01");

            //$("#div01").val(); //val  用于设置 元素里面有values 的属性值 
            //$("#div01").html(data);
            //$("#div01").val(data);
            $("#div01").text("aaa=" + data);
        //$("#div01").html(data); // <font>
        });
    }
</script>
</head>

<body>

    <input type="button" onclick="get()" value="使用JQuery演示 get方法">

    <div id="div01"
        style=" 100px ; height: 100px ; border: 1px solid blue; ">

    </div>

</body>
</html>

* val("aa");

> 只能放那些标签带有value属性
* html("aa"); ---写html代码
* text("aa");

> 其实没有什么区别，如果想针对这分数据做html样式处理，那么只能用html()

2.6POST()方法

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP '06demo.jsp' starting page</title>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<script type="text/javascript">
    function post() {
        $.post("/day13Ajax/DemoServlet02", {
            name : "zhangsan",
            age : "18"
        }, function(data, status) {
            //想要放数据到div里面去。 --- 找到div
            $("#div01").html(data);
        });
    }
</script>
</head>

<body>

    <input type="button" onclick="post()" value="使用JQuery演示 post方法">

    <div id="div01"
        style=" 100px ; height: 100px ; border: 1px solid blue; ">

    </div>

</body>
</html>

2.7城市联动小案例

 1）准备数据库

 

2） 准备页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/city02.js"></script>

<!-- 引用的是 xml的处理方法 <script type="text/javascript" src="js/city.js"></script> -->
</head>
<body>
    省份:
    <select name="province" id="province">
        <option value="">-请选择 -
        <option value="1" >广东
        <option value="2" >湖南
        <option value="3" >湖北
        <option value="4" >四川
    </select>
城市: 
    <select name="city" id="city">
        <option value="" >-请选择 -
    </select>
</body>
</html>

3)创建javabean

package cn.jxufe.entity;

public class CityBean {
    private int id ;
    private int pid;
    String cname;
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public int getPid() {
        return pid;
    }
    public void setPid(int pid) {
        this.pid = pid;
    }
    public String getCname() {
        return cname;
    }
    public void setCname(String cname) {
        this.cname = cname;
    }
    
}

4）创建dom接口及实现类

package cn.jxufe.dao;

import java.sql.SQLException;
import java.util.List;

import cn.jxufe.entity.CityBean;

public interface CityDao {
    List<CityBean> findCity(int pid) throws SQLException ;
}

package cn.jxufe.dao.impl;

import java.sql.SQLException;
import java.util.List;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import cn.jxufe.dao.CityDao;
import cn.jxufe.entity.CityBean;
import cn.jxufe.util.JDBCUtil02;

public class CityDaoImpl implements CityDao{
    @Override
    public List<CityBean> findCity(int pid) throws SQLException {
        // TODO Auto-generated method stub
        QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
        String sql = "select * from city where pid = ?";
        return runner.query(sql, new BeanListHandler<CityBean>(CityBean.class) , pid);
        
    }
}

5）创建servlet

#1 以xml的形式返回数据

package cn.jxufe.web;

import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.thoughtworks.xstream.XStream;

import cn.jxufe.dao.CityDao;
import cn.jxufe.dao.impl.CityDaoImpl;
import cn.jxufe.entity.CityBean;

public class CityServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            // 1. 获取参数
            int pid = Integer.parseInt(request.getParameter("pid"));

            // 2 找出所有的城市
            CityDao dao = new CityDaoImpl();
            List<CityBean> list = dao.findCity(pid);

            // 3. 返回数据。手动拼 ---> XStream 转化 bean对象成 xml
            XStream xStream = new XStream();

            // 想把id做成属性
            // xStream.useAttributeFor(CityBean.class, "id");
            // 设置别名
            xStream.alias("city", CityBean.class);
            // 转化一个对象成xml字符串
            String xml = xStream.toXML(list);

//            // 返回数据
            response.setContentType("text/xml;charset=utf-8");
            response.getWriter().write(xml);
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

#02以json的形式返回数据

package cn.jxufe.web;

import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.thoughtworks.xstream.XStream;

import cn.jxufe.dao.CityDao;
import cn.jxufe.dao.impl.CityDaoImpl;
import cn.jxufe.entity.CityBean;
import net.sf.json.JSONArray;

public class CityServlet02 extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            // 1. 获取参数
            int pid = Integer.parseInt(request.getParameter("pid"));

            // 2 找出所有的城市
            CityDao dao = new CityDaoImpl();
            List<CityBean> list = dao.findCity(pid);

            // 3. 把list ---> json数据
            // JSONArray ---> 变成数组 ， 集合 []
            // JSONObject ---> 变成简单的数据 { name : zhangsan , age:18}

            JSONArray jsonArray = JSONArray.fromObject(list);
            String json = jsonArray.toString();
            response.setContentType("text/html;charset=utf-8");
            response.getWriter().write(json);

        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

 6）JSP

#1

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/city.js"></script>

<!-- 引用的是 xml的处理方法 <script type="text/javascript" src="js/city.js"></script> -->
</head>
<body>
    省份:
    <select name="province" id="province">
        <option value="">-请选择 -
        <option value="1" >广东
        <option value="2" >湖南
        <option value="3" >湖北
        <option value="4" >四川
    </select>
城市: 
    <select name="city" id="city">
        <option value="" >-请选择 -
    </select>
</body>
</html>

#2

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/city02.js"></script>

</head>
<body>
    省份:
    <select name="province" id="province">
        <option value="">-请选择 -
        <option value="1" >广东
        <option value="2" >湖南
        <option value="3" >湖北
        <option value="4" >四川
    </select>
城市: 
    <select name="city" id="city">
        <option value="" >-请选择 -
    </select>
</body>
</html>

7）js

#1

$(function() {
    //1。找到省份的元素
    $("#province").change(function() {
        //2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
        //$("#province").varl();
        var pid = $(this).val();
        
        /*[
            {
                "cname": "深圳",
                "id": 1,
                "pid": 1
            },
            {
                "cname": "东莞",
                "id": 2,
                "pid": 1
            }
            ...
        ]*/
        $.post( "CityServlet02",{pid:pid} ,function(data,status){
            
            //先清空
            $("#city").html("<option value='' >-请选择-");
            //再遍历，追加
            $(data).each(function(index , c) {
                $("#city").append("<option value='"+c.id+"' >"+c.cname)
            });
        },"json" );
        
    });
});

#2

$(function() {
    //1。找到省份的元素
    $("#province").change(function() {
        //2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
        //$("#province").varl();
        var pid = $(this).val();
        
        /*[
            {
                "cname": "深圳",
                "id": 1,
                "pid": 1
            },
            {
                "cname": "东莞",
                "id": 2,
                "pid": 1
            }
            ...
        ]*/
        $.post( "CityServlet02",{pid:pid} ,function(data,status){
            
            //先清空
            $("#city").html("<option value='' >-请选择-");
            //再遍历，追加
            $(data).each(function(index , c) {
                $("#city").append("<option value='"+c.id+"' >"+c.cname)
            });
        },"json" );
        
    });
});