AJAX异步请求

Asynchronous JavaScript And XML:异步的 JavaScript 和 XML
AJAX 不是新的编程,指的是⼀种交互⽅式,异步加载,客户端和服务器的数据交互更新在局部⻚⾯的技术,不需要刷新整个⻚⾯(局部刷新)

优点:
1、局部刷新,效率更⾼
2、⽤户体验更好
基于 jQuery 的 A JAX

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/1/21 0021
  Time: 16:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>test</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <!--不能⽤表单提交请求,改⽤ jQuery ⽅式动态绑定事件来提交,Servlet 不能跳转到 JSP,只能将数据返回-->
    <script type="text/javascript">
        $(function(){
            var btn=$("#btn");<!--btn变量是btn标签-->
            btn.click(function(){<!--btn的点击事件监听函数-->
                $.ajax({
                    url:'/test',<!--action="/test"-->
                    type:'post',<!--method="post"-->
                    data:'id=1',<!--?id=1-->
                    dataType:'json',<!--servlet传过来的数据类型-->
                    success:function(data){<!--success实现函数,data是servlet传过来的参数-->
                        $("#id").val(data.id);
                        $("#name").val(data.name);
                        $("#score").val(data.score);
                    }
                })
            });
        })
    </script>
</head>
<body>
        编号:<input id="id" type="text" ><br/>
        姓名:<input id="name" type="text" ><br/>
        成绩:<input id="score" type="text" ><br/>
        <input id="btn" type="button" value="提交"/>

</body>
</html>

不能⽤表单提交请求,改⽤ jQuery ⽅式动态绑定事件来提交。
Servlet 不能跳转到 JSP,只能将数据返回。

package com.southwind.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/test")
public class TestServlet extends HttpServlet {
 @Override
 protected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {
	 String id = req.getParameter("id");
	 try {
	 Thread.sleep(3000);
	 } catch (InterruptedException e) {
	 e.printStackTrace();
	 }
	 String str = "Hello World";
	 resp.getWriter().write(str);
 }
}

传统的 WEB 数据交互 VS AJAX 数据交互

客户端请求的⽅式不同:
传统,浏览器发送同步请求 (form、a)
AJAX,异步引擎对象发送异步请求

服务器响应的⽅式不同:
传统,响应⼀个完整 JSP ⻚⾯(视图)
AJAX,响应需要的数据

客户端处理⽅式不同:
传统:需要等待服务器完成响应并且重新加载整个⻚⾯之后,⽤户才能进⾏后续的操作
AJAX:动态更新⻚⾯中的局部内容,不影响⽤户的其他操作
AJAX异步请求

基于 jQuery 的 AJAX 语法

$.ajax({属性})

常⽤的属性参数:

url:请求的后端服务地址

type:请求⽅式,默认 get

data:请求参数

dataType:服务器返回的数据类型,text/json

success:请求成功的回调函数

error:请求失败的回调函数

complete:请求完成的回调函数(⽆论成功或者失败,都会调⽤)

JSON

JavaScript Object Notation,⼀种轻量级数据交互格式,完成 js 与 Java 等后端开发语⾔对象数据之间的转换
客户端和服务器之间传递对象数据,需要⽤ JSON 格式。

使用JSON需要导入,js类型不用配置,在Webapp下创建文件夹lib(不是WEB-INF下)
AJAX异步请求
实例:创建一个可选择省->市->区的选择框
要求改变省时,城市也会改变,改变市时,区也会改变
结果图:
AJAX异步请求
jsp中:

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/1/22 0022
  Time: 16:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<!--$()工厂函数,#city,this是dom节点,而change(),val()方法是jquery包中的方法,所以用$()把dom节点转为jquery类型,可以调用jquery中的方法-->
<head>
    <title>选择城市页面</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //修改省
            $("#province").change(function (){
                var id = $(this).val();//选中的省份赋给id对象
                //调用ajax异步请求传送信息
                $.ajax({
                    url:"/location",
                    type:"post",
                    data:"id="+id+"&type=province",//选择的时哪个省份,把编号发过去
                    dataType:"JSON",//返回的参数类型是对象,调用JSON
                    success:function(data){//当成功收到servlet传到页面上的信息时调用success
                        //===========改变城市============
                        var content = "";
                        var cities = data.cities;
                        for(var i=0;i<cities.length;i++){//省下的城市
                            content += "<option>"+cities[i]+"</option>";
                        }
                        $("#city").html(content);//用content替换#area标签的内容
                        //===========改变区==============
                        content = "";
                        var areas = data.areas;
                        for(var i=0;i<areas.length;i++){//城市下的区
                            content += "<option>"+areas[i]+"</option>";
                        }
                        $("#area").html(content);//用content替换#area标签的内容
                    }
                });
            });
            //修改城市
           $("#city").change(function(){
              var id = $(this).val();//把#city城市当前选中的value赋给id对象
               //调用ajax异步请求传送信息
              $.ajax({
                  url:"/location",
                  type:"POST",
                  data:"id="+id+"&type=city", //选择的是哪个城市,把城市编号发过去
                  dataType:"JSON",//返回的参数类型,是对象调用JSON,文本调用text
                  success:function (data){//当成功收到servlet传到页面上的信息时调用success
                      //用content存取新的地区option标签内容
                      var content = "";
                      for (var i=0;i<data.length;i++){
                          content += "<option>"+data[i]+"</option>"
                      }
                      //用content替换#area标签的内容
                      $("#area").html(content);
                  }
              });
           });
        });
    </script>
