JQuery AJAX 实例-优快云博客

本文链接：https://blog.youkuaiyun.com/unicorn00/article/details/3004508

1.此实例主要通过JQuery将提交到servlet,处理后将数据返回

AjaxServlet.java

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
public class AjaxServlet extends HttpServlet{
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       doGet(request, response);    
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try{
               response.setContentType("text/html;charset=GB2312");
               PrintWriter out=response.getWriter();
               String old = request.getParameter("name");
               if(old == null || old.length()==0){
                   out.println("用户名不能为空!");
               }else{
                   String name = old;
                   if(name.equals("unicorn")){
                       //4.和传统应用不同之处,这步需要将用户感兴趣的数据返回,而不是将一个新的页面发送给用户 
                       //写法没有变化,本质发生了改变 
                       out.println("用户名:"+name+"已经存在");
                   }else{
                       out.println("用户名:"+name+"尚未存在");
                   }
               }
           }catch(Exception e){
               e.printStackTrace();
           }
    }
}
index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>ajax用户名校验实例</title>
    <script type="text/javascript" src="js/jquery-1.2.6.js"></script>
    <script type="text/javascript" src="js/unicorn.js"></script>
</head>
<body>
    请输入用户名:<br/>
    <!-- ajax方式下不需要用form来提交数据-->
    <!-- ajax方式不需要name属性,但是要有id属性-->
    <input type="text" id="userName"/>
    <input type="button" value="校验" onclick="verify()" />
    <!-- 此div用于存放服务器返回信息,初始为空 -->
    <!-- id属性定义为了用dom方式找到某节点,进行操作-->
<div id="result"></div>
</body>
</html>

unicorn.js

//JQuery方式传送数据 
function verify(){
    $.get("AjaxServer?name="+$("#userName").val(),null,function (data){
        $("#result").html(data);
    });
}
//这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交换 
var xmlhttp;
function verify1(){
    //1.使用dom的方式获取文本框中的值 
    alert("haha");
    var userName = document.getElementById("userName").value;
    //2.创建XMLHTTPRequest对象 
    //这是XMLHTTPRequest对象使用中最复杂的一步 
    //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码 
    if(window.XmlHttpRequest){
        //针对FireFox,Mozillar,Opera,Safari,IE7,IE8 
        xmlhttp = new XMLHttpRequest();
        //针对某些特定版本的mozillar浏览器到BUG进行修正 
        if(xmlhttp.overrideMimeType){
            xmlhttp.overrideMimeType("text/xml");
        }
    }else if(window.ActiveXObject){
        //针对IE6,IE5.5,IE5 
        //两个可以用于创建XMLHTTPRequest对象的控件名,保存在一个js的数组中 
        //排在前面的版本较新 
        var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for(var i = 0;i<activexName.length;i++){
            try{
                //取出一个控件名进行创建,如果创建成功就终止循环 
                //如果创建失败,会抛出异常,然后可以继续循环,继续尝试创建 
                xmlhttp = new ActiveXObject(activexName[i]);
                break;
            }catch(e){
                
            }
        }
        
    }
    //确认XMLHTTPRequst对象创建成功 
    if(!xmlhttp){
        alert("XMLHttpRequest对象创建失败!!");
        return;
    }else{
        alert(xmlhttp);
    }
    //2.注册回调函数 
    //注册回调函数时,只需要函数名,不要加括号 
    //我们需要将函数名注册,如果加上括号,就会把函数的返回值注册上,这是错误的 
    xmlhttp.onreadystatechange = callback;
    //3.设置连接信息 
    //第一个参数表示http的请求方式,支持所有的http请求方式,主要是get和post 
    //第二个参数表示请求的url地址,get方式请求的参数也在url中 
    //第三个参数表示采用异步还是同步方式交互,true表示异步 
    xmlhttp.open("GET","AjaxServer?name="+userName,true);
    //4.发送数据,开始和服务器端进行交互 
    //同步方式下,send这句话会在服务器端数据回来后才执行完 
    //异步方式下,send这句话会立即完成执行 
    xmlhttp.send(null);
}
//回调函数 
function callback(){
    //判断对象的状态是否交互完成 
    if(xmlhttp.readyState==4){
     //判断http的交互是否成功 
        if(xmlhttp.status==200){
            //获取服务器端返回的数据 
            //获取服务器端输出的纯文本数据 
            var responseText = xmlhttp.responseText;
            //将数据显示在页面上 
            var divNode = document.getElementById("result");
            //设置元素节点中的html内容 
            divNode.innerHTML = responseText;
        }
    }
    
}