ajax课1 源码 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="./js/my.js"></script>
<script  src="./js/jquery-1.11.1.js"></script>
<script type="text/javascript">
    function showCity(proV){
        //根据选择的省份去后台查询对应的城市
        var xhr=getXhr();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                //nj:南京;yz:扬州
                var text=xhr.responseText;
                var arr=text.split(";");
                //["nj:南京","yz:扬州"]
                //清空上一次城市选项
                $("#city").html("");
                for(var i=0;i<arr.length;i++){
                    var value=arr[i].split(":")[0];
                    var htmlText=arr[i].split(":")[1];
                    //新疆option
                    var option=new Option(htmlText,value);
                    $("#city").append(option);
                }
            }
        }
        xhr.open('get','city.do?proV='+proV,true);
        xhr.send(null);
    
    }


</script>
</head>
<body>
    <select id="pro" onchange="showCity(this.value)">
            <option value="1">请选择</option>
            <option value="js">江苏</option>
            <option value="ah">安徽</option>        
     </select>
     <select id="city"></select>
</body>
</html>
package web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ActionServlet extends HttpServlet {


    public void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        //获取请求资源路径
        String uri=request.getRequestURI();
        //截取  /list
        String action=uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
        //设置返回的类型
        response.setContentType("text/html;charset=utf-8");
        //获取输出流
        PrintWriter out=response.getWriter();
        if("/checkUname".equals(action)){
        /*    //模拟服务器正在处理中。。。
            try {
                Thread.sleep(3000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }*/
            /*模拟服务器异常
             * if(true){
                throw new ServletException("有错啦---");
            }*/
            //接受用户传入的用户名，判断用户名是否一致
            String name=request.getParameter("uname");
            System.out.println(name);
            //假设zs已经被占用
            if("zs".equals(name)){
                out.print("用户名被占用");
            }else{
                out.print("用户名可以用");
            }
        }else if("/city".equals(action)){
            //获取页面传过来的省份
            String proV=request.getParameter("proV");
            if("1".equals(proV)){
                out.print("-1,请选择省份");
            }else if("js".equals(proV)){
                //返回江苏的城市
                out.print("nj:南京;yz:扬州");
            }else if("ah".equals(proV)){
                //返回安徽对应的城市
                out.print("hf:合肥;wh:芜湖");
            }
        }
        out.close();
    }

}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="./js/my.js"></script>
<script  src="./js/jquery-1.11.1.js"></script>
<script >
    var uflag=false;//默认用户名验证不合法
    var pflag=false;//默认密码验证不合法
    function check_uname_get(){
        //获取ajax对象
        var xhr=getXhr();
        //注册监听
        xhr.onreadystatechange=function (){
            //根据服务器返回的数据给页面做处理
            if(xhr.readyState==4){
                if(xhr.status==200){//服务器正常返回
                    var text=xhr.responseText;
                    //将text的内容显示在页面上
                    $("#name_msg").html(text);
                }else{//服务器返回有异常
                    $("#name_msg").html("服务器异常，请稍后重试。。。")
                }
            
            }else{//服务器没有返回
                    $("#name_msg").html("验证中，请稍后。。。")
            }
        }
        //初始化
        var url="checkUname.do?uname="+$("[name=uname]").val()+"&"+new Date().getTime();
        xhr.open('get',encodeURI(url),true);
        //真正发送请求
        xhr.send(null);
    }
    
    
    function check_uname_post(){
        //获取ajax对象
        var xhr=getXhr();
        //注册监听
        xhr.onreadystatechange=function (){
            //根据服务器返回的数据给页面做处理
            if(xhr.readyState==4){
            //服务器返回的结果显示在页面中
                if(xhr.status==200){//服务器正常返回
                    var text=xhr.responseText;
                    //将text的内容显示在页面上
                    $("#name_msg").html(text);
                    //如果服务器返回的内容为"用户名可用"
                    //用户名验证结果为true
                    if("用户名可用"==text){
                    uflag=true;
                    }else{
                    uflag=false;
                    }
                }else{//服务器返回有异常
                    $("#name_msg").html("服务器异常，请稍后重试。。。")
                }
            
            }else{
            //服务器没有返回
                    $("#name_msg").html("验证中，请稍后。。。")
            }
        }
        //初始化
        var url="checkUname.do";
        xhr.open('post',url,true);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //真正发送请求
       xhr.send("uname="+$("[name=uname]").val());
    
    
    }
    
    function check_pwd(v){
        //密码必须为6位的数字
        var reg=/^[0-9]{6}$/;
         pflag=reg.text(v);
        
    }
    
    //验证整个表单（必须用户名可用且密码合法）
    function checkForm(){
        return iflag&&pflag;
    }
</script>
</head>
<body>
    <form action="registe.do" method="post" onsubmit="return checkForm()">
        用户名：<input  name="uname"  onblur="check_uname_get()"/>
                <span id="name_msg" style="color:red"></span><br/>
        密码：<input type="password" name="pwd" onblur="check_pwd(this.value)"/>
              <span id="pwd_msg" style="color:red"></span><br/><br/>
        <input type="submit" value="注册"/>
        
    
    </form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用ajax对象发送请求</title>
<script type="text/javascript" src="./js/my.js"></script>

<script type="text/javascript">
    //1.获取ajax对象
    var xhr=getXhr();
    //2.设置监听器
    xhr.onreadystatechange=function(){
    //5.处理服务器返回的数据    
    //响应结束时获取服务器返回的数据
    if(xhr.readyState==4){
            var text=xhr.responseText;
            alert(text);
        }
    };
    //3.初始化
    xhr.open('get','checkUname.do',true);
    //4.真正发送 get方法传的就是null
    xhr.send(null);

</script>
</head>
<body>

</body>
</html>
function getXhr(){
        var xhr=null;
        if(window.XMLHttpRequest){//浏览器是否有ajax对象
            xhr=new XMLHttpRequest();
        }else{//低版本ie
            xhr=new ActiveXObject("Microsoft.XMLHttp");
        }
        return xhr;
    }
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function getXhr(){
        var xhr=null;
        if(window.XMLHttpRequest){//浏览器是否有ajax对象
            xhr=new XMLHttpRequest();
        }else{//低版本ie
            xhr=new ActiveXObject("Microsoft.XMLHttp");
        }
        alert(xhr);
    }

</script>
</head>
<body>
    <a onclick="getXhr()">获取ajax对象</a>
</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
    xmlns="http://java.sun.com/xml/ns/javaee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <servlet>
    <servlet-name>ActionServlet</servlet-name>
    <servlet-class>web.ActionServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>ActionServlet</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

 

posted @ 2018-06-14 18:15  阴翳公子  阅读(221)  评论(0)  编辑  收藏  举报