AJAX
1. 简介
Asynchronous Javascript And XML (异步javascript和xml)。这玩意干啥的呢,简单说就是向服务器发送请求的,然后得到响应,更新部分网页,但是不需要重新加载整个页面。本质上呢就是javascript。
2. 场景
想几个很简单的场景,你在注册的时候,输入完用户名,然后就会得到提示,该用户名已被注册,这就很舒服,因为不需要重新加载页面。有种即插即用的赶脚,大概就这个意思,咱们分批的玩。或者说你在百度搜索时候,你输入“李小璐“,搜索栏底下会出现类似”PGONE“这种,那就是和后台交互了呗,不然浏览器哪里知道你输入的是个啥,服务器也没法给你回。
3. 就学一个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"); } //针对不同的浏览器,所以copy一下完事
发送请求
xmlhttp.open("GET","test1.txt",true); xmlhttp.send();
一般就是用get方式提交就搞定,默认async的值是true,不用写。send方法传一个null
接收响应
responseText就是响应的正文,常用事件与属性
onreadystatechange事件是监听XMLHttpRequest对象的readyState状态,从0到4改变的时候就会被调用。我们一般判断 readyState==4 && status == 200,说明一切正常,再对响应进行操作。
4. 注册用户名例子
当输入完用户名之后,离开输入框,触发onblur事件,创建XMLHttpRequest对象,并发送异步请求到服务器,通过get方式把username传给一个servlet,一切正常得到响应正文,进行判断是否已经被注册,给出提示。
function getXMLHttpRequest() {
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");
}
return xmlhttp;
}
<script type="text/javascript">
window.onload = function() {
//得到input元素
var nameElement = document.getElementsByName("username")[0];
//注册onblur事件
nameElement.onblur = function() {
var name = this.value;
//创建XMLHttpRequest()
var req = getXMLHttpRequest();
//注册监听事件,此事件一般写在open()和send()方法之前,
//因为对象一经创建,readyState就会改变
req.onreadystatechange = function() {
//判断是否一起正常
if (req.readyState == 4) {
if (req.status == 200) {
var msg = document.getElementById("msg");
if (req.responseText == "true") {
msg.innerHTML = "<font color='red'>傻逼,已经被注册了!</font>"
} else {
msg.innerHTML = "nice,可以用!"
}
}
}
}
//提交请求到一个servlet,带着username
req.open("get", "${pageContext.request.contextPath }/servlet/checkNameServlet?username=" + name);
//空值即可
req.send(null);
}
}
</script>
</head>
<body>
用户名:<input type="text" name="username"><span id="msg"></span><br>
密码:<input type="password">
</body>
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
PrintWriter out = resp.getWriter();
//判断输入的是不是tom,输出响应正文
if("tom".equals(req.getParameter("username"))) {
out.print("true");
} else {
out.print("false");
}
}
效果如下: