Ajax入门

11_bb

已于 2022-10-21 14:57:22 修改

阅读量147

点赞数

分类专栏： javaWeb 文章标签： ajax servlet javascript

于 2022-10-21 14:55:21 首次发布

本文链接：https://blog.csdn.net/bb_111/article/details/127446503

版权

javaWeb 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、概述

概念： AJAX(Asynchronous JavaScript And XML)：异步的JavaScript和XML。
同步异步的区别：

在这里插入图片描述

AJAX作用：
- 与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据。（使用了AJAX和服务器进行通信，就可以使用HTML+AJAX来替换JSP页面）。
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验等。

二、快速入门

1.创建一个servlet类

public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.响应数据
        response.getWriter().write("hello ajax~");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

2.创建一个html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>
    //无需记忆，w3school-->Browser Side -->AJAX
    //1.创建核心对象
    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    //2.发送请求
    xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");
    xhttp.send();

    //3.获取响应
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {

               alert(this.responseText);
        }
    };
</script>

</body>
</html>