《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 条评论
登录 后参与评论

相关文章

来自专栏非典型技术宅

iOS多控制器之UINavigationController&UITableBarController1. 多控制器2. UINavigationController3. UITableBarCont

1204
来自专栏林德熙的博客

win10 uwp 显示SVG win2d 使用 svg

这些图片在http://www.zcool.com.cn/下载,不知道是不是不能直接用

581
来自专栏Android自学

android webview加载html图片自适应手机屏幕大小&点击查看大图

我们在开发中,显示信息详情时,一般后台会给出html文本,在android端一般采用webview控件来展示,但是后台给出的html文本一般是给电脑端用的,没有...

791
来自专栏前端知识分享

第208天:jQuery框架封装(一)

1.1冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象或者body)的顺序触发。

874
来自专栏一个爱瞎折腾的程序猿

js实用方法记录-js动态加载css、js脚本文件

方法测试:openApp('ios页面','**.apk','metools://home');

712
来自专栏phodal

如何在 React Native 实现类微信小程序平台:WebView 调用原生组件

在《我们是如何将 Cordova 应用嵌入到 React Native 中》 一文中,我们简单地介绍了『React Native 重写 Cordova 插件:复...

37110
来自专栏增长技术

iOS页面切换的几种方式

4.UINavigationController实现多层画面跳转,在导航控制器中,载入有层级关系的界面

761
来自专栏我和未来有约会

Blend基础-布局控件

布局 什么是布局? Panels控件(其实就是容器控件) 对内部的子控件提供了自动布局功能 可以在容器控件内继续添加容器控件(一个复杂的界面往往是多种容器控件...

1806
来自专栏青玉伏案

iOS开发之WebView

  做iOS的应用也有一段时间了,在之前的demo中一直没有机会用到WebView,今天就查缺补漏一下,使用一下WebView。最早接触WebView是在And...

2019
来自专栏技术之路

servlet乱码问题总结

在学习时servlet乱码问题还是挺严重的,总结一下有三种情况  1.新建HTML页面后浏览出现乱码 2.以post形式请求时出现乱码 3.以get形式请求时出...

1766

扫码关注云+社区