• AJAX 请求

    目录​​​​​​​

    一、什么是 AJAX 请求

    二、原生AJAX请求的示例

    1、XMLHttpRequest 对象

    2、向服务器发送请求

    3、服务器响应

    4、onreadystatechange 事件

     5、案例

    一、什么是 AJAX 请求

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

    AJAX 是一种浏览通过  JS 异步发起请求，局部更新页面的技术。 

    AJAX 请求的局部更新器，浏览器地址栏不会发生变化，局部更新不会舍弃原来页面的内容。

    二、原生AJAX请求的示例

    1、XMLHttpRequest 对象

    XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

    2、向服务器发送请求

    如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

    open(method,url,async)：规定请求的类型、URL 以及是否异步处理请求。

    • method：请求的类型；GET 或 POST
    • url：文件在服务器上的位置
    • async：true（异步）或 false（同步）

    send(string)：将请求发送到服务器

    • string：规定希望发送的数据，仅用于 POST 请求

    Async = true，异步发送请求，需要规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数

    Async=false，将 open() 方法中的第三个参数改为 false

    3、服务器响应

    需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

    responseText：获取字符串形式的响应数据

    可以这样使用：

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    responseXML：获得XML形式的响应数据

    可以这样使用：

    1. xmlDoc=xmlhttp.responseXML;
    2. txt="";
    3. x=xmlDoc.getElementsByTagName("ARTIST");
    4. for (i=0;ilength;i++)
    5.   {
    6.   txt=txt + x[i].childNodes[0].nodeValue + "
      "      ;
    7.   }
    8. document.getElementById("myDiv").innerHTML=txt;

    4、onreadystatechange 事件

    当请求被发送到服务器时，我们需要执行一些基于响应的任务。

    每当 readyState 改变时，就会触发 onreadystatechange 事件。

    readyState 属性存有 XMLHttpRequest 的状态信息。

    下面是 XMLHttpRequest 对象的三个重要的属性：

    属性描述
    onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
    readyState

    存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

    • 0: 请求未初始化
    • 1: 服务器连接已建立
    • 2: 请求已接收
    • 3: 请求处理中
    • 4: 请求已完成，且响应已就绪
    status

    200: "OK"

    404: 未找到页面

     5、案例

    ajax.html，实现的效果是当点击按钮时，div标签里会出现从服务器返回的内容。

    1. html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    2. <html>
    3. 	<head>
    4. 		<meta http-equiv="pragma" content="no-cache" />
    5. 		<meta http-equiv="cache-control" content="no-cache" />
    6. 		<meta http-equiv="Expires" content="0" />
    7. 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    8. 		<title>Insert title heretitle>
    9. 		<script type="text/javascript">
    10. 			function ajaxRequest() {
    11.             //1、我们首先要创建XMLHttpRequest 
    12. 			var xmlHttpRequest=new XMLHttpRequest();
    13.             //2、调用open方法设置请求参数
    14. 			xmlHttpRequest.open("GET","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true);
    15.  
    16.             //3、在send方法前绑定onreadystatechange事件，处理请求完成后的操作
    17. 			xmlHttpRequest.onreadystatechange=function(){
    18. 			    if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
    19. 					var obj=JSON.parse(xmlHttpRequest.responseText);
    20. 					document.getElementById("div01").innerHTML="编号"+obj.id+" 名字"+obj.name;
    21. 				}
    22. 			}
    23.             //4、调用send方法发送请求
    24. 				xmlHttpRequest.send();
    25. 			}
    26. 		script>
    27. 	head>
    28. 	<body>
    29. 		<button onclick="ajaxRequest()">ajax requestbutton>
    30. 		<div id="div01">
    31. 		div>
    32. 	body>
    33. html>

    使用BaseServlet抽取Servlet对象，在请求中携带名称为action，值为方法名的参数动态调用请求方法。

    1. public abstract class BaseServlet extends HttpServlet{
    2.     @Override
    3.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    4.         doPost(req,resp);
    5.     }
    6.  
    7.     @Override
    8.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    9.        //解决请求中文乱码问题
    10.        req.setCharacterEncoding("UTF-8");
    11.        //解决响应中文乱码问题
    12.         resp.setContentType("text/html; charset=UTF-8");
    13.  
    14.         //获取参数action的值
    15.         String action=req.getParameter("action");
    16.  
    17.         try {
    18.             // 匹配指定名称和参数的类的方法，此方法返回的是Method对象
    19.             Method method = this.getClass().getDeclaredMethod(action, HttpServletRequest.class, HttpServletResponse.class);
    20.             //调用目标业务方法，这里的 this 是子类
    21.             method.invoke(this,req,resp);
    22.         } catch (Exception e){
    23.             e.printStackTrace();
    24.         }
    25.     }
    26. }

     Servlet代码

    1. public class AjaxServlet extends BaseServlet{
    2.  
    3.     protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    4.         System.out.println("被调用");
    5.  
    6.         Person person = new Person("qwerty", 12);
    7.  
    8.         //json格式的字符串
    9.         Gson gson = new Gson();
    10.         String personJsonString = gson.toJson(person);
    11.  
    12.         //返回数据
    13.         resp.getWriter().write(personJsonString);
    14.     }
    15. }

    解释：当请求到达AjaxServlet，由于没有 doGet() 方法，会向父类寻找， BaseServlet中有 doGet()方法，调用父类的 doGet()方法，首先获取 action 的值javaScriptAjax，这里的 this是子类，通过反射调用子类名为 javaScriptAjax 的方法。 

    web.xml

    1.     <servlet>
    2.         <servlet-name>AjaxServletservlet-name>
    3.         <servlet-class>com.servlet.AjaxServletservlet-class>
    4.     servlet>
    5.     <servlet-mapping>
    6.         <servlet-name>AjaxServletservlet-name>
    7.         <url-pattern>/ajaxServleturl-pattern>
    8.     servlet-mapping>

  • 相关阅读:
    使用数据分析，识别设备异常
    rmda 虚拟地址物理地址转换
    websocket协议
    字符串String倒序输出的四种方法
    Vert.X CompositeFuture 用法
    CSS基础语法
    接口自动化用例设计总结
    数据结构之二叉树
    什么是架构
    在IEEE754标准规定的64位浮点数格式中，符号位为1位，阶码为11位，尾数为52位。。的题解
  • 原文地址：https://blog.csdn.net/qq_51409098/article/details/126231074