AJAX

最新推荐文章于 2022-06-19 13:50:53 发布

xue_yun_xiang

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量82

点赞数

分类专栏： JavaWEB 文章标签： java ajax

本文链接：https://blog.csdn.net/xue_yun_xiang/article/details/116398260

版权

JavaWEB 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

一、概述

AJAX = Asynchronous异步 JavaScript and XML。四个单词首字母
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过异步加载的形式请求数据，局部刷新界面
异步请求，局部刷新

二、get请求

GetEmpByIdServlet.java

package com.qfedu.servlet;

import com.alibaba.fastjson.JSON;
import com.qfedu.entity.Emp;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;


/**
 * @author xue_yun_xiang
 * @create 2021-05-04-12:55
 */
@WebServlet("/GetEmpByIdServlet")
public class GetEmpByIdServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //标记返回json
        resp.setContentType("text/json;charset=utf-8");

        String idStr = req.getParameter("id");


        Emp emp = new Emp(1,"xiaoming",12,"F",3000);


        // 返回前端json 数据   ajax 接收数据
        resp.getWriter().write(JSON.toJSONString(emp));

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

get.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
id:<input type="number" name="id" id="id">
<button onclick="getEmpById()">获取emp</button>

<p id="content"></p>
<script>

    //根据id查询emp
    function getEmpById() {


        // 创建一个链接/客户端   作用：发起http请求
        var  xMLHttpRequest  =   new XMLHttpRequest();

        // 配置 xMLHttpRequest 回调函数
        //只要xMLHttpRequest 的状态（发送数据，接收数据，创建连接） 发生变化都会 回调
        //onreadystatechange监听状态
        xMLHttpRequest.onreadystatechange = function(){
            //readyState 转态
            // 0 请求未初始化
            // 1 请求建立链接
            // 2 请求已接受
            // 3 请求处理中
            // 4 请求处理完成  后端响应完成
            // xmlhttp.status  200 请求成功  404找不到界面
            if (xMLHttpRequest.readyState==4 && xMLHttpRequest.status==200 ){

                //获取后端响应数据
                alert(xMLHttpRequest.responseText);
                //将获取的数据局部刷新 到 前端界面
                document.getElementById("content").innerText=xMLHttpRequest.responseText;
            }

        }

        //获取id 为 id的输入值
        var id = document.getElementById("id").valueOf().value;
        // 第一个参数 请求方式
        // 第二个参数 请求路径
        // 第三个参数是否异步 true
        xMLHttpRequest.open("get","/GetEmpByIdServlet?id=" + id,true);

        // 发起请求
        xMLHttpRequest.send();
    }
</script>
</body>
</html>

三、post请求

GetEmpByIdServlet.java

package com.qfedu.servlet;

import com.alibaba.fastjson.JSON;
import com.qfedu.entity.Emp;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;


/**
 * @author xue_yun_xiang
 * @create 2021-05-04-12:55
 */
@WebServlet("/GetEmpByIdServlet")
public class GetEmpByIdServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //标记返回json
        resp.setContentType("text/json;charset=utf-8");

        String idStr = req.getParameter("id");


        Emp emp = new Emp(1,"xiaoming",12,"F",3000);


        // 返回前端json 数据   ajax 接收数据
        resp.getWriter().write(JSON.toJSONString(emp));

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

post.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
id:<input type="number" name="id" id="id">
<button onclick="getEmpById()">获取emp</button>

<p id="content"></p>
<script>

    //根据id查询emp
    function getEmpById() {


        // 创建一个链接/客户端   作用：发起http请求
        var  xMLHttpRequest  =   new XMLHttpRequest();

        // 配置 xMLHttpRequest 回调函数
        //只要xMLHttpRequest 的状态（发送数据，接收数据，创建连接） 发生变化都会 回调
        //onreadystatechange监听状态
        xMLHttpRequest.onreadystatechange = function(){
            //readyState 转态
            // 0 请求未初始化
            // 1 请求建立链接
            // 2 请求已接受
            // 3 请求处理中
            // 4 请求处理完成  后端响应完成
            // xmlhttp.status  200 请求成功  404找不到界面
            if (xMLHttpRequest.readyState==4 && xMLHttpRequest.status==200 ){

                //获取后端响应数据
                alert(xMLHttpRequest.responseText);
                //将获取的数据局部刷新 到 前端界面
                document.getElementById("content").innerText=xMLHttpRequest.responseText;
            }

        }

        //获取id 为 id的输入值
        var id = document.getElementById("id").valueOf().value;
        // 第一个参数 请求方式
        // 第二个参数 请求路径
        // 第三个参数是否异步 true

        //第一种：携带数据是在url中
       // xMLHttpRequest.open("post","/GetEmpByIdServlet?id=" + id,true);

        // 发起请求
        //xMLHttpRequest.send();

        xMLHttpRequest.open('post','/GetEmpByIdServlet',true);


        //注意：设置格式要放在打开链接的下面
        //设置xML的请求方式为post，将数据放到body中，必须设置header
        //对body进行编码
        xMLHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        //第二种：安全
        //ajax以body形式发送请求
        xMLHttpRequest.send('id=' + id);
    }
</script>
</body>
</html>