ajax
2020-03-16 本文已影响0人
wqjcarnation
https://www.w3school.com.cn/ajax/index.asp
概念
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
特征和优点
1、异步请求
2、局部刷新
请求5步
第一步，创建XMLHttpRequest对象
第二步，注册回调函数
第三步，配置请求信息，open()
第四步，发送请求 send
第五步，创建回调函数
readdystate状态种类
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status:
200: "OK"
404: 未找到页面
响应类型
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
简单实例
功能：完成用户注册时填写用户名后及时验证是否可用（用户名不允许重复）
前台：reg.jsp
body部分：
<form action="user/registerServlet" onsubmit="return checkForm()"
method="post">
用户名：<input type="text" id="username" name="username"
onblur="checkuser()" /><span id="msg"></span><br> 密码：<input
type="text" name="password" /><br> <input type="submit"
value="提交" />
</form>
js
<script>
function checkuser() {
let username = document.getElementById("username").value;
//第一步，创建XMLHttpRequest对象
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//第二步，注册回调函数
xmlhttp.onreadystatechange =state_Change;
//第三步，配置请求信息，open()
xmlhttp.open("GET", "checkUserServlet?username=" + username, true);
//第四步，发送请求 send
xmlhttp.send();
//第五步，创建回调函数
function state_Change() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("msg").innerHTML = xmlhttp.responseText;
}
}
}
</script>
后台checkUserServlet
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username=request.getParameter("username");
System.out.println(username);
//此处应该去查询数据库，验证用户名是否重复
response.getWriter().print("可以使用");
}
响应类型
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
响应xml形式：book.xml
<?xml version="1.0" encoding="utf-8" ?>
<users>
<user>
<username>张三XML</username>
<age>33</age>
</user>
<user>
<username>李四XML</username>
<age>34</age>
</user>
</users>
ajax
ajax-xml.html
<html>
<head>
<script type="text/javascript">
function loadXMLDoc() {
var xmlhttp;
var txt, x, i;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// 获取返回的XML数据主体内容
var result = xmlhttp.responseXML.documentElement;
var users = result.getElementsByTagName("user");
//var users=result.children;
//alert(users);
for (var i = 0; i < users.length; i++) {
// 获取单个user
var user = users[i];
// 获取user的具体信息
var userName = user.getElementsByTagName("username")[0].childNodes[0].nodeValue;
var age = user.getElementsByTagName("age")[0].childNodes[0].nodeValue;
// 添加行
appendRow(userName, age);
}
}
}
xmlhttp.open("GET", "user.xml", true);
xmlhttp.send();
// 添加新行
function appendRow(username, age) {
var ui = document.getElementById("userinfo");
// 添加新行
alert(ui.rows.length);
var newRow = ui.insertRow(ui.rows.length);
// 添加新的单元格
newRow.insertCell(0).innerHTML = username;
newRow.insertCell(1).innerHTML = age;
}
}
</script>
</head>
<body>
<h2>My Book Collection:</h2>
<table id="userinfo">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
</table>
<button type="button" onclick="loadXMLDoc()">获得用户列表</button>
</body>
</html>
返回json
eval()和JSON.parse
https://blog.csdn.net/u013238512/article/details/79259217
user.js
[
{ username: "张三JSON", age: 33 },
{ username: "李四JSON", age: 32 }
]
ajax-json.html
<html>
<head>
<script type="text/javascript">
function loadXMLDoc() {
var xmlhttp;
var txt, x, i;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
result = xmlhttp.responseText;
//alert(result);
// 使用eval函数使返回的字符串变成js对象
var users = eval("(" + result + ")");
for (var i = 0; i < users.length; i++) {
// 获取单个user信息
var user = users[i];
// 此处已经知道user数据的格式，故可以直接使用
appendRow(user.username, user.age);
}
}
}
xmlhttp.open("GET", "user.js", true);
xmlhttp.send();
}
// 添加新行
function appendRow(username, age) {
var ui = document.getElementById("userinfo");
// 添加新行
var newRow = ui.insertRow(ui.rows.length);
// 添加新的单元格
newRow.insertCell(0).innerHTML = username;
newRow.insertCell(1).innerHTML = age;
}
</script>
</head>
<body>
<h2>My Book Collection:</h2>
<table id="userinfo">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
</table>
<button type="button" onclick="loadXMLDoc()">获得用户列表</button>
</body>
</html>
var users = eval("(" + result + ")"); 如果改成let users=JSON.parse(result);会报错
JSON.parse要求属性名也必须加双引号
user.js改成这样，都可以用了
[
{ "username": "张三JSON", "age": 33 },
{ "username": "李四JSON", "age": 32 }
]
function state_Change(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//响应成功后处理
let result=xmlhttp.responseText;
//获取主体内容
//let users=eval("(" + result + ")");
let users=JSON.parse(result);
//alert(users);
for (var i = 0; i < users.length; i++) {
let user=users[i];
// 添加行
appendRow(user.username, user.age);
}
}
}
