Ajax
异步js和xml的组装
核心：异步刷新技术
概念：全局刷新
在请求转发/重定向技术中，页面跳转的刷新即全局刷新
异步刷新：如果网页中某一个地方需要修改，异步刷新可以使：只刷新需要修改的地方，而页面中其他地方保持不变，例如：百度搜索框、视频点赞
Ajax实现
一共有两种方式：JavaScript和JQuery，但在开发中使用的基本是JQuery
JavaScript实现：
依赖于XMLHttpRequest对象
XMLHttpRequest对象的·方法
1、open(参数1，参数2，true)
与服务端建立链接
第一个参数是方法名（提交方式get/post）
第二个参数是服务器地址
第三个参数如果是true，说明此方法是异步刷新，如果是false，说明是全局刷新，一般情况下都是true
2、send()
如果是get请求：send参数为null即send(null)
如果是post请求：send有参数值为send(参数值)
3、setRequestHeader(header,value)
如果是get请求：不需要设置此方法
如果是post请求：需要设置，还要分两种情况：
a、如果请求元素中包含了文件上传：
setRequestHeader("Content-Type","multipart/form-data");
b、如果不包含文件上传：
setRequestHeader("Content-Type","application/x-www-form-utlencoded");
XMLHttpRequest对象的属性
1、readystate：请求状态
表示XMLHttpRequest对象发送的HTTP请求状态，共有五种状态，如表所示：
| 状态值 | 简介 |
|---|---|
| 0 | 表示XMLHttpRequest对象没有初始化 |
| 1 | 表示XMLHttpRequest对象开始发送请求，已经执行了open()方法并完成了相关资源的准备 |
| 2 | 表示XMLHttpRequest对象已将请求发送完毕，已经执行了send()方法来发送请求，但还没有收到响应 |
| 3 | 表示XMLHttpRequest对象开始读取响应信息，已经接受到HTTP响应的头部表示，但是还没有将响应体接收完毕 |
| 4 | 表示XMLHttpRequest对象将响应信息全部读取完毕 |
只有状态为4代表请求完毕
2、status：响应状态
status表示HTTP响应中的状态码，各状态码的含义入表所示：
| 状态码 | 含义 |
|---|---|
| 200 | 服务器正常响应 |
| 400 | 无法找到请求的资源 |
| 403 | 没有访问权限 |
| 404 | 访问的资源不存在 |
| 500 | 服务器内部错误，很可能使服务器代码有错 |
只有状态码为200代表响应正常
3、onreadystatechange：回调函数
4、responseText
响应格式为String（text）
5、responseXML
响应格式为XML
示例
实例简述：注册一个手机号码，客户端发出一个手机号，服务端判断手机号是否已存在，存在：true，不存在：false
a、客户端index.jsp，负责数据的提供和最终反馈的获取
（含get和post两种请求方式）
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 鼠标单击事件-->
<script type="text/javascript">
function registerGet(){
//get方式请求
var mobile=document.getElementById("mobile").value; //获取mobile值
xmlHttpRequest=new XMLHttpRequest(); //前面不标明属性表示是全局变量
xmlHttpRequest.onreadystatechange=callBack; //注意回调函数不需要加括号
//因为get方式send为空值，所以参数需要用地址栏方式传递
xmlHttpRequest.open("get","MobileServlet?mobile="+mobile,true);
xmlHttpRequest.send(null);
}
function registerPost(){
//post方式请求
var mobile=document.getElementById("mobile").value;
//通过ajax异步方式请求服务端
xmlHttpRequest=new XMLHttpRequest();
//设置xmlHttpRequest对象的回调函数
xmlHttpRequest.onreadystatechange=callBack;
xmlHttpRequest.open("post","MobileServlet",true);
//设置post方式头消息
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//通过send传送值
xmlHttpRequest.send("mobile="+mobile);
}
//定义回调函数（接收服务端返回值）
function callBack(){
if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
//接收服务端返回的数据
var data=xmlHttpRequest.responseText; //服务端返回值为String格式
if(data=="true"){
alert("此号码已存在，请更换！");
}else{
alert("注册成功！");
}
}
}
</script>
<title>Insert title here</title>
</head>
<body>
手机：<input id="mobile"><br/>
<input type="button" value="注册" onclick="registerGet()"/>
</body>
</html>
b、服务端MobileServlet，负责数据的处理和处理结果的反馈
package my.mobile.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class MobileServlet extends HttpServlet {
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");
PrintWriter out=response.getWriter();
String mobile=request.getParameter("mobile");
//假设此时数据库中只有一个号码：12345678910
if(("12345678910").equals(mobile)) { //常量字符串写在前，防止返回空指针
//return true;
//通过输出流进行信息返回
out.write("true");
}
else {
//return false;
out.write("false");
}
out.close();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
802
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
