AJAX

什么是AJAX请求

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML） ， 是指一种创建交互式网页应用的网页开发技术。

ajax 是一种浏览器通过 js 异步发起请求， 局部更新页面的技术。

Ajax 请求的局部更新， 浏览器地址栏不会发生变化

局部更新不会舍弃原来页面的内容

原生AJAX请求的示例：

<script type="text/javascript">
    // 在这里使用javaScript语言发起Ajax请求，访问服务器AjaxServlet中javaScriptAjax
    function ajaxRequest() {
    // 				1、我们首先要创建XMLHttpRequest 
    var xmlhttprequest = new XMLHttpRequest();
    // 				2、调用open方法设置请求参数
    xmlhttprequest.open("GET","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true);
    // 				4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
    xmlhttprequest.onreadystatechange = function(){
        if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
            alert("收到服务器返回的数据：" + xmlhttprequest.responseText);
            var jsonObj = JSON.parse(xmlhttprequest.responseText);
            // 把响应的数据显示在页面上
            document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + " , 姓名：" + jsonObj.name;
        }
    }
    // 				3、调用send方法发送请求
    xmlhttprequest.send();
}

protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    System.out.println("Ajax请求过来了");
    Person person = new Person(1, "国哥");
    try {
        Thread.sleep(3000);
    } catch (InterruptedException e) {
        e.printStackTrace();
    }
    // json格式的字符串
    Gson gson = new Gson();
    String personJsonString = gson.toJson(person);

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

jQuery中的AJAX请求

ajax请求

// ajax请求
$("#ajaxBtn").click(function(){
    $.ajax({
        url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
        // data:"action=jQueryAjax",
        data:{action:"jQueryAjax"},
        type:"GET",
        success:function (data) {
            // alert("服务器返回的数据是：" + data);
            // var jsonObj = JSON.parse(data);
            $("#msg").html(" ajax 编号：" + data.id + " , 姓名：" + data.name);
        },
        dataType : "json"
    });
});

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

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

ajax–get请求

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

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

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

ajax–post请求

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

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

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

ajax–getJson请求

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

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

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

jQuerySerialize

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

$("#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);
    });
});

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

    Person person = new Person(1, "国哥");
    // json格式的字符串
    Gson gson = new Gson();
    String personJsonString = gson.toJson(person);

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

赏

Thanks

支付宝

微信