-
0 初始化状态
-
1 连接状态,调用了open方法
-
2 发送状态,调用了send方法
-
3 接受状态,开始接受服务器数据
-
4 接受完成状态,完全接受服务器数据
属性:
-
status 响应码,200、403、404、500…
-
readyState 状态码,从0到4
-
responseText 服务器的响应数据
原生AJAX的实现
Servlet代码
/**
-
测试Ajax
-
@author xray
*/
@WebServlet(“/ajax.do”)
public class AjaxServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding(“UTF-8”);
resp.setContentType(“text/html;charset=UTF-8”);
//获得Ajax发送的参数
String name = req.getParameter(“name”);
//给浏览器发送数据
resp.getWriter().print(name+“你好啊,我是服务器!!!”);
}
}
=========================================================================
JQuery提供了几种ajax方法:
- $.ajax
参数:
type 请求方法类型,GET、POST
url 服务器地址,必须
data 请求参数
async 是否异步
success 成功接收数据的回调函数
error 错误情况的回调函数
$.ajax({type:“post”,url:“ajax.do”,data:{username:“张三”},
success:function(text){
更新text数据到页面
}
});
- $.post
$.post(“URL”,{参数名:值},
function(text){
更新页面
}
);
- $.get
$.get(“URL?参数”,
function(text){
…
});
使用JQuery的ajax方法
$(function(){
//设置点击事件
$(“#test”).click(function(){
//使用ajax方法连接服务器
/* $.ajax({type:“POST”,data:{username:“李四”},url:“ajax.do”,
success:function(text){
//更新页面内容
$(“#test”).text(“服务器说:”+text);
}
}); */
//使用post方法
/* $.post(“ajax.do”,{username:“王五”},
function(text){
//更新页面内容
$(“#test”).text(“服务器说:”+text);
}
); */
//使用get方法
$.get(“ajax.do?username=赵六”,
function(text){
//更新页面内容
$(“#test”).text(“服务器说:”+text);
}
);
});
});
====================================================================
案例:验证注册用户手机号是否存在
1、在UserDAO、UserService添加手机号是否存在查询方法
2、创建Servlet,接受Ajax传来的手机号,进行查询,将结果用流发送给浏览器
3、在添加用户的页面添加Ajax方法,在手机输入框失去焦点时调用验证。
/**
-
查询用户电话是否存在
-
@author xray
*/
public class FindUserTelServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//接受Ajax函数传来的手机号
String user_tel = req.getParameter(“user_tel”);
//调用数据库查询
UserService service = new UserServiceImpl();
boolean find = service.findUserTel(user_tel);
//将结果发送给Ajax
resp.getWriter().print(find);
}
}
注册表单
…