js代码与html代码分离示例-白红宇

验证用户名是否存在的示例代码引出该思想：
<%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%>    
      
       
       Insert title here     
       
                 // 方式一：使用文本框的onblur事件(失去焦点事件) //         function ckName() {
      //             // 通过标签名获取元素节点对象 //             var name = document.getElementsByTagName("input")[0]; //             // 创建XMLHttpRequest对象 //             var xhr = getXMLHttpRequest(); //             // 处理响应结果，创建回调函数，根据响应状态动态更新页面 //             xhr.onreadystatechange = function() {
      //                 if (xhr.readyState == 4) { // 说明客户端请求一切正常 //                     if (xhr.status == 200) { // 说明服务器响应一切正常 //                         // alert(xhr.responseText); // 得到响应结果，得到页面上面的结果，注意结果为字符串 //                         var msg = document.getElementById("msg"); //                         if (xhr.responseText == "true") {
      //                             // msg.innerText = "用户名已存在"; //                             msg.innerHTML = "
        
         该用户名已存在"; //                         } else {
      //                             msg.innerHTML = "
         
          该用户名可以使用"; //                         } //                     } //                 } //             }  //           //             // 建立一个连接 //             xhr.open("get", "${pageContext.request.contextPath}/servlet/ckNameServlet?name=" + name.value); //             // 发送请求 //             xhr.send(null); //         }         // 方式二：不使用文本框的事件         // onload   加载完毕的事件，等到页面加载完毕后再执行onload事件所指向的函数。         window.onload = function() {
                 // 通过名获取元素对象             var nameElement = document.getElementsByName("userName")[0];             nameElement.onblur = function() {
                     var name = this.value; // this等价于nameElement                 // 创建XMLHttpRequest对象                 var xhr = getXMLHttpRequest();                 // 处理响应结果，创建回调函数，根据响应状态动态更新页面                 xhr.onreadystatechange = function() {
                         if (xhr.readyState == 4) { // 说明客户端请求一切正常                         if (xhr.status == 200) { // 说明服务器响应一切正常                             // alert(xhr.responseText); // 得到响应结果，得到页面上面的结果，注意结果为字符串                             var msg = document.getElementById("msg");                             if (xhr.responseText == "true") {
                                     // msg.innerText = "该用户名已存在";                                 msg.innerHTML = "
          
           该用户名已存在";                             } else {                                 msg.innerHTML = "
           
            该用户名可以使用";                             }                         }                     }                 }                             // 建立一个连接                 xhr.open("get", "${pageContext.request.contextPath}/servlet/ckNameServlet?name=" + name + "&time=" + new Date().getTime());                 // 发送请求                 xhr.send(null);             }         }            
                 
                 用户名：
            
            
             
     密码：
我的GitHub地址：
我的博客园地址：
我的蚂蚁笔记博客地址：
【转载文章务必保留出处和署名，谢谢！】