Ajax（初识到实战）

àì夳堔傛蜴生んèń 2024-04-17 06:26 9阅读 0赞

**在说Ajax前，我们可以考虑一下注册页面：**

**没有Ajax的时候，注册页面如果需要判断用户是否存在，需要提交表单的时候才可以知道自己的用户名有没有重复，如果网速很慢，在提交表单的时候，咱们什么都干不了。**

**有了Ajax，在注册的时候，输入完一个用户名，在输别的选项的时候，右边就能够提示我们用户名已经存在或者成功了，看上去只是单纯的实现了提示，其实底层就是在提交表单前，便能够访问数据库，判断我们输入的信息和数据库信息是否重复，这个就是Ajax神奇的地方。Ajax不仅可以写在html页面也能够写在jsp页面。**

### **简易的Ajax实现：** ###

网页（模拟注册界面，只有用户名，使用Ajax我们需要导入jq包）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
            function checkName(){
                //接收用户名
                var name = document.getElementById("name").value;
    
                //判断用户名长度是否大于6（JavaScript、jQuery 客户端验证）
                if(name == null || name.length <=6){
                    document.getElementById("nametip").innerHTML="用户名长度必须大于6";
                    return;
                }
    
                //判断用户名是否可用（Ajax 服务器端验证）
                //1.创建XMLHttpRequest对象
                var xhr = new XMLHttpRequest();
                //2.和服务器端建立好连接
                xhr.open("get","example1.jsp?name="+name);
                //3.指定回调函数
                xhr.onreadystatechange = function(){
                    //获取服务器的返回值
                    var result = xhr.responseText;
    
                    //将服务器端返回值输出
                    document.getElementById("nametip").innerHTML = result;
                }
    
                //4.真正发送出请求
                xhr.send(null)
    
            }
        </script>
    </head>
    <body>
    <form action=""  method="post"  >
        姓名1<input type="text" name="name" id="name" onblur="checkName()"><span id="nametip"></span>   <br>
        密码2<input type="text" name="pwd" id="pwd"><br>
        密码3<input type="text" name="repwd" id="repwd"><br>
        <input type="submit" value="提交">
    </form>
    
    </body>
    </html>

模拟服务端：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
    </head>
    <body>
            <%
                String name=request.getParameter("name");
                byte[]bytes=name.getBytes("iso-8859-1");
                name=new String(bytes,"utf-8");
                boolean flag=true;
                if(name.indexOf("lht")>=0){
                    flag=false;
                }
    //            response.setContentType("text/html;charset=utf-8");
                if(flag){
                    out.println("成功");
                }else{
                    out.println("用户名重复");
                }
            %>
    </body>
    </html>

### 练习二：根据区号 判断出省份和城市： ###

<%--
      Created by IntelliJ IDEA.
      User: Administrator
      Date: 2019/07/19
      Time: 14:23
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
        <script type="text/javascript">
            var xhr;
            function getInfo(){
                //接收区号
                var code = document.getElementById("code").value;
    
                //判断用户名是否可用（Ajax 服务器端验证）
                //1.创建XMLHttpRequest对象
                createXMLHttpRequest();
    
                //2.和服务器端建立好连接
                xhr.open("post","/myAjax2/servlet/CodeServlet");
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                //3.指定回调函数
    
                xhr.onreadystatechange = function(){
                    if(xhr.readyState ==4 ){
                        if(xhr.status ==200){
                            //获取服务器的返回值
                            var result = xhr.responseText;
    
                            //将服务器端返回值输出
                            //alert(result);
                            var arr = result.split(",");
                            document.getElementById("province").value =arr[0];
                            document.getElementById("city").value=arr[1];
    
                        }else{ //404  500
                            alert(xhr.status+ xhr.statusText);
                        }
                    }
                }
                //4.真正发送出请求
                //xhr.send(null);
                xhr.send("code="+code);
    
            }
            function createXMLHttpRequest(){
                if(window.ActiveXObject){//ie  6,7,8  9,10,11
                    //
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }else{//other
                    xhr = new XMLHttpRequest();
                }
            }
    
        </script>
    </head>
    <body>
    <form action="">
        区号<input type="text" name="code" id="code" onblur="getInfo()"><br>
        省份<input type="text" name="province" id="province" ><br>
        城市<input type="text" name="city" id="city"><br>
        <input type="submit" value="提交">
    </form>
    
    </body>
    </html>

