版权声明:转发能告知我一声让我高兴一下吗...记得标明来源哇 https://blog.csdn.net/aic1999/article/details/82907841
Ajax异步请求
平时我们上网站的时候肯定遇到过这种情况:以游客状态访问的网站,并没有登录。当我们从主页登录后,发现我们登录后网站的页面没有重新刷新,只是右上角更新了我们的信息。如果是同步请求,网页就会重新刷新,覆盖网页原有数据。
这就是异步请求的作用——部分更新网页内容,而不影响整个网页。说复杂点就是——“浏览器发送请求给服务器,服务器处理请求的过程中,浏览器不处于等待的状态,并且浏览器接收响应数据的同时不再重新加载整个页面,既请求发送之前的数据不丢失,又能实现页面的局部刷新”。
了解异步请求
ajax异步请求,转到test页面,取到该页面的响应文本:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>异步请求简单demo</title>
</head>
<body>
<script type="text/javascript">
//先定义一个请求对象,使用MSLHttpRequest对象
var request=new XMLHttpRequest();
request.open("get","test.jsp",true); //打开通道
//同步改成异步,false同步,true异步↑
function readyStateChange(){
if(request.readyState==4){ //判断请求成功
var status=request.status;
if(status==200) alert(request.responseText);
else alert('fail');
}
}
//事件响应
request.onreadystatechange=readyStateChange;
request.send(null); //js会自动发送一个请求给jsp
</script>
</body>
</html>
test.jsp代码如下:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
yes,it's ok
【注释】标签的代码也会作为“响应文本”显示到弹窗里的,所以去掉在test.jsp中去掉了<html>等标签。
【输出】弹窗显示"yes,it's ok"。这个就是我们的响应文本。
规范化实现
然而平时经常会用的异步请求,所以一般都会将请求响应的代码抽出来变成一个js文件的。
httprequest.js,代码如下(根据get\post不同的需求写):
//get方法:
function HttpRequest(url,callback){
this.request = new XMLHttpRequest();
this.request.open("get",url,true);
var tempRequest = this.request;
function readyStateChange(){
if(tempRequest.readyState==4){
var status= tempRequest.status;
if(status==200){
callback(tempRequest.responseText);
}else{
alert("failure in httprequest.js");
}
}
}
this.request.onreadystatechange = readyStateChange;
}
HttpRequest.prototype.send = function(){
this.request.send(null);
};
//post方法
function HttpRequest(url,callback){
this.request = new XMLHttpRequest();
this.request.open("post",url,true);
this.requset.setRequestHeader("content-type",
"application/x-www-form-urlencoded");
var tempRequest = this.request;
function readyStateChange(){
if(tempRequest.readyState==4){
var status= tempRequest.status;
if(status==200){
callback(tempRequest.responseText);
}else{
alert("failure");
}
}
}
this.request.onreadystatechange = readyStateChange;
}
HttpRequest.prototype.send = function(param){
this.request.send(param);
};
创建get.jsp测试一下httprequest.js是否可用:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="UTF-8"%>
<head>
<script type="text/javascript" src='httprequest.js'></script>
<script>
//回调函数,输出响应文本。
function handleDate(text){
alert(text);
}
//调用自定义的js
var request= new HttpRequest("test.jsp",handleDate);
request.send();
</script>
</head>
发现可以正常使用,所以能拿来做实际应用例子了:
扫描二维码关注公众号,回复:
3531005 查看本文章
下面我们使用httprequest.js(get方法)实现检查用户注册的时候名字是否合法
开发实例
【实例】点击超链接,检查用户的注册名是否合法(例如不可以使用“admin”用户名)
首先写判断代码:formcheck.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="net.sf.json.*"%>
<%
boolean flag =false;
request.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
System.out.println(username);
//用java定义json对象,json记录用户名和用户名是否合法的信息。
JSONObject obj = new JSONObject();
obj.put("searchTerm",username);
//不要为了贪图方便,不写else,直接在这写
//obj.put("available",true); 这样执行if的时候不会成功的。
if(username.equals("admin")){
obj.put("available",false);
}
else{
obj.put("available",true);
}
out.print(obj);
%>
然后再写用户登录界面的代码(前部分是界面代码,后面才是逻辑代码):
ch14_example.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 14: Example 1</title>
<style>
.fieldname {
text-align: right;
}
.submit {
text-align: right;
}
</style>
</head>
<body>
<form>
<table>
<tr>
<td class="fieldname">
Username:
</td>
<td>
<input type="text" id="username" />
</td>
<td>
<a id="usernameAvailability" href="#">Check Availability</a>
</td>
</tr>
<tr>
<td class="fieldname">
Email:
</td>
<td>
<input type="text" id="email" />
</td>
<td>
<a id="emailAvailability" href="#">Check Availability</a>
</td>
</tr>
<tr>
<td class="fieldname">
Password:
</td>
<td>
<input type="text" id="password" />
</td>
</tr>
<tr>
<td class="fieldname">
Verify Password:
</td>
<td>
<input type="text" id="password2" />
</td>
</tr>
<tr>
<td colspan="2" class="submit">
<input type="submit" value="Submit" />
</td>
</tr>
</table>
</form>
<!-- 引入需要的js文件 -->
<script src="httprequest.js"></script>
<script>
//handleResponse是回调函数
function handleResponse(text){
//处理返回的json对象
var info = JSON.parse(text);
if(info.available){
alert(info.searchTerm +"是合法的");
}
else {
alert(info.searchTerm +"已经存在!");
}
}
//checkUsername()判断用户名是否可用
function checkUsername(e){
//阻止超链接的默认操作
e.preventDefault();
var username = document.getElementById("username").value;
//get方式:
var url = "formcheck.jsp?username="+username;
var request = new HttpRequest(url,handleResponse);
request.send();//get方式提交
//post方式:
// var url = "formcheck.jsp";
// var param = "username="+username;
// var request = new HttpRequest(url,handleResponse);
// request.send(param);
}
//获取界面的超链接对象
var linka = document.getElementById("usernameAvailability");
//注册事件监听器
linka.addEventListener("click",checkUsername);
</script>
</body>
</html>
【运行结果】
输入admin,弹窗”admin已经存在!”
输入其他字符串,显示“..是合法的“