博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaWeb学习-AJAX-2-XMLHttpRequest对象详解
阅读量:4302 次
发布时间:2019-05-27

本文共 2328 字,大约阅读时间需要 7 分钟。

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

 

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

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

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

function getXMLHttpRequest() {	var xmlhttp;	if (window.XMLHttpRequest){		// code for IE7+, Firefox, Chrome, Opera, Safari		   xmlhttp=new XMLHttpRequest();	} else{		// code for IE6, IE5		   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");	}	return xmlhttp;}

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

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="ISO-8859-1"%>
Insert title here

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

 

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

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

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="ISO-8859-1"%>
Insert title here

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

点击确定

本来是由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"%>
Insert title here

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

 

4.获取responseText信息

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

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="ISO-8859-1"%>
Insert title here

再次刷新1.jsp

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

 

 

转载地址:http://qjows.baihongyu.com/

你可能感兴趣的文章
CyUSB.dll的调用经验介绍
查看>>
MFC菜单栏(CMenu)控件
查看>>
Android 中的webview组件显示vue空白的解决方案
查看>>
快速制作数据库设计文档的表格
查看>>
MySQL中异常Packet for query is too large (1117260 > 1048576)的解决方案
查看>>
Linux 中MySQL的安装位置信息
查看>>
DataWhale计算机视觉实践(目标检测)Task01
查看>>
DataWhale计算机视觉实践(目标检测)Task02
查看>>
DataWhale计算机视觉实践(目标检测)Task03
查看>>
DataWhale计算机视觉实践(目标检测)Task04
查看>>
LeetCode 刷题记录26. 删除有序数组中的重复项
查看>>
GlusterFS 3.4.2 安装记录
查看>>
Linux C/C++编程一站式学习中输出菱形
查看>>
glusterfs 3.4.2安装记录(一)
查看>>
Linux C/C++编程一站式学习--以可视化的形式打印直方图
查看>>
Linux C/C++编程一站式学习中选择排序
查看>>
Linux C/C++编程一站式学习中折半查找(如果待查找的元素在数组中有多个则返回第一个)
查看>>
Git分布式版本控制系统笔记
查看>>
Codewars第二天--Complementary DNA
查看>>
Codewars第二天--Disemvowel Trolls
查看>>