AJAX入门学习总结
一、AJAX简介
AJAX的全称是异步的JavaScript和XML;主要用途是对于整个页面进行局部更新;
AJAX出现的目的是因为一般网页如果稍作改动,就会重新生成整个页面代码,消耗大。而AJAX能够只更新局部页面;
AJAX是在JavaScript代码中编写的;
二、XMLHttpRequest
XMLHttpRequest是整个AJAX的核心,我们通过XMLHttpRequest进行发送和接受数据;
为了取得此对象,我们需要通过以下代码:
<script language="Javascript"> var xmlHttp; function create(){ if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); } else{ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } </script>浏览器有两种内核,IE内核和firefox内核;因此需要根据当前用户浏览器进行判断;
XMLHttpRequest有一些常用属性:
(1)readyState :请求的状态;(4 表示已经响应完毕)
(2)onreadystatechange :readyState改变时调用,通常用于回调函数的返回值;
(3)responseText :返回纯文本对象;
(4)responseXML :返回XML数据的对象;
(5)status :返回当前HTTP的状态(200为正常)
XMLHttpRequest的常用函数:
(1)open("GET/POST","url"); : 创建请求,指定是post还是get,并且指定发送的目的地URL;
(2)send(param); :发送请求,通常param=null;
知识回顾:
在JavaScript中
(1)document.getElementById("name").innerHTML可以设定此控件的值;
(2)onblur事件表示失去焦点时调用;
登录异步验证代码:
这里使用DAO进行连接数据库,因此这段代码忽略;
<html> <head> <title>Title</title> <script language="Javascript"> var xmlHttp; var flag = false; function create(){ if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); } else{ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } function checkId(id){ create(); xmlHttp.open("GET","CheckServlet?id="+id); xmlHttp.send(null); flag = true; xmlHttp.onreadystatechange = callback; document.getElementById("msg").innerHTML = "正在验证"; } function callback(){ if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ var text = xmlHttp.responseText; if(text=="true"){ document.getElementById("msg").innerHTML = "id正确"; } else{ document.getElementById("msg").innerHTML = "id重复"; } } } } function ischecked(){ return flag; } </script> </head> <body> <form action="" method="post" onSubmit="return ischecked()"> 用户ID:<input type="text" name="id" onBlur="checkId(this.value)"/><br /> 姓 名:<input type="text" name="name"/><br /> 密 码:<input type="text" name="password"/><br /> <input type="submit" value="注册"/> <span id="msg"></span> </form> </body> </html>
注意:
(1)调用回调函数不需要加括号。
(2)readyState的拼写;
package org.servlet; import javax.servlet.*; import javax.servlet.http.*; import java.io.*; import org.dao.factory.*; public class CheckServlet extends HttpServlet{ public void doGet(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException{ String id = req.getParameter("id"); PrintWriter out = resp.getWriter(); boolean flag=false; try{ flag = DAOFactory.getInstance().findById(id); } catch(Exception e){} if(flag){ out.print("true"); } else{ out.print("false"); } } }
异步验证注册的优点:
(1)能够在没有提交前就知道用户名是否有效,现在使用的很多。