什么是ajax

什么是ajax 有什么作用(2)

时间：2024-01-22 16:24:00 来源：IT袋作者：马勇

导读：什么是ajax，status 200: OK 403: Forbidden 404: Page not found statusText 返回状态文本（例如 OK 或 Not Found） 1.创建AjaxServlet import javax.servlet.*;import javax.servlet.http.*;import javax.servlet

什么是ajax

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);
    }
}

编写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);
    }
}