javascript学习课程报名咨询：常州文化宫校区：0519-69886161、新北校区：0519-68877558！

1、ajax：异步的javascript和xml技术，无刷新数据交互技术！
XMLHttpRequest
ajax有五个响应状态：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

index.jsp：注册页面
    <script type="text/javascript">
        var xmlhttp;//用来存放ajax的核心对象
       
        function checkname(){
           var u = document.regform.username;//获取用户名的输入框
          
           //判断浏览器是否是主流浏览器
           if(window.XMLHttpRequest){
              xmlhttp = new XMLHttpRequest();
           }else{
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
           }
          
           //打开发送请求
           var url = "CheckNameServlet?username=" + u.value;
           xmlhttp.open("GET",url,true);
           //当状态码发生改变时，调用callBack函数
           xmlhttp.onreadystatechange = callBack;//回调函数
           xmlhttp.send();//发送
        }
       
        //回调函数，当状态发生改变时调用本函数
        function callBack(){
           //输出当前的状态
           //alert(xmlhttp.readyState);
           //如果服务器已经响应
           if(xmlhttp.readyState == 4){
              var r = xmlhttp.responseText;//获取响应文本
              alert(r);
           }
        }
    </script>

  <form action="RegServlet" method="post" name="regform">
   <p>
    用户名：
    <input type="text" name="username" onblur="checkname()"/>
   </p>
   <input type="submit" value="提交">
  </form>

CheckNameServlet：检验用户名是否重复的后台
  //获取参数
  String username = request.getParameter("username");
  //判断用户名是否可用
  if(username != null && username.trim().equals("admin")){
   //向前端响应检验结果
   out.print("no");
  }else{
   out.print("yes");
  }

ajax的优化：提示信息写在网页中，注意IE缓存问题，注意不要重复产生XMLHttpRequest对象！
    <script type="text/javascript">
        var xmlhttp;//用来存放ajax的核心对象
       
        //初始化核心对象
        function init(){
           if(xmlhttp == null){
               //判断浏览器是否是主流浏览器
            if(window.XMLHttpRequest){
               xmlhttp = new XMLHttpRequest();
            }else{
               xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
           }
        }
       
        function checkname(){
           var u = document.regform.username;//获取用户名的输入框
          
           init();//初始化xmlhttp对象
          
           //打开发送请求(random的参数是为了防止IE浏览器缓存问题)
           var url = "CheckNameServlet?username=" + u.value + "&r=" + Math.random();
           xmlhttp.open("GET",url,true);
           //当状态码发生改变时，调用callBack函数
           xmlhttp.onreadystatechange = callBack;//回调函数
           xmlhttp.send();//发送
        }
       
        //回调函数，当状态发生改变时调用本函数
        function callBack(){
           //输出当前的状态
           //alert(xmlhttp.readyState);
           //如果服务器已经响应
           if(xmlhttp.readyState == 4){
              var r = xmlhttp.responseText;//获取响应文本
              //根据响应文本给用户提示
              if(r == "yes"){
                  document.getElementById("namemsg").innerHTML = "<font color='green'>用户名可用</font>";
                  document.getElementById("bt01").disabled = false;
              }else if(r == "no"){
                  document.getElementById("namemsg").innerHTML = "<font color='red'>用户已被占用</font>";
                  document.getElementById("bt01").disabled = "disabled";
              }
           }else{
              document.getElementById("namemsg").innerHTML = "<font color='green'>检验中……</font>";
           }
        }
    </script>

注意：javascript可以独立成一个文件，然后采用如下代码引入
    <script type="text/javascript" src="checkname.js"></script>

	【常州东方博宜多媒体课程培训】学员案例	[2014-2-18]
	【常州东方博宜机械多媒体课程培训】学员案例	[2014-2-18]
	软件开发工程师 未来市场最赚钱的行业	[2014-1-9]
	程序员课外读物	[2012-7-9]
	【常州电脑培训】如何进行项目的可行性分析	[2012-6-13]
	常州软件培训——零缺陷代码质量管理！	[2012-6-12]
	常州电脑培训-主板常见故障的解决方法	[2011-12-16]
	常州软件培训-JAVA基础	[2011-12-12]