-
什么是Ajax?
Ajax是asynchronous JavaScript and XML的缩写,是一种创建交互式网页应用的网页开发技术。
-
在哪里使用Ajax?
不需要刷新整个页面,适合使用Ajax,例如:用户注册的时候验证用户名是否重复,无刷新登录,在线聊天室等。
-
如何使用Ajax?
Ajax中Get方式异步发送请求源码下载: http://pan.baidu.com/s/1qY9rGIw
运行效果:
创建Ajax引擎
//创建Ajax引擎
function createXmlHttpRequest() {
if (window.ActiveXObject) {
//ie6中创建xmlHttpRequest方法
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} else {
//firfox、chrome、IE7
xmlHttpRequest = new XMLHttpRequest();
}
}
提交Ajax请求
function checkUserName() {
//创建Ajax引擎
createXmlHttpRequest();
if (xmlHttpRequest) {
var userName = document.getElementById("userName").value;
//请求URL,encodeURI两次防止中文乱码
var url = "Regedit?userName=" + encodeURI(encodeURI(userName));
//get表示请求方式:get/post url请求的地址,true表示异步,false表示同步
xmlHttpRequest.open("get", url, true);
//回调函数
xmlHttpRequest.onreadystatechange = chuli;
//发送请求
xmlHttpRequest.send(null);
}
}
servlet后台处理
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置返回的编码
response.setContentType("text/html;charset=utf-8");
// URLDecoder解码
String userName = URLDecoder.decode(request.getParameter("userName"), "UTF-8");
//使用PrintWriter打印到界面上
PrintWriter out = response.getWriter();
if (userName.equals("xukaiqiang")) {
out.println(userName + "已经存在!");
} else {
out.println(userName + "用户名可以使用!");
}
//关闭流
out.close();
}
回调函数处理
//回调函数
function chuli() {
if (xmlHttpRequest.readyState == 4) {
document.getElementById("msg").innerHTML = xmlHttpRequest.responseText;
}
}
-
readyState 属性
readyState 属性存有服务器响应的状态信息。当 readyState 改变时,onreadystatechange 函数就会被执行。
这是 readyState 属性可能的值:
状态 描述
0 请求未初始化(在调用 open() 之前)
1 请求已提出(调用 send() 之前)
2 请求已发送(这里通常可以从响应得到内容头部)
3 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
4 请求已完成(可以访问服务器响应并使用它)
-
原理
由事件(onblur,onchange等)触发,创建一个xmlHttpRequest对象(XHR),然后通过servlet/action或者其他方式,从数据库中获取数据,交给xmlHttpRequest对象处理,交给回调函数进行处理显示。