Ajax（初识到实战）

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

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

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

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

简易的Ajax实现：

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

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

模拟服务端：

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>Title</title>
  5. </head>
  6. <body>
  7.         <%
  8.             String name=request.getParameter("name");
  9.             byte[]bytes=name.getBytes("iso-8859-1");
  10.             name=new String(bytes,"utf-8");
  11.             boolean flag=true;
  12.             if(name.indexOf("lht")>=0){
  13.                 flag=false;
  14.             }
  15. //            response.setContentType("text/html;charset=utf-8");
  16.             if(flag){
  17.                 out.println("成功");
  18.             }else{
  19.                 out.println("用户名重复");
  20.             }
  21.         %>
  22. </body>
  23. </html>

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

  1. <%--
  2.   Created by IntelliJ IDEA.
  3.   User: Administrator
  4.   Date: 2019/07/19
  5.   Time: 14:23
  6.   To change this template use File | Settings | File Templates.
  7. --%>
  8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  9. <html>
  10. <head>
  11.     <title>Title</title>
  12.     <script type="text/javascript">
  13.         var xhr;
  14.         function getInfo(){
  15.             //接收区号
  16.             var code = document.getElementById("code").value;
  18.             //判断用户名是否可用（Ajax 服务器端验证）
  19.             //1.创建XMLHttpRequest对象
  20.             createXMLHttpRequest();
  22.             //2.和服务器端建立好连接
  23.             xhr.open("post","/myAjax2/servlet/CodeServlet");
  24.             xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  25.             //3.指定回调函数
  27.             xhr.onreadystatechange = function(){
  28.                 if(xhr.readyState ==4 ){
  29.                     if(xhr.status ==200){
  30.                         //获取服务器的返回值
  31.                         var result = xhr.responseText;
  33.                         //将服务器端返回值输出
  34.                         //alert(result);
  35.                         var arr = result.split(",");
  36.                         document.getElementById("province").value =arr[0];
  37.                         document.getElementById("city").value=arr[1];
  39.                     }else{ //404  500
  40.                         alert(xhr.status+ xhr.statusText);
  41.                     }
  42.                 }
  43.             }
  44.             //4.真正发送出请求
  45.             //xhr.send(null);
  46.             xhr.send("code="+code);
  48.         }
  49.         function createXMLHttpRequest(){
  50.             if(window.ActiveXObject){//ie  6,7,8  9,10,11
  51.                 //
  52.                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
  53.             }else{//other
  54.                 xhr = new XMLHttpRequest();
  55.             }
  56.         }
  58.     </script>
  59. </head>
  60. <body>
  61. <form action="">
  62.     区号<input type="text" name="code" id="code" onblur="getInfo()"><br>
  63.     省份<input type="text" name="province" id="province" ><br>
  64.     城市<input type="text" name="city" id="city"><br>
  65.     <input type="submit" value="提交">
  66. </form>
  68. </body>
  69. </html>

服务端：

  1. package com.bjsxt.servlet;
  3. import javax.servlet.ServletException;
  4. import javax.servlet.http.HttpServlet;
  5. import javax.servlet.http.HttpServletRequest;
  6. import javax.servlet.http.HttpServletResponse;
  7. import java.io.IOException;
  8. import java.util.HashMap;
  9. import java.util.Map;
  11. public class CodeServlet extends HttpServlet {
  12.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  13.         this.doGet(request,response);
  14.     }
  16.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  17.         //1.接收区号
  18.         String code = request.getParameter("code");
  20.         //2.根据区号获取省份和城市
  21.         Map<String,String> map = new HashMap<String,String>();
  22.         map.put("010","北京,北京");
  23.         map.put("0351","山西,太原");
  24.         map.put("0311","河北,石家庄");
  25.         map.put("0451","黑龙江,哈尔滨");
  26.         map.put("024","辽宁,沈阳");
  27.         String result = map.get(code);
  28.         if(result == null){
  29.             result = "error1,error2";
  30.         }
  32.         //3.返回结果
  33.         response.setContentType("text/html;charset=utf-8");
  34.         response.getWriter().println(result);
  36.     }
  37. }

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

只需要修改jsp页面部分：

post请求：

  1. <script>
  2.         $(function(){
  3.             $("#code").blur(function(){
  4.                 var code=$("#code").val();
  5.                 $.post("/myAjax/servlet/CodeServlet",{"code":code},function (result) {
  6.                     var arr=result.split(",");
  7.                     $("#province").val(arr[0]);
  8.                     $("#city").val(arr[1]);
  9.                 })
  10.             })
  11.         })
  12.     </script>

get请求：

  1. <script>
  3.         $(function(){
  4.             $("#code").blur(function(){
  6.                 var code=$("#code").val();
  7.                 $.get("/myAjax/servlet/CodeServlet",{"code":code},function(result){
  8.                     var arr=result.split(",");
  9.                         $("#province").val(arr[0]);
  10.                         $("#city").val(arr[1]);
  11.                 })
  12.             })
  13.         })
  14.     </script>

再进行简化

  1. <script>
  2.         $(function(){
  3.             $("#code").blur(function(){
  5.                 var code=$("#code").val();
  7.                 $.ajax({
  8.                     url:"/myAjax/servlet/CodeServlet",
  9.                     type:"post",
  10.                     data:{"code":code},
  11.                     success:function(result){
  12.                         var arr=result.split(",");
  13.                         $("#province").val(arr[0]);
  14.                         $("#city").val(arr[1]);
  15.                     }
  16.                 })
  17.             })
  18.         })
  19.     </script>

