Ajax 异步js和xml
-
异步刷新: 如果网页中某一个地方需要修改,异步刷新可以使用:只刷新需要修改的地方,其他地方不用动
- js: XMLHttpRequest对象
- XMLHttpRequest对象的方法
- open(方法名(提交方式get|post,服务器地址,true)与服务端建立连接
- send()
-
set:RequestHeader(header, value)
-
get:不需要设置此方法
-
post:需要设置
-
如果请求元素中包含了 文件上传
-
setRequestHeader(“Content-Type”,“multiparty/form-data”);
不包含文件上传 -
setRequestHeader(“Content-Type”,“application/x-www-form-urllencoded”)
XMLHttpRequest对象的属性
-
readystate:请求状态 只有状态4代表请求完毕成功响应
-
status:响应状态 只有200-300之间的数字代表响应正常
-
onreadystatechange 回调函数
-
responseText 响应格式为String
-
responseXML 响应格式为xml
js访问请求
<script>
function check() {
var u = document.getElementById("uname");
var name = u.value;
//访问字符串
var url = "AjaxServlet";
xmlHttp = new XMLHttpRequest();
//设置xmlhttpRquest对象的回调函数
xmlHttp.onreadystatechange = callback;
xmlHttp.open("post", url, true);
//设置post方式的头信息
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlHttp.send("name=" + name);
}
//回调函数
function callback() {
if (xmlHttp.status == 200 && xmlHttp.readyState == 4) {
var data = xmlHttp.responseText;//得到服务端的输出结果
if (data == "true") {
//document.getElementById("alert").innerHTML = "<font color='red'>用户名已经存在!</font>";
alert("失败,用户存在")
} else {
//document.getElementById("alert").innerHTML = "<font color='blue'>用户名可以使用!</font>";
alert("注册成功")
}
}
}
</script>
<body>
请输入用户名:
<input id="uname" name="uname" type="text" onblur="checkUserExists()" />
<input type="button" value="登录" onclick="check()">
<div id="alert" style="display: inline"></div>
</body>
jQuery请求
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function check() {
var $name = $("#uname").val();
alert($name);
$.ajax({
type: "POST",
url: "AjaxServlet",
data: "name=" + $name,
success: function (result,test) {
if(result == "true"){
alert("失败")
}else{
alert("成功")
}
},
error:function(xhr,errorMessage,e){
alert("系统异常");}
});
}
</script>
请输入用户名:
<input id="uname" name="uname" type="text" onblur="checkUserExists()" />
<input type="button" value="登录" onclick="check()">
<div id="alert" style="display: inline"></div>
</body>
Servlet
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");// 获取到输入的用户名
System.out.println(name);
response.setCharacterEncoding("UTF-8");// 设置字符编码
PrintWriter out = response.getWriter();
if ("ls".equals(name)) {
out.write("true");
} else {
out.write("false");
}
}
post请求
$.post(
url
data
function(result){判断}
, :xml json text
);
<%@ 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>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function check() {
var $name = $("#uname").val();
$.post("AjaxServlet", "name=" + $name, function(result) {
if (result == "true") {
alert("注册失败");
} else {
alert("注册成功");
}
}, "text"
); }
</script>
<body>
<input type="text" id="uname">
<input type="button" value="登录" onclick="check()">
</body>
</html>
get请求
$.get(
url
data
function(result){判断});
<script type="text/javascript">
function check() {
var $name = $("#uname").val();
$.get("AjaxServlet", "name=" + $name, function(result) {
if (result == "true") {
alert("注册失败");
} else {
alert("注册成功");
}
}); }
</script>
load方式
语法load(url,data,function(response,status,xhr))
url | 规定要将请求发送到哪个 URL。 |
---|---|
data | 可选。规定连同请求发送到服务器的数据。 |
function(response,status,xhr) | 可选。规定当请求完成时运行的函数。额外的参数: |
xhr - 包含 XMLHttpRequest 对象 | 可选。规定当请求完成时运行的函数 |
- response - 包含来自请求的结果数据
- status - 包含请求的状态(“success”, “notmodified”, “error”, “timeout” 或 “parsererror”)
- xhr - 包含 XMLHttpRequest 对象|
<script type="text/javascript">
function check() {
var $name = $("#uname").val();
$("#asd").load("AjaxServlet", "name=" + $name);
}
</script>