Ajax学习教程

什么是AJAX

Ajax 是Asynchronous JavaScript And XML（异步的JavaScript 和 XML）。Ajax不是一种新技术，它的特点是：在不重新加载整个页面的情况下，于服务器交换数据并实现页面的局部刷新。

AJAX使用流程

创建XMLHttpRequest对象
向服务器发送ajax请求
处理服务器响应（服务器处理完请求并返回响应数据后，通过JavaScript对响应数据进行后续处理）

AJAX 实例

@WebServlet("/content") //@WebServlet注解相当于web.xml文件
public class IndexServlet extends HttpServlet {
    
    

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
        //设置Content-Type内容类型
        response.setContentType("text/html; charset=UTF-8");
        //浏览器打印输出
        response.getWriter().println("<h1>发送Ajax请求后的响应数据!</h1>");
    }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>

  <div id="divContent">使用Ajax修改文件内容</div>
  <br>
  <button id="btn" type="button">修改</button>

  <script>
      document.getElementById("btn").onclick = function() {
     
     
          /* 1. 创建XmlHttpRequest对象 */
          var xmlhttp;
          if (window.XMLHttpRequest) {
     
     
              //新版浏览器执行的代码
              xmlhttp = new XMLHttpRequest();
          } else {
     
     
              //旧版IE浏览器执行的代码
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }

          /* 2. 向服务器发送ajax请求 */
          //创建http请求
          xmlhttp.open("GET", "/content", true);
          //发送请求到服务器
          xmlhttp.send();

          /* 3. 处理服务器响应 */
          //监听ajax执行过程，捕捉ajax执行状态（这是ajax的核心事件，当ajax的状态发生变化时，就会触发这个时间）
          xmlhttp.onreadystatechange = function(){
     
     
              //请求被成功处理并且响应已被接收时执行
              if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
     
     
                  //获取响应体的文本
                  var responseText = xmlhttp.responseText;
                  //对服务器响应结果进行后续渲染处理
                  document.getElementById("divContent").innerHTML = responseText;
              }
          };
      };
  </script>
</body>
</html>

AJAX 实例解析

创建XMLHttpRequest对象：

XMLHttpRequest对象用于在后台与服务器交换数据。这就是ajax可以在不刷新整个网页的情况下，向服务器获取数据对网页进行局部刷新。

向服务器发送ajax请求：
在这里插入图片描述

获取服务器响应数据：

服务器处理完ajax请求后，返回的响应数据，可以通过XMLHttpRequest对象的 responseText 或responseXML 属性

属性	描述
responseText	获取字符串形式的响应数据
responseXML	获取 XML 形式的响应数据

onreadystatechange事件：

XMLHttpRequest对象有三个重要属性

每当 readyState 改变时，就会触发 onreadystatechange 事件。onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

什么是AJAX

AJAX使用流程

AJAX 实例

AJAX 实例解析

猜你喜欢