AJAX学习（5步法（post,get））

AJAX学习（五步法（post,get））
//js部分
function verify(){
    var username=document.getElementById("username").value;

//=========================================================
//1.创建XMLHttpRequest对象
      //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码

if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest() ;
        //针对某些特定版本mozillar浏览器的BUG进行修正
        if(xhr.overrideMimeType){
            xhr.overrideMimeType("text/xml");
        }
    }else if(ActiveXObject){
      var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for(var i=0;i<activeName.length;i++){
            try{
                xhr =new ActiveXObject(activeName(i));
                break;
            }catch(e){}
        }
    }
   //2：注册回调函数
   xhr.onreadystatechange=callback;

//3。设置连接信息

//提交分get : post
/* xhr.open("GET","AJAXServer?username="+username,true);
    xhr.send(null);*/

xhr.open("POST","AJAXServer",true);
//POST方式需要自己设置http的请求头
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送数据，开始和服务器端进行交互
    //同步方式下，send这句话会在服务器段数据回来后才执行完
    //异步方式下，send这句话会立即完成执行
    xhr.send("username="+username);

}

//回调函数
function callback(){
//判断对象的状态是交互完成
      if(xhr.readyState==4){
//判断http的交互是否成功
          if(xhr.status==200){

              var resultNode=document.getElementById("result");
              resultNode.innerHTML=xhr.responseText;
          }
      }

}
//==============================================

//用jequery   可简单的写成
function verify(){
    var username=$("#username").val();
    alert(username);
    $.get("AJAXServer?username="+username,null,callback);
    // $.post("AJAXServer","username="+username,callback);
}
function callback(data){
    $("#result").html(data);
}

//服务器部分：======================================================
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;
import java.net.URLDecoder;
public class AJAXServer extends HttpServlet{
    protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        doGet(httpServletRequest, httpServletResponse);
    }

    protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        try{
            httpServletResponse.setContentType("text/html;charset=utf-8");
            PrintWriter out = httpServletResponse.getWriter();
            //1.取参数
           httpServletRequest.setCharacterEncoding("UTF-8");
            String old = httpServletRequest.getParameter("username");
           // System.out.print("|"+old+"|");

        // String name = new String(old.getBytes("iso8859-1"),"UTF-8");

            //2.检查参数是否有问题
            if(old == null || old.length() == 0){
                out.println("用户名不能为空");
            } else{
                 byte[] by = old.getBytes("ISO8859-1");
                String name = new String(by,"UTF-8");
                System.out.print("|"+name+"|");
                //String name = URLDecoder.decode(old,"utf-8");
                //3.校验操作
//                String name = old;
                if(name.equals("ygl")){
                    //4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段，而不是将一个新的页面发送给用户
                    //写法没有变化，本质发生了改变
                    out.println("用户名[" + name + "]已经存在，请使用其他用户名, " + temp);
                } else{
                    out.println("用户名[" + name + "]尚未存在，可以使用该用户名注册, " + temp);
                }
            }
        } catch(Exception e){
            e.printStackTrace();
        }
    }
}

//html部分=======================================
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jslib/jquery-1.3.2.js"></script>
    <script type="text/javascript"src="jslib/verify.js"></script>
</head>
<body>
用户名:<input type="text" id="username"/>
<br/>
<input type="button" value="校验" onclick="verify()">
<div id="result"></div>

</body>
</html>

AJAX学习（5步法（post,get））

相关推荐