• 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>
  • 相关阅读:
    transient关键字详解
    大话设计模式之装饰模式
    springboot读取properties(yml)的几种常用方式
    springboot整合druid数据库连接池并开启监控
    初学js的穷举思想
    循环语句
    条件分支语句
    运算符
    案例(-)
    seo搜索引擎优化
  • 原文地址:https://www.cnblogs.com/yingyigongzi/p/9184394.html
Copyright © 2020-2023  润新知