AJAX-异步的 JavaScript 和 XML

最新推荐文章于 2024-03-30 21:47:19 发布

卷柏@*

最新推荐文章于 2024-03-30 21:47:19 发布

阅读量195

点赞数

分类专栏：笔记文章标签： javascript ajax xml

本文链接：https://blog.csdn.net/weixin_53748496/article/details/127600758

版权

笔记专栏收录该内容

32 篇文章 7 订阅

订阅专栏

一、什么是AJAX?

AJAX (Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML

二、AJAX 作用有以下两方面：

1、与服务器进行数据交换：通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器
2、添加数据或者登录刷新页面时候，已经填写的数据不会消失

三、AJAX的优点：

1、可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。
2、Ajax 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

四、使用AJAX的步骤：

1.创建ajax对象
2.注册回调函数
3.开启通道
4.发送请求

使用AJAX前：

前端登录页面： login.jsp

<%--
  Created by IntelliJ IDEA.
  User: 30868
  Date: 2022/10/30
  Time: 15:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<form action="LoginServlet" method="get">
    用户名：<input type="text" name="name"><br>
    密码：<input type="password" name="password"><br>
    <input type="submit" value="登录">
</form>
</body>
</html>

后端页面：LoginServlet

package com.hsd.controller;

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("/LoginServlet")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String password = req.getParameter("password");
    }
}

浏览器展示页面：在网址栏输入 login.jsp如下：

输入用户名：admin 密码：123456后，点击登录。网址栏如下：

此时，页面进行了刷新，由login.jsp页面-->LoginServlet页面。并且用户名和密码都在网址栏进行了显示，不安全。

使用AJAX后：

前端登录页面：ajax2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
用户名：<input type="text" name="username" id="username"><br>
密码：<input type="password" name="password" id="password"><br>
<input type="button" value="hello ajax" id="but">

<div id="div"></div>
<script type="text/javascript">
    /*点击事件*/
    /*ajax分为4步：
          1.创建Ajax对象
        * 2.注册回调函数
        * 3.开启通道
        * 4.发送请求*/
    //1.
    document.getElementById("but").onclick=function () {

        var xml = new XMLHttpRequest();
        //2.
        xml.onreadystatechange=function () {
            //innerHTML：可以将后面的内容当成一段HTML代码解析（执行）：1234567（红色的）
            //document.getElementById("div").innerHTML=xml.responseText
            //innerText将后面的内容当成文本输出：<font color='red'>1234567</font>
            document.getElementById("div").innerText=xml.responseText

        }
        //获取有户名和密码的id，进行传值
        var username=document.getElementById("username").value;
        var password=document.getElementById("password").value;
        //3.
        xml.open("get","AjaxServlet2?username="+username+"&password="+password,true);
        //4.
        xml.send()
    }

</script>
</body>

</html>

<div id="div">:ajax接收到的响应的数据，在div中进行输出（渲染）,即：将类中的数据输出到div所在的页面位置。

open(method,url):里面有两个值：开启通道（浏览器和服务器建立连接），不会发送请求。

method:请求方式（get、post...）

url:请求的地址:格式为：路径？变量名1=值1&变量名2=值2。如下：

innerHTML：可以将后面的内容当成一段HTML代码解析（执行）

innerText：将后面的内容当成文本输出

注册回调函数中：

1.这个函数在XMLHttpRequest对象的readystate状态值发生改变时才会被调用

2.这里面的回调函数会调用很多次：

0-->1被调用一次

1-->2被调用一次

2-->3被调用一次

3-->4被调用一次

3.console.log(xml.readyState) ：

当XMLHttpRequest对象的readystate状态值为4时，就是响应的结果 ,响应结束之后就会有个状态码 :

(1)200：正常的

(2)404：路径错误

(3)405：请求方法不一致

if(xml.readyState==4) { console.log("响应结束") }

status:显示http的状态码 :

if(xml.status==404){ alert("资源路径不存在") }

else if(xml.status==405){ alert("请求的方法不一致") }

else if(xml.status==200) { alert("响应成功") }

通过XMLHttpRequest对象的responseText属性获取响应的数据。

后端页面：AjaxServlet2

package com.hsd.controller;

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;
import java.io.PrintWriter;

@WebServlet("/AjaxServlet2")
public class AjaxServlet2 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=UTF-8");
//        打印流
        PrintWriter writer = resp.getWriter();
//        服务器和之前的代码是一样的
//        只不过这个writer在响应的时候，客户端(页面)XMLHttpRequest会收到响应的信息
//        writer.println("<font color = 'red'>1234567</font>");
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        writer.println("username：" + username + ",password：" + password);
    }
}