梦入琼楼寒有月，行过石树冻无烟

Ajax Server Response

2022-04-21

Ajax Response 简介

Ajax向服务器发送请求后，如需要获得服务器的响应，可以使用XMLHttpRequest对象的responseText或reponseXML两个属性：

例子

1
2
3
4
5
xmlhttprequest_.onreadystatechange = function() {
    if (xmlhttpquest_.readyState == 4 && xmlhttprequest.status == 200 {
        document.getElementById("myResponse").innerHTML = xmlhttprequest_.responseText;
        }
}

方法对象

ID DA FA
responseText 获取字符串形式的响应数据 String
responseXML 获得XML形式的相应数据 XML

实现 Ajax Response

Ajax Response Text

NewFile.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
	function test() {
		var xmlhttprequest;
		if (window.XMLHttpRequest) {
			// 现代浏览器内核
			xmlhttprequest = new XMLHttpRequest();
		} else {
			// 旧的浏览器内核
			xmlhttprequest = new ActoveXObject("Microsoft.XMLHTTP");
		}
		xmlhttprequest.onreadystatechange = function() {
			if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
				document.getElementById("data").innerHTML = xmlhttprequest.responseText;
			}
		}
		xmlhttprequest.open("GET","hello.txt",true);
		xmlhttprequest.send();
	}
</script>
</body>

<div id="data"><h2>Ajax response</h2></div>
<a href="javascript:test()">XMLHttpResponse</a>
</html>
hello.txt
1
OK,Hello!

Ajax Response XML

NewFile.jsp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
	function test() {
		var xmlhttprequest;
		var t,x,i;
		if (window.XMLHttpRequest) {
			xmlhttprequest = new XMLHttpRequest();
			} else {
				xmlhttprequest = new ActiveXObject("Microsoft.Xmlhttprequest");
			}
		xmlhttprequest.onreadystatechange = function() {
			if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
				xmlDoc = xmlhttprequest.responseXML;
				t="";
				x=xmlDoc.getElementsByTagName("title");
				for (i=0;i<x.length;i++) {
					t=t + x[i].childNodes[0].nodeValue + "<br/>";
				}
				document.getElementById("data").innerHTML = t;
			}
		}
		xmlhttprequest.open("GET","hello.xml",true);
		xmlhttprequest.send();
		}
</script>
</body>

<div id="data"><h2>Ajax response XML</h2></div>
<a href="javascript:test()">XMLHttpResponse</a>
</html>
````
#### hello.xml
```xml
<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
<book category="children">
<title lang="cn">你好世界</title>
</book>
<book category="children">
<title lang="cn">你好Ajax</title>
</book>
</bookstore>

Onreadystatechange

简介

onreadystatechange事件中，可以规定服务器响应已做好处理准备阶段时所执行的任务，而一般主要状态可通过readyState、status来分别设置就绪状态、状态：

ID DA FA
readyState 就绪状态 onreadystatechange
status 状态 onreadystatechange

当就绪状态（readyState等于4），状态（状态status等于200）时，则表示响应已经就绪：

onreadystatechange 实现

1
2
3
4
5
6
7
<script type="text/javascript">
	xmlhttprequest.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 && xmlhttprequest.status == 200) {
			document.getElementById('response').immerHTML = xmlhttprequest.responseText;
		}	
	}
</script>
⬅️ Go back