Ajax学习教程

什么是AJAX

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


AJAX使用流程

  1. 创建XMLHttpRequest对象

  2. 向服务器发送ajax请求

  3. 处理服务器响应(服务器处理完请求并返回响应数据后,通过JavaScript对响应数据进行后续处理)

Ajax学习教程_第1张图片


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("

发送Ajax请求后的响应数据!

"
); } }

<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学习教程_第2张图片

获取服务器响应数据:

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

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

onreadystatechange事件:

XMLHttpRequest对象有三个重要属性
Ajax学习教程_第3张图片
每当 readyState 改变时,就会触发 onreadystatechange 事件。onreadystatechange 事件被触发 5 次(0 - 4),对应着 readyState 的每个变化。

你可能感兴趣的:(web,ajax,javascript,java)