JavaWeb学习-AJAX-2-XMLHttpRequest对象详解

梦里梦外; 2021-11-26 10:34 323阅读 0赞

前面一篇介绍了什么是Ajax和XMLHttpRequest对象的一些常用方法和字段的含义，这篇用代码来巩固下常用方法和基本使用。

1.把创建XMLHttpRequest对象代码提出成公共方法

在一个web项目中，应该有很多地方需要用到这个XMLHttpRequest对象，所以我们需要把创建这个对象的代码提取出来，放到一个js文件中，然后每个jsp页面如果需要用到这个对象就像引入这个js文件就可以。

在WebContext下新建一个js文件夹，然后在js文件夹下新建一个myJS.js的文件，代码如下

例如，在1.jsp中，这样去调用这个js去得到XMLHttpRequest对象

部署到tomcat上，访问这个1.jsp，如果能出现弹窗，说明这个抽取出来代码没问题。

2.代码实现创建连接和发送请求

下面开始用XMLHttpRequest对象的方法去创建对象和发送请求，并监听onreadystatechange的值变化。代码如下

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="ISO-8859-1"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/myJS.js"></script>
    <title>Insert title here</title>
    </head>
    <script type="text/javascript">
    	window.onload = function(){
    		var req = getXMLHttpRequest();
    		req.onreadystatechange = function(){
    			alert(req.readyState);
    		}
    		//1. 建立一个连接,默认是异步请求，第三个参数可以不写
    		req.open("get", "${pageContext.request.contextPath}/servlet/servletDemo");
    		//2. 发送请求, get请求直接填写null
    		req.send(null);
    		
    	}
    </script>
    <body>
    
    </body>
    </html>

部署tomcat，运行下，看看是不是有0-4的弹窗出现

![20190723231520870.png][]

点击确定

![20190723231539770.png][]

![20190723231553551.png][]

![20190723231622246.png][]

本来是由0到4，但是我们只看到1-4，因为运行太快，0捕获不到，所以弹窗没出来。

3.判断服务器返回状态码是不是200

因为上面我们get请求发送出去是一个假的servletDemo, 所以我们还应该判断服务器给的结果是不是200，也就是还要看服务端的响应。

原来，当监听readyState等于4的时候，也就是请求处理完了一切OK，我们来判断服务器端的状态码是不是200.

这里我们补上一个真的/servlet/servletDemo请求地址，在src包新建一个包，然后新建一个servlet，代码如下

package com.anthony.servlet;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    public class ServletDemo extends HttpServlet {
    	
    	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		PrintWriter out = response.getWriter();
    		out.print("Hello Servlet!");
    	}
    
    	
    	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		doGet(request, response);
    	}
    
    }

这个时候1.jsp代码修改如下

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="ISO-8859-1"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/myJS.js"></script>
    <title>Insert title here</title>
    </head>
    <script type="text/javascript">
    	window.onload = function(){
    		//1. 获取XMLHttpRequest对象
    		var req = getXMLHttpRequest();
    		// 4. 处理响应结果
    		req.onreadystatechange = function(){
    			//alert(req.readyState);
    			if(req.readyState == 4){
    				alert(req.status);//查看服务器响应状态
    			}
    		}
    		//2. 建立一个连接,默认是异步请求，第三个参数可以不写
    		req.open("get", "${pageContext.request.contextPath}/servlet/servletDemo");
    		//3. 发送请求, get请求直接填写null
    		req.send(null);
    		
    	}
    </script>
    <body>
    
    </body>
    </html>

重启tomcat服务，刷新1.jsp页面，如果弹窗中出现200状态码，说明servletDemoe没问题

![20190723231826882.png][]

4.获取responseText信息

XMLHttpRequest对象还要一个字段用来获取响应的文本信息，就是responseText，这个值就是我们在ServletDemo.java中输出的”Hello Servlet”,下面用代码来测试下

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="ISO-8859-1"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/myJS.js"></script>
    <title>Insert title here</title>
    </head>
    <script type="text/javascript">
    	window.onload = function(){
    		//1. 获取XMLHttpRequest对象
    		var req = getXMLHttpRequest();
    		// 4. 处理响应结果
    		req.onreadystatechange = function(){
    			//alert(req.readyState);
    			if(req.readyState == 4){
    				//alert(req.status);//查看服务器响应状态
    				if(req.status == 200){//服务器响应一切正常
    					alert(req.responseText);
    				}
    			}
    		}
    		//2. 建立一个连接,默认是异步请求，第三个参数可以不写
    		req.open("get", "${pageContext.request.contextPath}/servlet/servletDemo");
    		//3. 发送请求, get请求直接填写null
    		req.send(null);
    		
    	}
    </script>
    <body>
    
    </body>
    </html>

再次刷新1.jsp

![20190723231925637.png][]

XMLHttpRequest的使用过程就是上面的四个步骤，都写到注释里了。下一篇继续回到图上商城管理系统来看看前端页面如何使用这个异步请求。

[20190723231520870.png]: /images/20211126/29f55d0ce7304ce69e5a4c0175569c43.png
[20190723231539770.png]: /images/20211126/fd9a7f67698343f2923189e418965212.png
[20190723231553551.png]: /images/20211126/7b758b60d68c456396b7f6e3d9e10b37.png
[20190723231622246.png]: /images/20211126/549d3217c36d4746a00c241436355899.png
[20190723231826882.png]: /images/20211126/4f19c80d18174d50b6fcdc32a7c49260.png
[20190723231925637.png]: /images/20211126/4adeb2c9ada44c4e97103a8ac7c709cf.png