一、概念

什么是Ajax?
AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

ajax 是一种浏览器异步发起请求。 局部更新页面的技术。

异步请求：
在这里插入图片描述
局部更新：

浏览器地址栏不发生变化，只有一个节点发生变化。
在这里插入图片描述

二、javaScript原生Ajax请求

创建XMLHttpRequest对象
调用open方法设置请求参数
调用send方法发送请求
在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。

html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js">
    </script>
    <script type="text/javascript">
        window.onload = function (ev) {
     
     
            document.getElementById("btn").onclick = function () {
     
     
                alert("开始操作");
                //1.创建XMLHttpRequest对象
                var xhr= new XMLHttpRequest();
                //2. 调用open方法设置请求参数(true异步)
                xhr.open("GET","http://localhost:8080/servletStudy/ajaxServlet?action=doGet",true);
                //4. 在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。
                xhr.onreadystatechange = function () {
     
     
                    if(xhr.readyState==4&&xhr.status==200){
     
     
                       document.getElementById("text").innerText=xhr.responseText;
                    }
                }
                //3. 调用send方法发送请求
                xhr.send();
            }
        }

    </script>
</head>
<body>
    <button id="btn">发送Ajax请求</button><br/>
    <p id="text"></p>
</body>
</html>

AjaxServlet程序

public class AjaxServlet extends HttpServlet {
    
    
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
       resp.setContentType("text/html;charset=utf-8");
        System.out.println("接收到Ajax请求");
        resp.getWriter().write("对象转变为JSON字符串");
    }
}

配置web.xml

    <servlet>
        <servlet-name>ajaxServlet</servlet-name>
        <servlet-class>com.study.service.AjaxServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>ajaxServlet</servlet-name>
        <url-pattern>/ajaxServlet</url-pattern>
    </servlet-mapping>

三、jQuery的Ajax请求

在这里插入图片描述

$.ajax()
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js">
    </script>
    <script type="text/javascript">
        $(function () {
     
     
            $("#btn").click(function () {
     
     
                $.ajax({
     
     
                    url:"ajaxServlet",
                    type:"GET",
                    error:function(){
     
     
                        alert("请求失败");
                    },
                    success:function(data) {
     
     
                        alert(data);
                    },
                    dataType:"text",
                    data:{
     
     
                        a:12,
                        b:"123"
                    }
                });
            });
        });
    </script>
</head>
<body>
<button id="btn">发送Ajax请求</button><br/>
<p id="text"></p>
</body>
</html>

public class AjaxServlet extends HttpServlet {
    
    
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
       resp.setContentType("text/html;charset=utf-8");
        System.out.println("接收到Ajax请求");
        System.out.println(req.getParameter("a")+req.getParameter("b"));
        resp.getWriter().write("对象转变为JSON字符串");
    }
}

在这里插入图片描述

servlet程序没有变化。

在这里插入图片描述

【学习笔记】Ajax

文章目录

一、概念

二、javaScript原生Ajax请求

三、jQuery的Ajax请求

猜你喜欢