Ajax是一种使用现有标准的新方法(异步JavaScript、XML),是在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术。
一、同步与异步的区别?
同步:客户端请求服务器,等待响应再执行
异步:客户端请求Ajax引擎,Ajax再请求服务器,服务器响应到Ajax,客户端可以同时执行其他操作
二、XMLHttpRequest对象:
属性:responseText:获得字符串形式的响应数据。
responseXML:获得XML形式的响应数据。
onreadystatechange:存储函数(或函数名),当readyState属性改变时就会调用函数。
status:响应的HTTP状态。
statusText:HTTP状态说明。
readyState:存有XMLHttpRequest状态。从0到4发生变化。
0:请求未初始化
1:服务器连接已经建立
2:请求已接受
3:请求处理中
4:请求已完成,且响应已就绪
方法:open(method,url,async)规定请求的类型、URL以及是否异步处理请求。
method:请求的类型:GET、POST
url:文件在服务器上的位置
async: true(异步)或false(同步)
send(data)将请求发送到服务器。
data:仅用于post请求
setRequestHeader(header,value)向请求添加HTTP头
header:规定头的名称
value:规定头的值
getResponseHeader()获取响应头
三、使用AJAX步骤:
1.创建XMLHttpRequest对象
a) var xhr = new XMLHttpRequest(); //IE7及以后
b) var xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE5、IE6
2.设置回调函数
xhr.readystatechange = callback;
3.设置xhr的相关方法
xhr.open("post",url,true);
xhr.setRequestHeader("","");
xhr.send(data);
4.编写回调函数处理结果
function callback(){
if(xhr.readystate==4 && xhr.status==200){
//获取结果
var xml = xhr.responseXML;
}
}
四、代码实现
1.js
<script type="text/javascript">
window.οnlοad=function(){
var email = document.getElementById("email");
//添加失去焦点事件
email.οnblur=function(){
<span style="white-space:pre"> </span>//调用checkEmail(email)函数
checkEmail(this);
};
};
function checkEmail(email){
//1.创建XMLHttpRequest对象
var xhr = createXHR();
//2.设置回调函数
xhr.onreadystatechange=function(){
//alert(xhr.readyState);
//判断readyState是否完成
if(xhr.status==200 && xhr.readyState==4){
//获取响应的文本
//alert(xhr.responseText);
var error = document.getElementById("error");
if(xhr.responseText=='true'){
error.innerHTML = "邮箱已存在!";
}else{
error.innerHTML = "邮箱可以注册!";
}
}
};
//3.设置相关方法
/*
//GET请求
var url = "user.do?email="+email.value;
xhr.open("GET",url,false);//同步
xhr.send(null);
*/
//POST请求
var url = "user.do";
xhr.open("POST",url,false);
//设置请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送数据
xhr.send("email="+email.value+"&time="+new Date().getTime());
}
<span style="font-size: 18.018px;"><span style="white-space: pre;"> </span> //创建XMLHttpRequest对象</span>
<pre name="code" class="html" style="font-size: 18.018px;"> function createXHR(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}else{
alert("你的浏览器不支持AJAX!");
return null;
}
}
</script>
</pre><pre name="code" class="html">2.servlet
<pre name="code" class="java">@WebServlet("/user.do")
public class UserServlet extends HttpServlet {
private UserManager userManager = new UserManager();
@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");
// 获取参数
String email = req.getParameter("email");
//调用业务层的方法
boolean flag = userManager.checkEmail(email);
//输出的内容类型,text/plain普通文本,text/html页面
resp.setContentType("text/plain");
PrintWriter out = resp.getWriter();
//输出结果
out.print(flag);
//释放资源
out.close();
}
}
//创建XMLHttpRequest对象
function createXHR(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}else{
alert("你的浏览器不支持AJAX!");
return null;
}
}
</script>