java实现ajax的四种方法

第一种（最原生的那种，创建XmlHttpRequest对象）：

<script type="text/javascript">
      //创建XmlHttpRequest对象
      function createXmlHttpRequest(){
        if(window.XMLHttpRequest){//返回值为true时说明是新版本IE或其他浏览器
          return new XMLHttpRequest();
        }else{//返回值为false时说明是老版本IE浏览器（IE5和IE6）
          return new ActiveXObject("Microsoft.XMLHTTP");
        }
      }
      //Ajax设置回调函数
      function callBack(){
        if(XMLHttpRequest.readyState==4 && XMLHttpRequest.status==200){
          var data = XMLHttpRequest.responseText;
          if(data == "true"){
            $("#nameDiv").html("用户名已被使用");
          }else{
            $("#nameDiv").html("用户名可以使用");
          }
        }
      }
      
      function validate(){
        var name = $("name").val();
        if(name==null || name==""){
          $("#nameDiv").html("用户名不能为空");
        }else{
          //1. 创建XMLHttpRequest
          XMLHttpRequest = createXmlHttpRequest();
          //2. 设置回调函数
          XMLHttpRequest.onreadystatechange = callBack;
          //3. 初始化XMLHttpRequest组件
          
          var url = "userServlet?name="+name;//服务器端URL地址,name为用户名文本框获取的值
          XMLHttpRequest.open("GET",url,true);
          //4. 发送请求
          XMLHttpRequest.send(null);
          //上边使用的是get，下面使用的是post
          //var url = "userServlet";
          //XMLHttpRequest.open("POST",url,true);
          //XMLHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
          //var data = "name"+name;//需要发送的数据信息,name为用户名文本框获取的值
          //XMLHttpRequest.send(data);
        }
      }
  </script>

（下面三种方法，是对登录的一种检测，进行局部刷新，输出相对应的提示）
表单为：

<form > 
        <table>
            <tr>
                <td>用户名：</td>
                <td>
                    <input type="text" name="name" id="name" >
                </td>
                <td>
                    <div id="nameDiv" style="display: inline"></div>
                </td>
            </tr>
        </table>
    </form>

第二种（get方法）：

<script type="text/javascript">
    $(function(){
      $("#name").blur(function(){
        var name = $(this).val();
        //var name = this.value;
        if(name==null || name==""){
          $("#nameDiv").html("用户名不能为空");
        }else{
          $.get("userServlet","name="+name,callBack);
          //响应成功时的回调函数
          function callBack(data){
            if(data=="true"){
              $("#nameDiv").html("用户名已被使用");
            }else{
              $("#nameDiv").html("用户名可以使用");
            }
          }
        }
      });
    });
  </script>

第三种（post方法）：

<script type="text/javascript">
    $(function(){
      $("#name").blur(function(){
        var name = $(this).val();
        //var name = this.value;
        if(name==null || name==""){
          $("#nameDiv").html("用户名不能为空");
        }else{
          $.post("userServlet","name="+name,callBack);
          //响应成功时的回调函数
          function callBack(data){
            if(data=="true"){
              $("#nameDiv").html("用户名已被使用");
            }else{
              $("#nameDiv").html("用户名可以使用");
            }
          }
        }
      });
    });
  </script>

第四种：

<script type="text/javascript">
    $(function(){
      $("#name").blur(function(){
        var name = $(this).val();
        //var name = this.value;
        if(name==null || name==""){
          $("#nameDiv").html("用户名不能为空");
        }else{
          $.ajax({
            "url"   :"userServlet", //要提交的URL路径
            "type"    :"POST",    //发送请求的方式
            "data"    :"name="+name,  //要发送到服务器的数据
            "success" :callBack   //响应成功后要执行的代码
          });
          //响应成功时的回调函数
          function callBack(data){
            if(data=="true"){
              $("#nameDiv").html("用户名已被使用");
            }else{
              $("#nameDiv").html("用户名可以使用");
            }
          }
        }
      });
    });
  </script>