《Java从入门到放弃》JSP入门篇:XMLHttpRequest的基本用法

不闲扯,直接开讲。

使用XMLHttpRequest对象,主要分为以下七个步骤:

  1. 创建对象
  2. 设置过期时间
  3. 设置数据格式
  4. 初始化 HTTP 请求
  5. 设置HTTP头请求
  6. 回传数据的处理
  7. 发送 HTTP 请求

对应代码如下所示

<script type="text/javascript">
    var xhr;

    function goAjax() {
	//1.创建对象
	xhr = new XMLHttpRequest();
	if (window.XMLHttpRequest) {
	    xhr = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
	    xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}

	//2.设置过期时间
	xhr.setTimeout = 3000;
	//3.设置数据格式
	xhr.responseType = "text";
	//4.初始化 HTTP 请求参数(未发送)
	xhr.open("POST", "servlet/AjaxLoginServlet", true);
	//5.设置HTTP请求
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	//6.回传数据的处理
	//注册相关事件回调处理函数
	//6.1 回传的数据加载完毕后执行
	xhr.onload = function(e) {
	    //alert(this.readyState + "||" + this.status);
	    if(this.readyState == 4 || this.status == 200) {
		var div = document.getElementById("divContent");
		div.innerHTML = this.responseText;
					
	    }
	};
	//6.2访问出错
	xhr.onerror = function(e) {
	    alert("登录失败!");
	};
	//6.3超时
//	xhr.ontimeout = function(e) {
//	};
	//6.4状态改变
	/* xhr.onreadystatechange = function(e){
    	    if(this.readyState == 4 || this.status == 200) {
    	        alert(this.responseText);
    	    }
	} */
	//7.发送数据
	var username = document.getElementById("username").value;
	var pwd = document.getElementById("password").value;
	xhr.send("username=" + username + "&password=" + pwd);
    }
</script>

HTML页面代码如下:

<body>
    账号:<input type="text" name="username" id="username" /><br />
    密码:<input type="password" name="password" id="password" /><br />
    <input type="button" value="登录" onclick="goAjax();" />
    <div id="divContent" style="width:200px; height: 100px;"></div>
</body>

servlet文件代码如下:

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
	//设置内容格式
	response.setContentType("text/html");
		
	PrintWriter out = response.getWriter();
	//获取url中的用户名和密码
	String username = request.getParameter("username");
	String password = request.getParameter("password");
	//成功输出success 失败输出fail
	if ("haha".equals(username) && "123".equals(password)) {
		out.println("success");
	} else {
		out.println("fail");
	}
	out.flush();
	out.close();
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

go 无锁队列

无锁队列适用场景:      两个线程之间的交互数据, 一个线程生产数据, 另外一个线程消费数据,效率高 缺点:需要使用固定分配的空间,不能动态增加/减少长度...

47810
来自专栏前端儿

电脑使用--快捷键等

         ps:  windows 键就是 键盘上那个 微软图标画圈的 .. 

1052
来自专栏快乐八哥

Windows8异步编程的注意事项

Windows8 App开发中涉及到下载数据和上传数据。针对小的数据使用的是WinJS.xhr(),而针对大的文件,不方便使用post方式直接上传的文件都使用B...

20010
来自专栏从零开始学 Web 前端

从零开始学 Web 之 Ajax(四)接口文档,验证用户名唯一性案例

当前端界面需要从服务器获取数据的时候,其实就是眼访问一个 URL 地址,指定特定的参数即可。这个 URL 对应的是 php 或者 jsp 等都是服务器开发人员已...

1363
来自专栏CRPER折腾记

Vue 折腾记 - (10) 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示)

不推荐完全copy过去,可以看看我是如何针对我这边业务; 做的一个axios的封装及实现的思路

2692
来自专栏LIN_ZONE

iframe 加载外部资源,显示隐藏loading,onload失效

在项目中使用iframe 来加载外部资源,需要在iframe请求外部资源的时候,需要显示一个loading,在加载完成后,将这个loading隐藏掉,刚开始看到...

702
来自专栏iKcamp

iKcamp出品|微信小程序|工具安装+目录说明|基于最新版1.0开发者工具初中级教程分享

第一章:小程序初级入门教程 工具安装 在上一节第 8 步所展示的页面中,可以点击 开发者工具 直接进入到下载页面,也可以直接访问 官网下载地址。然后根据自己的设...

2189
来自专栏不想当开发的产品不是好测试

jenkins 多选框

背景 jenkins自带的参数化不支持多选框,不过有插件支持:Extended Choice Parameter Plug-In 插件地址: https://p...

3729
来自专栏二次元

笔记:Sublime Text3配置

安装插件管理器: 通过快捷键 ctrl+` 或者 View > Show Console 菜单打开控制台

760
来自专栏我的博客

FCK编辑器使用详解(PHP版本)

前些日子(很久了),胡乱捣鼓了一番FCK编辑器的使用,结果还是没有捣鼓明白个所以然(今天又想起来fck的强大,我以前见到的只是它的冰山一角) 今天是按照一下过程...

3206

扫码关注云+社区