【JavaWeb】AJAX

AJAX请求

---

1 AJAX入门

• AJAX：Asynchronous Javascript And Xml（异步Javascript和Xml），是浏览器通过js异步发送请求，局部更新页面的技术

• 原生JS发送异步请求

  /**
   * javascript原生异步请求
   */
  function () {
      const request = new XMLHttpRequest();
      // 参数：请求方法, 请求地址[, 是否异步(true/false)]
      request.open("GET", "http://localhost:8080/15_ajax/ajaxTest?action=getAjax", true);
      // 请求监听（异步操作需要事件监听）（监听readyStatus改变）
      request.onreadystatechange = function () {
          /* readyStats: 0=请求未初始化 1=服务器连接已建立 2=请求已接收 3=请求处理中 4=请求已完成 */
          if (request.readyState === 4 && request.status === 200) {
              console.log("接收的响应数据为：" + request.responseText);
          }
      }
      // 发送请求
      request.send();
  }

---

2 JQuery发送ajax

2.1 $.ajax

function () {
    $.ajax({
        // 请求地址
        url: "http://localhost:8080/15_ajax/ajaxTest",
        // 请求类型'GET'、'POST'
        type: "GET",
        // 请求数据
        data: {
            action: "getAjax"
        },
        // 响应数据类型'text'、'xml'、'json'
        dataType: "text",
        // 请求成功回调函数
        success: function (data) {
            console.log("接收到的数据为：" + data);
        }
    })
}

---

2.2 $.get和$.post

• $.get和$.post使用方法一样

function () {
    // 参数：请求地址[, 数据, 回调方法, 响应数据类型]
    $.get(
        "http://localhost:8080/15_ajax/ajaxTest",
        {
            action: "getAjax"
        },
        function (data) {
            console.log("ajax-get：" + data)
        },
        "text"
    );
}

---

2.3 $.getJson

• $.getJson方法规定了get请求，响应数据类型为json

function () {
    // 参数：请求地址[, 数据, 回调方法]
    $.getJSON(
        "http://localhost:8080/15_ajax/ajaxTest",
        {
            action: "getAjax"
        },
        function (data) {
            console.log("ajax-getJson：" + data)
        }
    );
}

---

2.4 serialize方法

• serialze用于获取表单form中的数据，并格式化为key=vlaue&key=value的形式

表单jquery对象.serialze();