扫一扫,加我们为好友有惊喜哦~
-->

核心课程
开班动态
专题服务

您当前所在位置:首页 > 中心动态 >>
javascript学习笔记:ajax详解

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]


返回顶部