108_JavaWeb_AJAX 请求

AJAX 请求

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术
ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术
Ajax 请求的局部更新，浏览器地址栏不会发生变化，局部更新不会舍弃原来页面的内容

jQuery 中的 AJAX 请求

$.ajax 方法
    url 表示请求的地址
    type 表示请求的类型 GET 或 POST 请求
    data 表示发送给服务器的数据；格式有两种：1：name=value&name=value;  2：{key:value}
    success 请求成功，响应的回调函数
    dataType 响应的数据类型 json表示json对象， text 表示纯文本， xml 表示 xml 数据

$("#ajaxBtn").click(function(){
					$.ajax({
						url: "http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
						data: {action:"jQueryAjax"},
						type: "GET",
						success:function (data){
							$("#msg").html( " ajax 编号：" + data.id + " , 姓名：" + data.name);
						},
						dataType: "json"
					});

$.get 方法和$.post 方法
    url 请求的 url 地址
    data 发送的数据
    callback 成功的回调函数
    type 返回的数据类型

$("#getBtn").click(function(){

					$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {
						$("#msg").html(" get 编号：" + data.id + " , 姓名：" + data.name);
					},"json");

				});

$("#postBtn").click(function(){

					$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data){
						$("#msg").html(" get 编号：" + data.id + " , 姓名：" + data.name)
					},"json");
					
				});

$.getJSON 方法
    url 请求的 url 地址
    data 发送给服务器的数据
    callback 成功的回调函数

	// ajax--getJson请求
				$("#getJSONBtn").click(function(){
					// 调用
					$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function (data){
						$("#msg").html(" get 编号：" + data.id + " , 姓名：" + data.name)
					})

				});

表单序列化 serialize()
serialize()可以把表单中所有表单项的内容都获取到，并以 name=value&name=value 的形式进行拼接

	// ajax请求
				$("#submit").click(function(){
					// 把参数序列化
					$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) {
						$("#msg").html(" Serialize 编号：" + data.id + " , 姓名：" + data.name);
					});
				});

public abstract class BaseServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 解决post请求中文乱码问题
        // 一定要在获取请求参数之前调用才有效
        req.setCharacterEncoding("UTF-8");
        // 解决响应中文乱码
        resp.setContentType("text/html; charset=UTF-8");
        String action = req.getParameter("action");
        try {
            // 获取action业务鉴别字符串，获取相应的业务 方法反射对象
            Method method = this.getClass().getDeclaredMethod(action, HttpServletRequest.class, HttpServletResponse.class);
//            System.out.println(method);
            // 调用目标业务 方法
            method.invoke(this, req, resp);
        } catch (Exception e) {
            e.printStackTrace();
            throw new RuntimeException(e);// 把异常抛给Filter过滤器
        }
    }

}


public class AjaxServlet  extends BaseServlet {
    protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("  jQueryAjax == 方法调用了");
        Person2 person = new Person2(1, "B哥1");
        // json格式的字符串
        Gson gson = new Gson();
        String s = gson.toJson(person);
        resp.getWriter().write(s);
    }


    protected void jQueryGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("  jQueryGet  == 方法调用了");
        Person2 person = new Person2(2, "B哥2");
        // json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }



    protected void jQueryPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("     jQueryPost  == 方法调用了");
        Person2 person = new Person2(3, "B哥3");
        // json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);
        resp.getWriter().write(personJsonString);
    }



    protected void  jQueryGetJSON(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println(" jQueryGetJSON  == 方法调用了");
        Person2 person = new Person2(4, "B哥4");
        // json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);
        resp.getWriter().write(personJsonString);
    }

    protected void jQuerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("  jQuerySerialize   == 方法调用了");

        System.out.println("用户名：" + req.getParameter("username"));
        System.out.println("密码：" + req.getParameter("password"));

        Person2 person = new Person2(5, "B哥5");
        // json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);

        resp.getWriter().write(personJsonString);
    }
}