JSON的几种格式练习：

  1. <script>
  2.         $(function(){
  3.             //JSON格式1：json对象
  4.             var person = {"name":"王五","age":25,"wife":null};//JSON对象
  5.             $("#msg").append(person.name)
  7.             //JSON格式2：JSON数组
  8.             var arr= ["HTML","CSS","JavaScript"];
  9.             $("#msg2").append(arr[0]+"<br>")
  10.                 .append(arr[1]+"<br>")
  11.                 .append(arr[2]+"<br>");
  12.             //JSON格式3：JSON对象数组
  13.             var users=[{"id":1,"username":"admin",password:"admin"},
  14.                 {"id":2,"username":"鹿晗","password":"luhan"},
  15.                 {"id":3,"username":"吴京",password:"wujing"}
  16.             ];
  17.             $("#msg3").append(users[0].id);
  18.             $("#msg3").append(users[1].username)
  19.             $("#msg3").append(users[0].password)
  21.             //JSON格式4：不规则的JSON
  22.             var china ={name:"中国",
  23.                 provinces:[
  24.                     {name:"黑龙江省",cities:{city:["哈尔滨","齐齐哈尔"]}},
  25.                     { name:"河北省",cities:{city:["石家庄","张家口","承德"]}}
  26.                 ]
  27.             };
  28.             $("#msg4").append(china.name);
  29.             $("#msg4").append(china.provinces[0].name);
  30.             $("#msg4").append(china.provinces[1].cities.city[2]);
  31.             //JSON对象和JSON字符串之间的转换
  32.             //var person2 = {"name":"王五","age":25,"wife":null};
  33.             var person2 = '{"name":"王五","age":25,"wife":null}';
  34.             alert("person2str"+person2);
  35.             eval("var p="+person2);
  36.             alert(p);
  37.             //JSON STR ---JSON OBJ
  38.             //var person3 = JSON.parse(person2);
  39.             eval("var person3="+person2);
  40.             //var person3 = eval(person2);
  41.             //var person3 = eval("("+person2+")");
  42.             //alert(eval("3*4+2"));
  43.             alert(person3.name);
  44.             //json obj ----json str
  45.             var person4 = JSON.stringify(person3);
  46.             alert(person4);
  47.         })
  48.     </script>

JSON，Ajax三级菜单：

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>Title</title>
  5.     <style type="text/css">
  6.         select{
  7.             width:300px;
  8.             height:30px;
  9.         }
  10.         #showdiv{
  11.             width:920px;
  12.             margin:auto;
  13.             margin-top:200px;
  14.         }
  15.     </style>
  17.     <script type="text/javascript" src="/myAjax/jq/jquery-1.9.1.js"></script>
  18.     <script>
  19.         $(function(){
  20.             $.ajax({
  21.                 type:"get",
  22.                 url:"/myAjax/servlet/AreaServlet?parentId=0",
  23.                 success:function (result) {
  24.                     eval("var arr="+result);
  25.                     str="";
  26.                     for(var i=0;i<arr.length;i++) {
  27.                         str += '<option value="' + arr[i].areaId + '" >' + arr[i].areaName + '</option>';
  29.                     }
  30.                     $("#province").html(str);
  31.                     getCity();
  32.                 }
  33.             })
  34.         })
  36.         function getCity() {
  37.             var areaId = $("#province").val();
  38.             $.ajax({
  39.                 type: "post",
  40.                 data: {"parentId": areaId},
  41.                 url: "/myAjax/servlet/AreaServlet",
  42.                 success: function (result) {
  43.                     eval("var arr=" + result);
  44.                     str = "";
  45.                     for (var i = 0; i < arr.length; i++) {
  46.                         str += '<option value="' + arr[i].areaId + '">' + arr[i].areaName + '</option>';
  48.                     }
  49.                     $("#city").html(str);
  50.                     getCounty();
  51.                 }
  52.             })
  53.         }
  55.         function getCounty(){
  56.             var areaId=$("#city").val();
  57.             $.ajax({
  58.                 url:"/myAjax/servlet/AreaServlet",
  59.                 type:"post",
  60.                 data:{"parentId":areaId},
  61.                 success:function(result){
  62.                     eval("var arr="+result);
  63.                     str="";
  64.                     for(var i=0;i<arr.length;i++){
  65.                         str+='<option value="'+arr[i].areaId+'">'+arr[i].areaName+'</option>';
  67.                     }
  68.                     $("#county").html(str);
  70.                 }
  71.             })
  72.         }
  73.     </script>
  74. </head>
  75. <body>
  76.     <div id="showdiv">
  77.         <select name="province" id="province" onchange="getCity()">
  79.         </select>
  80.         <select name="city" id="city" onchange="getCounty()">
  82.         </select>
  83.         <select name="county" id="county">
  84.         </select>
  85.     </div>
  86. </body>
  87. </html>

Servlet

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

发表评论

表情：
评论列表 （有 0 条评论，191人围观）

还没有评论，来说两句吧...

相关阅读

    相关 初识jQuery的ajax

        前面有一篇博文，写的是ajax请求时，[返回json字符串和json数组][json_json]的场景，今天，将原始的ajax修改为jQuery版的ajax。

    亦凉亦凉/ 0 赞/ 351 阅读

    相关 Ajax初识

    1.Ajax简介 异步javascript和xml（JSON） Ajax属于客户端和服务端交互的一项技术 ![这里写图片描述][SouthEast] 原有交互模式

    旧城等待，旧城等待，/ 0 赞/ 288 阅读

    相关 初识Ajax

    一. 概述 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一...

    灰太狼灰太狼/ 0 赞/ 654 阅读