Ajax笔记，异步、局部刷新

目录

 

什么是AJAX请求？

7. 用JS语言发起AJAX请求

AJAX请求的特点

JQuery中的AJAX请求

jQuery的serialize方法

---

1. 什么是AJAX请求？

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

2. 用JS语言发起AJAX请求

   1. 四步：

      1. 我们首先要创建XMLHttpRequest

      2. 调用open方法设置请求参数

      3. 调用send方法发送请求

      4. 在send方法前绑定onreadystatechange事件，处理请求完成后的操作。

<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) {
            // 将json字符串转换为json对象
            var jsonObj = JSON.parse(xmlhttprequest.responseText);

            // 把响应的数据响应在页面上
            // document.getElementById("div01").innerHTML = xmlhttprequest.responseText;
            document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + "， 姓名：" + jsonObj.name;
         }
      }

      // 3、调用send方法发送请求
      xmlhttprequest.send();
   }
</script>

 

public class AjaxServlet extends BaseServlet {
    protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("AJAX请求过来啦");
        Person person = new Person(1, "凌晨3点整");
        // 把Person对象转换为json字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);
        // 响应：把json字符串返回给客户端
        resp.getWriter().write(personJsonString);
    }
}

1. AJAX请求的特点

   1. AJAX请求是局部更新，浏览器地址栏不会发送变化

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

2. JQuery中的AJAX请求

   1. $.ajax方法

      1. 作用：

         1. ajax() 方法通过 HTTP 请求加载远程数据

      2. 常用参数：https://www.w3school.com.cn/jquery/ajax_ajax.asp

         1. url 表示请求的地址

         2. type 表示请求的类型（GET或POST）

         3. data 表示发送给服务器的数据

            1. 数据有两种格式：下面的第二种会自动转换为第一种

               1. data : "name=value&&name=value"

               2. data : {key : value, key : value}

         4. success 表示响应成功时，响应的回调函数

         5. dataType 表示响应的数据类型（期待服务器返回的数据的类型）（常用的数据类型有：text【纯文本】、xml【xml数据】、json【json对象】）

   2. $.get方法和$.post方法

      1. 作用：

         1. 这两个是在客户端和服务器端进行请求-响应的常用方法

         2. $.get： 从指定的资源请求数据。GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

         3. $.post： 向指定的资源提交要处理的数据。POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

      2. 参数：

         1. url 请求的url地址

         2. data 发送的数据

         3. callback 成功的回调函数

         4. type 返回的数据类型

   3. $.getJSON方法

      1. 作用：

         1. 通过 HTTP GET 请求载入 JSON 数据。

         2. 要获得一个json文件的内容，就可以使用$.getJSON()方法，这个方法会在取得相应文件后对文件进行处理，并将处理得到的JavaScript对象提供给代码

      2. 参数

         1. url 请求的url地址

         2. data 发送的数据

         3. callback 返回的数据类型

   4. 代码展示

<script type="text/javascript">
   $(function(){
      // ajax请求
      $("#ajaxBtn").click(function(){
         $.ajax({
            url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
            // data:"action=jQueryAjax", // 数据形式1
            data:{action:"jQueryAjax"},    // 数据形式2
            type:"GET",
            dataType : "json",
            success:function (data) {
               // alert("服务器返回的数据是：" + data);
               // var jsonObj = JSON.parse(data);
               $("#msg").html(" ajax 编号：" + data.id + " , 姓名：" + data.name);
            }
         });
      });
----------------------------------------------------------------------------------------------------
      // 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");
      });
----------------------------------------------------------------------------------------------------
      // ajax--post请求
      $("#postBtn").click(function(){
         // post请求
         $.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",
             function (data) {
            $("#msg").html(" post 编号：" + data.id + " , 姓名：" + data.name);
         },"json");
      });
----------------------------------------------------------------------------------------------------
      // 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);
         });
      });
   });
</script>

1. jQuery的serialize方法

   1. 作用：

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

   2. 代码展示

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