JavaWeb之Ajax&json

最新推荐文章于 2024-06-08 11:09:56 发布

Williamsgogogo

最新推荐文章于 2024-06-08 11:09:56 发布

阅读量254

点赞数 1

分类专栏： javaWeb 文章标签： ajax js

本文链接：https://blog.csdn.net/tysearch/article/details/117408098

版权

javaWeb 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JavaWeb之Ajax&json

一、ajax
二、json
三、省市联动

一、ajax

1.1 ajax概述

ajax(Asynchronous JavaScript and XML) 异步的JavaScript 和 XML，是指一种创建交互式、快速动态网页应用的网页开发技术，通过在后台与服务器进行少量数据交换 , 无需重新加载整个网页的情况下，能够更新部分网页的技术。

ajax可以在页面进行局部刷新时完成和后台的数据交互。

1.2 同步与异步

同步：

当浏览器发送请求之后，在服务器处理请求时，浏览器处于同步等待状态，不能做其他的事情
当请求执行完成，浏览器处理响应时，可能会出现页面跳转（转发，重定向）

异步：

当浏览器发送请求之后，在服务器处理请求时，浏览器不受影响，可以执行其他操作
当服务器处理完成请求之后，把数据响应回浏览器采用的方式只能是：用流输出

1.3 原生ajax

在这里插入图片描述
原生ajax的核心对象是XmlHttpRequest

原生ajax执行过程：

打开和服务器的连接：open(请求的方式,请求的地址)
真正发送请求：send()
处理服务器响应：onreadystatechange()
处理时机：

执行状态为4
响应状态为200

原生ajax代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script>
       
function btnClick(){
         //1.创建核心对象XMLHttpRequest
        let xmlhttp = null;
        if (window.XMLHttpRequest) {// code for Firefox, Opera, IE7, etc.
            xmlhttp = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.设置回来的地址(回调函数)
        xmlhttp.onreadystatechange = function () {
            //当响应回来的时候,且正常响应结束的时候,才处理结果
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //获取响应的结果
                alert(xmlhttp.responseText);

                //找到input框 id=name的
                document.querySelector("#name").value = xmlhttp.responseText;
            }
        }

       //3.设置服务器地址 参数1: 请求方式 参数2: 请求地址
       //xmlHttp.open(method , url)
        xmlhttp.open("post", "${pageContext.request.contextPath}/ajaxServlet?message=你好a");

      //4.发送请求  xmlHttp.send(请求体)
            xmlHttp.send();
        }
    </script>
</head>
<body>
    用户名:<input type="text" >
    <input type="button" onclick="btnClick()" value="点我发送ajax" id="name">
</body>
</html>

readyState属性存有服务器响应的状态信息，每当readyState改变时，onreadystatechange()函数就会执行。

readyState属性值与对应状态：

状态	描述
0	请求未初始化（在调用open()之前）
1	请求已提出（调用send()之前）
2	请求已发送（这里通常可以从响应得到内容头部）
3	请求处理中（响应中通常有部分数据可用，但服务器还没有完成响应）
4	请求已完成（可以访问服务器响应并使用响应）

1.4 axios组件

axios组件底层就是原生的ajax代码 , 只不过在原生代码上进行了封装, 简化了代码。

常用语法：

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

使用方式：
axios.请求方式(url?参数).then()

url : 请求地址
then(function(响应对象){}) : 回调函数只有当XmlHttpResquest.status为200时才执行
响应对象.data : 响应的数据

二、json

2.1 json概述

JSON(JavaScript Object Notation) JavaScript对象表示法，是基于ECMAScript子集的一种轻量级数据交换格式。

JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族（包括C、C++、C#、Java、JavaScript、Perl、Python等）的习惯，易于人阅读和编写，同时也易于机器解析和生成；这些特性使JSON成为理想的数据交换语言。

JSON特点：速度快，占用小，易于解析。

JSON一般用于主要实现信息的存储与交换。

