-
什么是Ajax?
Ajax是asynchronousJavaScriptandXML的缩写,是一种创建交互式网页应用的网页开发技术。
- 在哪里使用Ajax?
不需要刷新整个页面,适合使用Ajax,例如:用户注册的时候验证用户名是否重复,无刷新登录,在线聊天室等。
- 如何使用Ajax?
Ajax中Get方式异步发送请求源码下载:http://pan.baidu.com/s/1qY9rGIw
运行效果:
创建Ajax引擎
//创建Ajax引擎
functioncreateXmlHttpRequest(){
if(window.ActiveXObject){
//ie6中创建xmlHttpRequest方法
xmlHttpRequest=newActiveXObject("Microsoft.XMLHTTP");
}else{
//firfox、chrome、IE7
xmlHttpRequest=newXMLHttpRequest();
}
}
提交Ajax请求
functioncheckUserName(){
//创建Ajax引擎
createXmlHttpRequest();
if(xmlHttpRequest){
varuserName=document.getElementById("userName").value;
//请求URL,encodeURI两次防止中文乱码
varurl="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 属性可能的值:
状态 描述
0 请求未初始化(在调用 open() 之前)
1 请求已提出(调用 send() 之前)
2 请求已发送(这里通常可以从响应得到内容头部)
3 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
4 请求已完成(可以访问服务器响应并使用它)