首页 > 其他分享> > AJAX_概念和AJAX原生js方式

AJAX_概念和AJAX原生js方式

2022-08-21 10:30:08 作者：互联网

AJAX_概念

概念：ASynchronous JavaScript And XML 异步的JavaScript 和XML

异步和同步：客户端和服务器端相互通信的基础上
- 客户端必须等待服务器端的响应在等待期间客户端不能做其他操作
- 客户端不需要等待服务器端的响应在服务器处理请求的过程中客户端可以进行其他的操作

Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

通过后台与服务器进行少量数据交互 Ajax可以使网页实现异步更新这意味着可以在不重新加载整个网页的情况下对网页的某部分进行更新

传统的网页（不使用Ajax）如果需要更新内容必须重载整个网页页面

AJAX原生js方式

AJAX代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生js实现AJAX</title>
    <script>
        //定义方法
        function fun() {
            //发送异步请求
            //1.创建核心对象
            var xmlhttp;
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            } else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2.建立连接
            /*
                参数：
                    1.请求方式：GET、POST
                        *get方式，请求参数在URL后边拼接 send方法为空参
                        *post方式 请求参数在send方法中定义
                    2.请求的URL:
                    3.同步或异步请求：true(异步)或false(同步)
             */
            xmlhttp.open("GET", "AjAXServlet?username=tom", true);
            //发送请求
            xmlhttp.send();
            //4.接受并处理来自服务器的响应结果
            //获取方式 xmlhttp.responseText
            //什么时候获取 当服务器响应成功后再获取
            xmlhttp.onreadystatechange = function () {
                //判断readyState就绪状态是否为4 判断status响应状态码是否为200
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    //获取服务器的响应结果
                    var responseText = xmlhttp.responseText;
                    alert(responseText);
                }
            }
        }
    </script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
</body>
</html>

java代码

package com.bai.Servlet;

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;
@WebServlet("/AjAXServlet")
public class AjAXServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取请求参数
        String username = req.getParameter("username");
        //处理业务逻辑

        //打印username
        System.out.println(username);
        //响应
        resp.getWriter().write("hello:"+username);
    }

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

运行结果

标签：原生,username,xmlhttp,异步,js,AJAX,网页,import
来源： https://www.cnblogs.com/aimz01/p/16609345.html