</head>
<body>
    省:<select id="province">
        <option value="陕西省">陕西省</option>
        <option value="河南省">河南省</option>
        <option value="江苏省">江苏省</option>
    </select>
    城市:<select id="city">
        <option value="西安市">西安市</option>
        <option value="宝鸡市">宝鸡市</option>
        <option value="渭南市">渭南市</option>
    </select>
    区:<select id="area">
        <option>雁塔区</option>
        <option>莲湖区</option>
        <option>新城区</option>
    </select>
</body>
</html>

创建实体属性Location存放集合元素

package com.southwind.entity;

import java.util.List;

public class Location {
    private List<String> cities;//存储某个省中的城市
    private List<String> areas;//存储某个城市中的区
    //得到城市
    public List<String> getCities() {
        return cities;
    }
    //存入城市
    public void setCities(List<String> cities) {
        this.cities = cities;
    }
    //得到区
    public List<String> getAreas() {
        return areas;
    }
    //存入区
    public void setAreas(List<String> areas) {
        this.areas = areas;
    }
}

servlet中实现具体代码

package com.southwind.servlet;

import com.southwind.entity.Location;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@WebServlet("/location")
public class LocationServlet extends HttpServlet {
    private static Map<String,List<String>> provinceMap;//一个省对应多个城市
    private static Map<String, List<String>> cityMap;//一个城市对应多个区

    static {
        cityMap = new HashMap<>();
        List<String> areas = new ArrayList<>();
        //--------------------省-城市选择--------------
        provinceMap = new HashMap<>();
        List<String> cities = new ArrayList<>();
        cities.add("⻄安市");
        cities.add("宝鸡市");
        cities.add("渭南市");
        provinceMap.put("陕⻄省",cities);
        cities = new ArrayList<>();
        cities.add("郑州市");
        cities.add("洛阳市");
        cities.add("开封市");
        provinceMap.put("河南省",cities);
        cities = new ArrayList<>();
        cities.add("南京市");
        cities.add("苏州市");
        cities.add("南通市");
        provinceMap.put("江苏省",cities);
        //------------------城市-区选择-----------------
        //--------陕西省
        //⻄安
        areas.add("雁塔区");
        areas.add("莲湖区");
        areas.add("新城区");
        cityMap.put("⻄安市",areas);
        //宝鸡
        areas = new ArrayList<>();
        areas.add("陈仓区");
        areas.add("渭宾区");
        areas.add("新城区");
        cityMap.put("宝鸡市",areas);
        //渭南
        areas = new ArrayList<>();
        areas.add("临渭区");
        areas.add("⾼新区");
        cityMap.put("渭南市",areas);

        //--------河南省
        //郑州
        areas = new ArrayList<>();
        areas.add("郑州A区");
        areas.add("郑州B区");
        cityMap.put("郑州市",areas);
        //洛阳
        areas = new ArrayList<>();
        areas.add("洛阳A区");
        areas.add("洛阳B区");
        cityMap.put("洛阳市",areas);
        //开封
        areas = new ArrayList<>();
        areas.add("开封A区");
        areas.add("开封B区");
        cityMap.put("开封市",areas);

        //--------江苏省
        //南京市
        areas = new ArrayList<>();
        areas.add("南京A区");
        areas.add("南京B区");
        cityMap.put("南京市",areas);
        //苏州市
        areas = new ArrayList<>();
        areas.add("苏州A区");
        areas.add("苏州B区");
        cityMap.put("苏州市",areas);
        //南通市
        areas = new ArrayList<>();
        areas.add("南通A区");
        areas.add("南通B区");
        cityMap.put("南通市",areas);
    }


    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String type = req.getParameter("type");//type为change的类型,是省还是城市
        resp.setCharacterEncoding("UTF-8");
        String id = req.getParameter("id");//id参数是传递过来的省/城市,由id知道该调用哪几个下属城市/区
        switch (type){
            case "city":
                List<String> areas = cityMap.get(id);//把map中id对应的区集合赋给areas对象
                JSONArray jsonArray = JSONArray.fromObject(areas);//将JAVA对象转换为JSON格式
                resp.getWriter().write(jsonArray.toString());//返回jsonArray对象,被jsp的success接收为data
                break;
            case "province":
                List<String> cities = provinceMap.get(id);//假设点击的是河南省,cities={郑州,洛阳,开封}
                String city = cities.get(0);//得到河南省的第一个城市郑州
                List<String> cityAreas = cityMap.get(city);//得到郑州市对应的区集合{郑州A区,郑州B区}
                //把得到的信息存储到location中
                Location location = new Location();
                location.setCities(cities);//添加{郑州,洛阳,开封}
                location.setAreas(cityAreas);//添加{郑州A区,郑州B区}
                //假设点击河南省,location中存储的信息是{郑州,洛阳,开封},{郑州A区,郑州B区}
                //自动显示  河南省-郑州市-郑州A区,接下来如果换成洛阳市则跳转到选择语句case "city":
                JSONObject jsonObject = JSONObject.fromObject(location);//将JAVA对象转换为JSON格式
                resp.getWriter().write(jsonObject.toString());//返回jsonObject对象,被jsp的success接收为data
                break;
        }

//        resp.setCharacterEncoding("UTF-8");
//        String id = req.getParameter("id");
//        String type = req.getParameter("type");
//        List<String> result = null;//创建一个能够存储对应城市/区的集合
//        switch (type){
//            case "province":
//                //得到对应编号的城市集合
//                result = provinceMap.get(id);
//                break;
//            case "city":
//                //得到对应编号的区集合
//                result = cityMap.get(id);
//                break;
//        }
//        JSONArray jsonArray = JSONArray.fromObject(result);//将JAVA对象转换为JSON格式
//        //把得到的城市/区集合返回去
//        resp.getWriter().write(jsonArray.toString());
    }

}

上一篇:中值随思


下一篇:springcloud学习第二节(微服务子模块创建)