2.2 语法规则

json 中的数据由键值对组成，键值对之间用,分隔开
— 键：由双引号或者单引号括起来。
— 值：数值(小数、整数)，字符串，布尔值(false，true)，数组
数组使用中括号
json对象使用大括号

{ "name" : "张三","age" : 20,"gender" : "男", "isStudent" : true}

{ "users" : [
    { "name" : "张三","age" : 20,"gender" : "男" , "isStudent" : true},
    { "name" : "李四","age" : 21,"gender" : "女" , "isStudent" : true},
    { "name" : "王五","age" : 20,"gender" : "男" , "isStudent" : true},
    ...
]}

2.3 json数据的获取

json对象.键
json对象[“键”]
数组对象[索引]

三、省市联动

效果展示：当切换省份的时候 , 出来对应的市区
在这里插入图片描述
jsp代码：

<div>
    <h1>基本资料</h1>
    <form>
        <div class="form-inline">
            <label>昵称：</label>
            <input type="text" class="form-control"  name="age" placeholder="请输入昵称">
        </div>
        <div class="form-inline">
            <label>性别：</label>
            <input type="text" class="form-control"  name="gender" placeholder="请输入性别">
        </div>
        <div class="form-inline">
            <label>生日：</label>
            <input type="text" class="form-control"  name="birthday" placeholder="请输入生日">
        </div>
        <div class="form-inline" >
            <label for="provinces">省份： </label>
            <select id="provinces" class="form-control" style="width: 200px">
                <option value="">请选择省</option>
            </select>
        </div>
        <div class="form-inline" >
            <label for="cities" >市区：</label>
            <select id="cities"  class="form-control" style="width: 200px">
                <option value="">请选择市区</option>
            </select>
        </div>

        <div class="form-inline" >
            <input type="submit"  class="form-control" value="立即注册" style="background-color: deepskyblue;color: white;">
        </div>

    </form>
    <script type="text/javascript">
        let provinces = document.querySelector("#provinces");
        let cities = document.querySelector("#cities");
        let provinceArr = new Array();
        onload = function () {
            //发生axios异步请求，加载city.json  axios可以直接访问json文件
            axios.get("${pageContext.request.contextPath}/json/city.json").then(function (resp) {
               //取出省份的数组
                provinceArr = resp.data.provinces;
                //遍历省份数组
                for (let i=0;i<provinceArr.length;i++){
                    provinces.innerHTML += "<option value='"+provinceArr[i].code+"'>"+provinceArr[i].name+"</option>";
                }
            });

            //给省份下拉列表绑定onchange事件
            provinces.onchange = function () {
                //找到当前省份选项对应的code值
                let provinceCode = provinces.options[provinces.selectedIndex].value;
                //城市的下拉列表
                let citiesArr = new Array();
                for (let i=0;i<provinces.length;i++){
                    if (provinceCode==provinceArr[i].code){
                        citiesArr = provinceArr[i].cities;
                        break;
                    }
                }
                //重置城市下拉列表的长度
                cities.length = 1;

                //遍历城市数组
                for (let i=0;i<citiesArr.length;i++){
                    cities.innerHTML += "<option value='"+citiesArr[i].code+"'>"+citiesArr[i].name+"</option>";
                }
            }
        }
    </script>
</div>

Williamsgogogo

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
JavaWeb之Ajax&json

JavaWeb之Ajax&json一、ajax1.1 ajax概述1.2 同步与异步1.3 原生ajax1.4 axios组件一、ajax1.1 ajax概述ajax(Asynchronous JavaScript and XML) 异步的JavaScript 和 XML，是指一种创建交互式、快速动态网页应用的网页开发技术，通过在后台与服务器进行少量数据交换 , 无需重新加载整个网页的情况下，能够更新部分网页的技术。ajax可以在页面进行局部刷新时完成和后台的数据交互。1.2 同步与异步
复制链接

扫一扫