简单了解AJAX

发布时间：2024年01月21日

文章目录

1、什么是AJAX

概念：AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML

AJAX作用：

  • 与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据
  • 后台发送：浏览器的请求是后台js发送给服务器的，js会创建单独的线程发送异步请求，这个线程不会影响浏览器的线程运行。
  • 局部刷新：浏览器接收到结果以后进行页面局部刷新

没学习AJAX之前发送请求和获取响应的方式:

image-20221106155023762

  • 浏览器发送HTTP返回的是一个完整的网页,浏览器会显示这个网页,
  • 浏览器会等待服务器的响应(同步请求)

学习AJAX之后

image-20221106155200255

  • AJAX返回的是部分数据,浏览器内容不会变化
  • 后台发送,不影响浏览器的操作(异步请求)

使用了AJAX和服务器进行通信，就可以使用 HTML+AJAX来替换JSP页面了举例：

  1. 使用HTTP获取一个完整的网页

image-20221106155358377

  1. 登录的时候输入用户名，失去焦点的时候，就会使用AJAX发送一个异步请求到后台，然后返回用户存在与否的结果

image-20240121173539302

2、AJAX快速入门

参考网址:https://www.w3school.com.cn/

步骤：

  1. 编写AjaxServlet，并使用response输出字符串

  2. 创建 XMLHttpRequest 对象：用于和服务器交换数据

 let xmlhttp = new XMLHttpRequest()
  1. 向服务器发送请求
xmlhttp.open("GET",“url");
xmlhttp.send();//发送请求
  1. 获取服务器响应数据
xmlHttp.onreadystatechange=function (){
    if(xmlHttp.readyState==4 && xmlHttp.status=200){
        alert(xmlHttp.responseText);
    }
}

代码实现：

属性描述
onreadystatechange定义了当 readyState 属性发生改变时所调用的函数。
readyState保存了 XMLHttpRequest 的状态。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 正在处理请求
4: 请求已完成且响应已就绪
status200: “OK”
403: “Forbidden”
404: “Page not found”
statusText返回状态文本（例如 “OK” 或 “Not Found”）

1.创建AjaxServlet

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet(value = "/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //get请求
        response.getWriter().write("hello ajax!!!");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //post请求
        doGet(request, response);
    }
}
  1. 编写01_ajaxhello.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax 入门</title>
</head>
<body>

  <script>
    //1.创建核心对象
    let xmlHttp = new XMLHttpRequest();
    //2.设置请求地址，发送请求到服务器
    //2.1设置请求地址和方式
    xmlHttp.open("GET","ajaxServlet")
    //2.2发送请求,因为是get请求所以不需要传递body
    xmlHttp.send();
    //3.处理响应
    xmlHttp.onreadystatechange = function (){
		 //this.readyState == 4 请求已完成且响应已就绪
        //this.status == 200 表示响应成功
      if(this.readyState == 4 && this.status == 200){
        alert(this.responseText);
      }

    }
  </script>

</body>
</html>
3、Axios异步框架
  • Axios 对原生的AJAX进行封装，简化书写
  • 官网：https://www.axios-http.cn
3.1、Axios 快速入门

步骤：

1、引入 axios 的 js 文件

<script src="js/axios-0.18.0.js"></script>

2、使用axios 发送请求，并获取响应结果

  //1.GET请求
  axios({
 method:"GET",
 url:"ajaxServlet"
  }).then(resp=>{
 alert("GET: "+ resp.data);
  });


  axios({
      method: "POST",
      url: "ajaxServlet",
      data:"username=zhangsan&password=333"
  }).then(resp=>{
      alert("POST: "+ resp.data);
  });

完整代码：

  • ajaxServlet
package com.itheima.servlet;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet(value = "/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //get请求
        //获取ajax的post请求
        String username = request.getParameter("username");
        System.out.println("username = " + username);
        String password = request.getParameter("password");
        System.out.println("password = " + password);
        response.getWriter().write("hello ajax!!!");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //post请求
        doGet(request, response);
    }
}
  • 03_axios.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios 入门</title>
  <script src="js/axios-0.18.0.js"></script>
</head>
<body>

<script>
  //1.GET请求
  // axios({
  //   method:"GET",
  //   url:"ajaxServlet"
  // }).then(resp=>{
  //   alert("GET: "+ resp.data);
  // });

  //2.POST请求
  axios({
      method: "POST",
      url: "ajaxServlet",
      data:"username=zhangsan&password=333"
  }).then(resp=>{
      alert("POST: "+ resp.data);
  });

</script>

</body>
</html>

注意：axios会自动将字符串的true和false转换为boolean类型

3.2、Axios 请求方式别名

为了方便起见， Axios 已经为所有支持的请求方法提供了别名。

  1. axios.request(config)
  2. axios.get(url[, config])
  3. axios.delete(url[, config])
  4. axios.head(url[, config])
  5. axios.options(url[, config])
  6. axios.post(url[, data[, config]])
  7. axios.put(url[, data[, config]])
  8. axios.patch(url[, data[, config]])

常用的别名（重点）

方法名作用
get(url)发起GET方式请求
post(url,请求参数)发起POST方式请求

  • 发送GET请求

    axios.get("ajaxServlet")
    .then(resp=>{
    alert("GET: "+ resp.data);
});

  • 发送POST请求

    axios.post("ajaxServlet","username=zhangsan&password=333")
    .then(resp=>{
    alert("POST: "+ resp.data);
})
文章来源:https://blog.csdn.net/weixin_53961667/article/details/135733903
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章