网站开发基础知识篇三 Ajax

   Ajax,(Asynchronous  Javascript  And   XmL),可以实现在不刷新整个网页的情况下对页面进行局部操作。

   比如在注册信息的时候,当用户填写完用户名后,可以立即对该用户名进行校验,而不必等待页面提交之后才进行。

   好了,下面写具体的代码。

   首先编写一个简单的注册页面。

   <body>

   <input type = "text" id = "userNameId" placeholder = "请输入用户名" onblur = "checkName()"/><span id = "showNameId"></span>

   </body>

   然后写checkName()方法。

   <head>

    <script type = "text/javascript">

     function checkName(){

      /*1.实例化xml对象

       *XMLHttpRequest对象可以帮助实现在不刷新整个页面的情况下交换数据,我对这个对象是如何实现的很感兴趣,以后会研究现在用它就好了。

       */

      var xmlhttp = new XMLHttpRequest();

      //2.设置监听器

      xmlhttp.onreadystatechange = function(){

      //这里接受从页面返回的信息,并进行处理。

      /*5种状态

        * 0:没有建立连接

        * 1:请求已经建立但还没有发出

        * 2:请求已经发出,正在处理

        * 3:请求已经出来,服务器还没响应

        * 4:响应已完成,可以访问服务器兵使用它

        */          

        if(xmlhttp.readyState == 4)

          var data = xmlhttp.responseText;

          //接下来就是处理了

          if(data == fail)

          document.getElementById("showNameId").InnerHTML = "<font>用户名重复</font>"

     }

     /*3.打开通道建立连接

      *value为任意类型数据,这里为用户名。

      *第三个参数为boolean类型,如果为true,则异步执行表示脚本会在send方法之后继续执行,不必等待浏览器的响应。

      *如果为false,则表示失败对其他代码无影响不过这种情况很少见。一般用true

      */

     xmlhttp.open("OneServlet","value",true);

     //4.设置请求头部信息

      xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencode");

     //5.发送数据

     var userNameValue = document.getElementById("userNameId").value;

     xmlhttp.send("userName="+userNameValue);

   }

    </script>

   </head>


   然后建立Servlet进行处理。使用request.getParamater("userName")来接值,然后去数据库中比对。

   使用PrintWriter writer = response.getWriter();

           writer.print("success or fail");来传回值。在监听器中处理成功或者失败的状况

 

 


  

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章