1、Ajax
异步刷新,在不影响页面整体的情况下刷新局部数据,例如:视频点赞数量、播放量等
2、实现
js:XMLHttpRequest对象
XMLHttpRequest对象的方法:
open( 方法名( 提交方式:get/post ), 服务器地址:true ); 与服务器建立链接
send();
get: send(null);
post: send( 参数值 );
setRequestHeader( header, value );
get: 不需要设置此方法
post: 需要设置
a. 如果请求元素中包含__文件__
setRequestHeader( "Content-Type", "multipart/form-data" );
b. 如果请求元素中不包含__文件__
setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
readystate
readystate表示XMLHttpRequest对象发送的HTTP请求状态,共有五种状态
状态值 | 简介 |
---|---|
0 | 表示XMLHttpRequest 对象没有初始化 |
1 | 表示XMLHttpRequest 对象已经开始发送请求, 已经执行了open()方法并完成了相关资源的准备 |
2 | 表示XMLHttpRequest 对象已经将请求发送完毕, 已经执行了send()方法来发送请求,但是还没有收到响应 |
3 | 表示XMLHttpRequest 对象开始读取响应信息,已经接收到HTTP响应的头部信息,但是还没有将响应体接收完毕 |
4 | 表示XMLHttpRequest 对象将响应信息全部读取完毕 |
status
status表示HTTP响应中的状态码。
状态码 | 含义 |
---|---|
200 | 服务器正常响应 |
400 | 无法找到请求的资源 |
403 | 没有访问权限 |
404 | 访问的资源不存在 |
500 | 服务器内部错误,可能是代码错误 |
小结
XMLHttpRequest对象的属性
readystate:请求状态, 只有 4 代表请求完毕
status:响应状态, 只有 200 代表响应正常
onreadystatechange: 回调函数
responseText: 响应格式为 String
responseXML: 响应格式为 XML
3、代码:post方式提交
前端代码
function submitData() {
var phoneNum = document.getElementById("num").value;
xmlhttprequest = new XMLHttpRequest();
// 回调函数,用于接收服务端返回信息
xmlhttprequest.onreadystatechange = callBack;
// 设置传输方式、目的地址
xmlhttprequest.open("post","AjaxTextServlet",true);
// 设置post方式头信息
xmlhttprequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 发送数据(格式为 name=data)
xmlhttprequest.send("phoneNum="+phoneNum);
}
function callBack(){
// 若请求状态码和响应状态码都无异常
if(xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200){
var data = xmlhttprequest.responseText; // 通过字符串格式获取返回数据
if(data=="true"){
alert("号码已存在");
}else{
alert("注册成功");
}
}
}
vphoneNumber:<input type="text" id="num" />
<input type="button" value="submit" onclick="submitData()" />
servlet代码
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=UTF-8");
// 通过name=data中的name获取对应的data
String phoneNum = request.getParameter("phoneNum");
PrintWriter write = response.getWriter();
if("110".equals(phoneNum)) {
write.write("true");
}else {
write.write("false");
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
4、get方式提交(大部分代码一样,这里只给出修改部分)
JavaScript修改部分
function submitData() {
var phoneNum = document.getElementById("num").value;
xmlhttprequest = new XMLHttpRequest();
// 回调函数,用于接收服务端返回信息
xmlhttprequest.onreadystatechange = callBack;
// 设置传输方式、目的地址
xmlhttprequest.open("post","AjaxTextServlet?phoneNum="+phoneNum,true);
xmlhttprequest.send(null); // get
}
PS:这个例子可能不太能体现出来ajax异步刷新的特性,但可以通过观察地址栏发现,提交数据时,页面并没有跳转