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

相关文章

扫码关注云+社区