什么是AJAX
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。
核心API
XMLHttpRequest
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
AJAX请求
XMLHttpRequest 对象用于和服务器交换数据。
如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
get请求
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates");
post请求
xmlhttp.open("POST","ajax_test.asp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Bill&lname=Gates");
AJAX响应内容
xmlhttp.responseText;
AJAX - onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性:
onreadystatechange
存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪
status
200: "OK" 404: 未找到页面 xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
AJAX访问步骤
第一步:根据浏览器类型创建XMLHttpRequest
var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
第二步:设置请求方式和请求参数以及路径
xmlhttp.open("get", "${pageContext.request.contextPath}/servlet/AjaxServlet1");
第三步:编写回调函数
xmlhttp.onreadystatechange = function() { alert(xmlhttp.readyState); if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { alert(xmlhttp.responseText); } };
第四步:发送请求
xmlhttp.send();
案例–通过AJAX验证用户名是否存在
创建regist.jsp表单
用户名 密码 定义用户名的onblue事件
function checkName(username) { var s_username = document.getElementById("s_username"); var sub = document.getElementById("sub"); //第一步 定义核心对象 var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //第二步:定义请求 xmlhttp.open("post", "${pageContext.request.contextPath}/servlet/CheckNameServlet"); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //第三步:定义接口回调 xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //获取响应结果 var response = xmlhttp.responseText; if (response == 0) { s_username.innerHTML = "用户名已存在"; sub.disabled = true; } else if (response == 1) { s_username.innerHTML = "该用户名可用"; sub.disabled = false; } } }; xmlhttp.send("username=" + username); }
Servlet中验证数据库用户是否存在
request.setCharacterEncoding("utf-8"); String username = request.getParameter("username"); UserDao userDao = new UserDao(); //查询数据库 User user = userDao.findUser(username); if (user != null) { //响应数据0 response.getWriter().write("0"); } else { //响应数据1 response.getWriter().write("1"); }