关于Ajax异步XMLHttpRequest对象，你该了解这些。

贪吃蛇学院

于 2020-02-15 17:55:49 发布

阅读量288

点赞数 1

分类专栏： java核心技术， java进阶软件编程 - 进阶之美文章标签： mysql java spring

本文链接：https://blog.csdn.net/cyhlili100/article/details/104331708

版权

java核心技术，同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

java进阶

4 篇文章 0 订阅

订阅专栏

软件编程 - 进阶之美

2 篇文章 0 订阅

订阅专栏

标签：变化页面 let javascrip 建立 rac doctype cep test
在这里插入图片描述
示例Ajax：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!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=utf-8">
<title>Test Ajax</title>
</head>
<body>

<div style="text-align: center;">
	<button onclick="loadName()">测试Ajax</button>
</div>

</body>
<script type="text/javascript">
function loadName() {
	var xmlHttp;
	if(window.XMLHttpRequest){
		xmlHttp=new XMLHttpRequest();
	}else{//IE 5,6的支持
		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	//xmlHttp.open("get", "testAjax", true);
	//xmlHttp.open("post", "testAjax", true);
	
	/*
	//get请求
	xmlHttp.open("get", "testAjax?name=Anner&age=24", true);
	xmlHttp.send();
	*/
	//post请求
	xmlHttp.open("post", "testAjax", true);
	xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xmlHttp.send("name=Anner&age=24");
}
</script>
</html>

XMLHttpRequset对象相应服务器

onreadystatechange事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务

当readystate改变时，就会触发onreadystatechange事件

XMLHttpRequest对象的三个重要的属性：

1、onreadystatechange存储函数或函数名，每当readyState属性改变时，就调用该函数

readyState存有XMLHttpRequest的状态，从0到4发生变化

0：请求未初始化

1：服务器连接已经建立

2：请求已接收

3：请求处理中

4：请求已完成，且相应已就绪

status：

200:OK

404:未找到页面

如需获得来自服务器的相应，使用XMLHttpRequest对象的responseText或responseXML属性

responseText获得字符串形式的响应数据

responseXML获得XML形式的响应数据

Ajax返回后台Servlet数据

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!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=utf-8">
<title>Test Ajax</title>
</head>
<body>

<div style="text-align: center;">
	<button onclick="loadName()">测试Ajax</button>
	<input type="text" name="te" id="te">
</div>

</body>
<script type="text/javascript">
function loadName() {
	var xmlHttp;
	if(window.XMLHttpRequest){
		xmlHttp=new XMLHttpRequest();
	}else{//IE 5,6的支持
		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	//xmlHttp.open("get", "testAjax", true);
	//xmlHttp.open("post", "testAjax", true);
	
	/*
	//get请求
	xmlHttp.open("get", "testAjax?name=Anner&age=24", true);
	xmlHttp.send();
	*/
	
	//alert("readyState:"+xmlHttp.readyState+"status状态"+xmlHttp.status);
	xmlHttp.onreadystatechange=function(){
		//alert("readyState:"+xmlHttp.readyState+"status状态"+xmlHttp.status);
		if(xmlHttp.readyState==4 && xmlHttp.status==200){
			//alert(xmlHttp.responseText);
			document.getElementById("te").value=xmlHttp.responseText;
		}
	};
	//post请求
	xmlHttp.open("post", "testAjax", true);
	xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xmlHttp.send("name=Anner&age=24");
	
	
}
</script>
</html>

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
	//req.setCharacterEncoding("utf-8");
	//String name=req.getParameter("name");
	//String age=req.getParameter("age");
	//System.out.println(name+" "+age);
	resp.setContentType("text/html;charset=utf-8");
	PrintWriter out =resp.getWriter();
	out.println("ajax返回");
	out.flush();
	out.close();
}

原文地址：http://www.tofacebook.com/post/17746

本文由tofacebook.com作者上传并发布，百家号仅提供信息发布平台。文章仅代表作者个人观点，不代表百度立场。

贪吃蛇学院

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于Ajax异步XMLHttpRequest对象，你该了解这些。

标签：变化页面 let javascrip 建立 rac doctype cep test示例Ajax：<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3...
复制链接

扫一扫