服务端：

package com.bjsxt.servlet;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.util.HashMap;
    import java.util.Map;
    
    public class CodeServlet extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doGet(request,response);
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //1.接收区号
            String code = request.getParameter("code");
    
            //2.根据区号获取省份和城市
            Map<String,String> map = new HashMap<String,String>();
            map.put("010","北京,北京");
            map.put("0351","山西,太原");
            map.put("0311","河北,石家庄");
            map.put("0451","黑龙江,哈尔滨");
            map.put("024","辽宁,沈阳");
            String result = map.get(code);
            if(result == null){
                result = "error1,error2";
            }
    
            //3.返回结果
            response.setContentType("text/html;charset=utf-8");
            response.getWriter().println(result);
    
        }
    }

### 练习三：优化练习二的代码： ###

只需要修改jsp页面部分：

**post请求：**

**get请求：**

再进行简化

### JSON的几种格式练习： ###

### JSON，Ajax三级菜单： ###

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
        <style type="text/css">
            select{
                width:300px;
                height:30px;
            }
            #showdiv{
                width:920px;
                margin:auto;
                margin-top:200px;
            }
        </style>
    
        <script type="text/javascript" src="/myAjax/jq/jquery-1.9.1.js"></script>
        <script>
            $(function(){
                $.ajax({
                    type:"get",
                    url:"/myAjax/servlet/AreaServlet?parentId=0",
                    success:function (result) {
                        eval("var arr="+result);
                        str="";
                        for(var i=0;i<arr.length;i++) {
                            str += '<option value="' + arr[i].areaId + '" >' + arr[i].areaName + '</option>';
    
                        }
                        $("#province").html(str);
                        getCity();
                    }
                })
            })
    
            function getCity() {
                var areaId = $("#province").val();
                $.ajax({
                    type: "post",
                    data: {"parentId": areaId},
                    url: "/myAjax/servlet/AreaServlet",
                    success: function (result) {
                        eval("var arr=" + result);
                        str = "";
                        for (var i = 0; i < arr.length; i++) {
                            str += '<option value="' + arr[i].areaId + '">' + arr[i].areaName + '</option>';
    
                        }
                        $("#city").html(str);
                        getCounty();
                    }
                })
            }
    
            function getCounty(){
                var areaId=$("#city").val();
                $.ajax({
                    url:"/myAjax/servlet/AreaServlet",
                    type:"post",
                    data:{"parentId":areaId},
                    success:function(result){
                        eval("var arr="+result);
                        str="";
                        for(var i=0;i<arr.length;i++){
                            str+='<option value="'+arr[i].areaId+'">'+arr[i].areaName+'</option>';
    
                        }
                        $("#county").html(str);
    
                    }
                })
            }
        </script>
    </head>
    <body>
        <div id="showdiv">
            <select name="province" id="province" onchange="getCity()">
    
            </select>
            <select name="city" id="city" onchange="getCounty()">
    
            </select>
            <select name="county" id="county">
            </select>
        </div>
    </body>
    </html>

Servlet

package com.bjsxt.servlet;
    
    import com.bjsxt.dao.AreaDao;
    import com.bjsxt.entity.Area;
    import com.google.gson.Gson;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.util.List;
    
    public class AreaServlet extends HttpServlet {
        @Override
        protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            int parentId=Integer.parseInt(request.getParameter("parentId"));
            //查询某个id的地区，封装到areaList
            AreaDao areaDao=new AreaDao();
            List<Area>areaList=areaDao.getAreaInfo(parentId);
            //Gson将集合转换为Json字符串
            Gson gson=new Gson();
            String str=gson.toJson(areaList);
            //解决响应中文乱码的问题
            response.setContentType("text/html;charset=utf-8");
            response.getWriter().println(str);
        }
    }