JSON、AJAX、Tomcat、Http

JSON
- JSON概述
- JSON基础语法
- JSON格式转换
AJAX
- AJAX概述
- JS原生AJAX
- - 运行一个java的服务器
  - 案例需求
  - 代码实现
- JQuery的Ajax插件
- - get/post 函数
  - ajax函数
- 同步和异步概述
Web知识概述
- 软件架构
- Web服务器作用
- 资源的分类
- 常见的Web服务器
Tomcat服务器
- Tomcat使用
- - 下载
  - 安装
  - 目录结构
  - 启动和关闭
  - 启动报错问题
  - - Java环境变量
    - 8080端口被占用
    - 访问测试
  - 发布项目三种方式
  - - webapps 部署
    - server.xml部署
    - 独立xml部署(开发时使用)
- Web项目结构
- Idea中使用Tomcat
- - 配置Tomcat
  - 创建Web项目
  - 发布Web项目
  - 页面资源热更新
  - 经验值分享
Http协议
- Http协议概述
- - chrome(谷歌)——按键f12
  - firefox(火狐)——按键f12
- Http请求
- - 浏览器查看Http请求协议
  - - get方式
    - post方式
  - HTTP请求消息格式
  - - 请求行
    - 请求头
    - 请求体（正文）
- Http响应
- - 浏览器查看Http响应协议
  - HTTP响应消息格式
  - - 响应行
    - 响应头
    - 响应体（正文）

JSON

JSON概述

JavaScript对象表示形式（JavaScript Object Notation : js对象简谱）

json 是 js对象的一种表现形式

* java对象表示形式User user = new User();user.setUsername("小明");user.setAge(18);user.setSex("男");...Product product = new Product();product.setName("xx");product.setDesc("xxxxxx");* javaScript对象表示形式let user ={"username":"小明","age":18,"sex":"男"}let product = {"name":"xx","desc":"xxxxxxx"}

json可以取代XML笨重的数据结构，和xml相比：更小、更快，更易解析

json、xml作用：作为数据的载体，在网络中传输

JSON基础语法

json的语法主要有两种:1. 对象 { }2. 数组 [ ](1) 对象类型{name:value,name:value}(2) 数组类型[{name:value,name:value},{name:value,name:value},{name:value,name:value}]
(3) 复杂对象{name:value,list:[{name:value},{},{}]user:{name:value}}
注意: 1. 其中name必须是string类型2. value必须是以下数据类型之一：字符串数字对象（JSON 对象）数组布尔Null3. JSON 中的字符串必须用双引号包围。(单引号不行!)

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>JSON基础语法</title></head>
<body></body>
<script>/**  JSON: 对象{}, 数组[]*   1. 对象:*       {name:value,name:value}**   2. 数组:  对应java中的List<User>*       [*          {name:value,name:value},*          {name:value,name:value}*       ]*   3. 复杂: 对应java的对象或Map<String,Object>*       {*          name : value,*          name : [],*          name : {}*       }**    注意:*       1. 其中name必须是string*       2. value 必须是以下之一*           string,number,boolean,json对象,json数组,null*       3. 注意:json字符串必须双引号包围* *///1. json对象let jsonObj = {"username":"xxx","sex":"x","age":x,"married" : x}//   value = 对象.nameconsole.log(jsonObj.username + "," + jsonObj.married)//2. json数组let jsonArray1 = ["xx","xx",x] // 这也是json,这是比较少见let jsonObj1 = {"username":"xxx","sex":"x","age":x}let jsonObj2 = {"username":"xxx","sex":"x","age":x}let jsonObj3 = {"username":"xxx","sex":"x","age":x}let jsonArray2 = [jsonObj1,jsonObj2,jsonObj3] // 在java中: List<User>console.log(jsonArray2[1].age) //32for (let element of jsonArray2) {console.log(element.username + "," + element.age)}//3. json复杂对象let jsonComplex = {"username" : "xxx","age" : x,"wives" : [{"name" : "xx","address" : "xx"},{"name" : "xx","address" : "xx"}],"master":"xxx"}console.log(jsonComplex.username + ","+ jsonComplex.master)console.log(jsonComplex.wives)</script>
</html>

JSON格式转换

* JSON对象与字符串转换的相关函数语法：1. JSON.stringify(object) 把json对象转为字符串2. JSON.parse(string) 把字符串转为json对象

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>JSON格式转换</title></head>
<body>
<script>//1. JSON.stringify(object) 把json对象转为字符串// 原因是: 浏览器发送请求数据的时候,自动转成string//2. JSON.parse(string) 把字符串转为json对象 /** 需求: 后端(java)给前端发送的json数据1.  json在java中是string2. 前端(js)拿到string格式的json, 先将string -> object,后解析3. 因为json在js中是对象* *///前端接收到后端发送过来的数据(类型:string)// 注意: 里面是json必须双引,外面就用单引// let resultData = "{\"result\" : \"failed\" , \"msg\" : \"用户名不存在或密码错误\"}"let resultData = '{"result" : "failed" , "msg" : "用户名不存在或密码错误"}'console.log(resultData)console.log(typeof resultData) //stringconsole.log(resultData.msg) //string无法这样解析,undefined//json格式的字符串转成对象let resultObj = JSON.parse(resultData)// let resultObj = eval("("+resultData+")") // 也可以转换,在变量外面加上小括号!!!console.log(resultObj) //console.log(typeof resultObj) // objectconsole.log(resultObj.msg) // 正常解析//json对象转成字符串 (知道即可)let resultString = JSON.stringify(resultObj)console.log(resultString)console.log(typeof resultString) //string</script>
</body>
</html>

AJAX

AJAX概述

传统网站中存在的问题

网速慢的情况下，页面加载时间长，用户只能等待
表单提交后，如果一项内容不合格，需要重新填写所有表单内容
页面跳转，重新加载页面，造成资源浪费，增加用户等待时间

AJAX可以解决以上问题

AJAX(Asynchronous JavaScript and XML 异步)是浏览器提供的一套方法，在无需重新加载整个网页情况下，能够更新部分网页的技术，从而提高用户浏览网站应用的体验。

中文音译：阿贾克斯

应用场景

搜索框提示
表单数据验证(验证数据是否合法: 用户名已被注册)
无刷新分页(网页不断往下滚动,会不断的发起请求更新数据 : 京东,百度图片)

JS原生AJAX

运行一个java的服务器

jar : java archive(java档案包)1.实际上jar也是压缩格式的一种(本质跟rar,zip,7z差不多)2.jar是.class文件的压缩包(.java源码 编译成 .class的)有些jar包是可以直接启动的: 1.在资料的地址栏中输入: cmd2.java -jar jar名字 (启动java程序)

案例需求

代码实现

# js原生的ajax (不经过任何封装)
1. 创建ajax对象let xhr = new XMLHttpRequest();
2. 告诉ajax请求方式和请求地址xhr.open(请求方式，请求地址);
3. 发送请求xhr.send();
4. 获取服务器返回的数据xhr.οnlοad=function(){xhr.responseText;}

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>s的原生ajax</title><style>span{color: red;}</style>
</head>
<body><input id="username" type="text" placeholder="请输入用户名"><span id="userwarn"></span><script>//1. 文本框失去焦点的时候触发document.getElementById("username").onblur = function () {//2. 向服务器发起一个请求(ajax)let xhr = new XMLHttpRequest();let method = "get" // 请求方式(常见两种:get/post)// username=参数//文本输入框中的内容作为参数let  value = document.getElementById("username").valuelet url = "http://localhost:8080/check?username="+value // 请求地址xhr.open(method,url)xhr.send(); // 发送请求//3. 获取服务器返回的数据// 此事件是服务器响应数据之后,ajax加载到此数据时触发xhr.onload = function () {//获取响应数据console.log(xhr.responseText)document.getElementById("userwarn").innerText = xhr.responseText}}</script>
</body>
</html>

JQuery的Ajax插件

jquery作为一个优秀的js框架, 自然也会对ajax的复杂的api进行封装:

get/post 函数

* 1. get请求方式$.get(url, [data], [callback], [type])1. url : 请求的服务器端url地址2. data : 发送给服务器端的请求参数，格式可以是key=value，也可以是json对象3. callback: 当请求成功后的回掉函数，可以在函数体中编写我们的逻辑代码4. type : 预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defau等           (默认text: 普通文本,后续json主要)* 2. post请求方式 :$.post(url, [data], [callback], [type])只需要将get函数换成post即可(参数含义同上)

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>jq的get函数</title><!--jquery已经导入了!!!--><script src="../js/jquery-3.2.1.min.js"></script><style>span{color: red;}</style>
</head>
<body>
<input id="username" type="text" placeholder="请输入用户名">
<span id="userwarn"></span><script>/** * 1. get请求方式$.get(url, [data], [callback], [type])  -> []表示可以没有1. url : 请求地址2. data : 请求参数(text,json)3. callback: 回调函数(ajax请求发送之后,服务器成功响应的回调函数)function(result){  其中result 是服务器的响应数据  }4. type : 预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defau等          (默认text: 普通文本,后续json主要)如果不写,默认text(纯文本,就是字符串)* 2. post请求方式 :$.post(url, [data], [callback], [type])只需要将get函数换成post即可(参数含义同上)解释:1. url 请求地址: 服务器的地址?参数(如果请求方式是get,可以不拆开?参数 , 如果是post,必须拆开)2. data : 请求参数(text,json)text(纯文本,字符串) : name1=value1&name2=value2...json : {name1: value1,name2:value2}3. callback : 服务器成功响应之后的调用函数中有个参数 : 服务器响应的数据(如果访问服务器失败, 这个函数不会执行)4. type : 响应数据的类型(常用text,json)如果不写,默认texthttp协议的两种请求方式1. geta. 将参数拼接进urlb. 可能体现在浏览器的地址栏, 不安全, 传输的数据长度有限制2. posta. 参数不会拼接进url(是放在请求体了)b. 不会体现在浏览器的地址栏, 安全 , 传输的数据没有限制* *///注册失去焦点事件$("#username").blur(function () {//先获取文本输入框中的内容let value = $("#username").val()//用jquery的api发送ajax请求// let url = "http://localhost:8080/check?username="+value // 这是js刚才用的let url = "http://localhost:8080/check" // 只保留?前面的let data = "username=" + value // 请求参数 text格式// let data = {"username" : value} // 请求参数 json格式let cb = function(result){ // 服务器成功响应了会执行这个函数console.log(result) // 服务器响应的数据}let type = "text" // 指定响应数据的类型(常用text,json)$.get(url,data,cb,type) // get请求// $.post(url,data,cb,type) // post请求})</script>
</body>
</html>

ajax函数

* 语法：$.ajax({name:value,name:value})* 参数：1. url    : 请求的服务器端url地址2. async : (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求,设置false3. data : 发送到服务器的数据，可以是键值对形式，也可以是js对象形式4. type : (默认: "GET") 请求方式 ("POST" 或 "GET")5. dataType : 预期的返回数据的类型(默认text,常用json)6. success   : 请求成功后的回调函数7. error    : 请求失败时调用此函数这些参数,是可以选择性的写* 总结: 在实际使用中, 比get/post请求多考虑了失败的情况

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>jq的ajax函数</title><script src="../js/jquery-3.2.1.min.js"></script><style>span{color: red;}</style>
</head>
<body>
<input id="username" type="text" placeholder="请输入用户名">
<span id="userwarn"></span><script>/** * 语法：$.ajax(settings)settings是js对象(不是json)settings = {name:value,name:value}name 可以不加双引号,value可以写function(json不允许)* 参数：1. url    : 请求的服务器端url地址2. async : (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求,设置false3. data : 发送到服务器的数据，可以是键值对形式，也可以是js对象形式4. type : (默认: "GET") 请求方式 ("POST" 或 "GET")5. dataType : 预期的返回数据的类型(默认text,常用json)6. success   : 请求成功后的回调函数7. error    : 请求失败时调用此函数* 总结: 在实际使用中, 比get/post请求多考虑了失败的情况* */$("#username").blur(function () {//获取文本框输入的值let value = $("#username").val()// 使用ajax函数发送请求let settings = {url:"http://localhost:8080/check", // 请求地址type:"get",        // 请求方式,默认是get,一般不是get/postdata:"username="+value, // 请求参数(text,json)success:function (resp) {  // 成功响应的回调, resp是响应数据// 实现局部刷新$('#userwarn').text(resp);},error:function () { //失败的回调 : 如果访问失败,会执行这个函数alert('网络信号不好,服务器繁忙，请稍后重试...')},dataType:"text",  // 响应数据的格式(默认text,可选json)async:true // 异步提交(待会讲,默认是true 异步,一般只写true)}$.ajax(settings)})</script>
</body>
</html>

同步和异步概述

使用ajax发送的是异步请求

同步和异步请求指的是，客户端和服务器交互的行为

同步请求：客户端发送请求后，必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
异步请求：客户端发送请求后，不需要等待服务器端的响应。在服务器处理的过程中，客户端可以进行其他的操作。

http://localhost:8080/sleep   localhost -> 127.0.0.1 (本机)
如果直接访问,默认同步请求,需要等待5秒才会响应,在此期间什么时候都不能做(目前,网页发起的请求都是同步请求)
使用ajax技术实现异步提交,需要等待5秒才会响应,但是在此期间可以做其他事情#同异步概念1. 同步: 先做A任务,只有A任务做完了,才能做B任务2. 异步: 你先做A任务,A任务还没结束,你就能B任务

感知同步和异步区别

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>同步和异步</title><script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="text">
<button id="btn">发送ajax</button><script>// 点击按钮,发送一个异步请求到服务器$("#btn").click(function () {/* let settings = {url : "http://localhost:8080/sleep",type : "get",async : false, //async默认=true,false为同步success : function (result) {alert(result)}}$.ajax(settings)*/let url = "http://localhost:8080/sleep"let data = "" // 没有参数,也可以不写let cb = function(result){ //成功的回调alert(result)}//默认async=true,异步请求$.get(url,data,cb)})
</script>
</body>
</html>

ajax：异步提交和页面局部刷新的技术

Web知识概述

JavaWeb：将编写好的java代码，发布到互联网，可以让所有用户访问到…

软件架构

网络中有很多的计算机，它们直接的信息交流，我们称之为：交互
在互联网交互的过程的有两个非常典型的交互方式——B/S 交互模型（架构）和 C/S 交互模型（架构）

C/S架构

Client/Server 客户端/服务器

访问服务器资源必须安装客户端软件

例如: QQ，绝地求生，LOL

B/S架构

Browser/Server 浏览器/服务器

访问服务器资源不需要专门安装客户端软件,而是直接通过浏览器访问服务器资源.

例如: 天猫、京东、知乎网站

Web服务器作用

开发者通过web服务器可以把本地资源发布到互联网(提供数据服务和支持)
用户就可以通过浏览器访问这些资源(消费服务的)

资源的分类

资源：计算机中数据文件

静态资源

对于同一个页面,不同用户看到的内容是一样的(该资源不会变化)。
- 例如：体育新闻、网站门户等，常见后缀：*.html、*.js、*.css

动态资源

用对于同一个页面,不同用户看到的内容可能不一样(该资源会变化)。
- 例如：购物车、我的订单等，常见后缀：*.jsp、*.aspx、*.php

常见的Web服务器

* Tomcat: Apache组织开源免费的web服务器,支持JavaEE规范（Servlet/Jsp）.* Jetty:Apache组织开源免费的小型web服务器,支持JavaEE规范.
* JBoss: RedHat红帽公司的开源免费的web服务器,支持JavaEE规范.
* Glass Fish:Sun公司开源免费的web服务器,支持JavaEE规范.---------------------------------------------------------------------* WebLogic: Oracle公司收费的web服务器,支持JavaEE规范.
* WebSphere:IBM公司收费的web服务器,支持JavaEE规范.

JavaEE规范

在Java中所有的服务器厂商都要实现一组Oracle公司规定的接口，这些接口是称为JavaEE规范。不同厂商的JavaWeb服务器都实现了这些接口，在JavaEE中一共有13种规范。实现的规范越多，功能越强。

Tomcat服务器

Tomcat使用

下载

Tomcat 官网下载地址：https://tomcat.apache.org/download-80.cgi

安装

绿色免安装版，解压即用（注意：不要有中文路径）

目录结构

启动和关闭

tomcat启动之后, 窗口不要关掉(相当于关闭软件): 点击startup.bat

直接右上角点击X : 强制关闭(断电) , 不推荐用(在测试时无所谓)

正常关闭: 点击shutdown.bat

在tomcat黑窗口内部ctrl+c 二次，表示正常关闭

启动报错问题

Java环境变量

现象: 黑窗口一闪而过(不到半秒)

原因: tomcat的大部分代码也是java写的

解决:

JDK : Java development kit ( java开发工具包)

a. java开发所运行的工具包(jdk的类)

b. jre : java runtime environment(java 运行环境)

jvm : java virtual machine(java 虚拟机)

配置好Java环境变量

目的: 是为了可以在任意位置,打开cmd都能访问

C:\Program Files\Java\jdk1.8.0_111\bin 下的可执行程序(java.exe…)

a. JAVA_HOME : C:\Program Files\Java\jdk1.8.0_111
b. Path : %JAVA_HOME%\bin

JDK换成8版本，目前tomcat8和jdk8兼容没问题

8080端口被占用

现象：启动时报错（黑框口等了一会就关闭）

原因: 一个进程占用一个端口port, 一个端口不能被多个进程同时占用

(软件启动至少一个进程)

暴力：找到占用的端口号的对应进程，杀死进程

cmd命令：netstat -ano | findstr "8080"

进入到任务管理器，找到它，干掉它

温柔：修改Tomcat端口号

进入Tomcat安装目录/conf/server.xml 文件修改 (重启tomcat生效)

访问测试

http://localhost:80
http协议默认端口80(会被隐藏)
https协议默认端口443

在整个web阶段我们使用的就是tomcat默认端口：8080

发布项目三种方式

webapps 部署

直接放置在 webapps 目录下

这种方案(支持热更新)，一般在开发完毕后，来使用的

server.xml部署

在tomcat/conf/server.xml中找到标签内，添加标签

        <!-- path: 虚拟路径docBase : 真实路径mypro 映射 C:\Users\spy\Desktop\mypro注意: 修改配置文件,重启tomcat生效--><Context path="mypro" docBase="C:\Users\spy\Desktop\mypro"/></Host>

缺点

1.配置文件修改完毕后，需要重启tomcat生效…

2.server.xml是tomcat的核心配置文件，如果稍有不慎操作失误，整个tomcat启动失败

独立xml部署(开发时使用)

在tomcat/conf/Catalina/localhost 目录下创建一个xml文件，添加标签

文件名就是虚拟路径

不需要重启tomcat

Web项目结构

1. 前端项目|-- myapp(项目名称)|-- css 目录|-- js  目录|-- html目录|-- img 目录|-- index.html2. web项目|-- myapp（项目名称）|-- 静态资源（html、css、js、img）|-- WEB-INF 目录（浏览器无法直接访问内部的资源）|-- classes 目录（java的字节码文件）|-- lib     目录（当前项目所需要的第三方jar包）|-- web.xml 文件 （当前项目核心配置文件，servlet3.0可以省略）|-- index.html or index.jsp

Idea中使用Tomcat

配置Tomcat

(工具栏居中,不然默认显示在右侧)

再次点击，确定是否配置成功

创建Web项目

发布Web项目

页面资源热更新

经验值分享

Http协议

Http协议概述

超文本传输协议（Hyper Text Transfer Protocol)是互联网上应用最为广泛的一种网络协议。

传输协议：在客户端和服务器端通信时，规范了传输数据的格式和内容

#. 1. http协议的特点1). 基于tcp协议 : 三次握手,保障数据安全,相对udp效率低2). 默认端口 80 (省略不写)3). 基于请求/响应模型一次请求对应一次响应 / 先有请求,再有响应4). 无状态协议(多次请求之间相互独立,不记录状态)     #. 2. http协议版本发展1). http1.0 (1996) : 每次请求都有一个新的连接(开销大,比较慢)2). http1.1  (1999) : 长连接,多个请求共用一个连接(开销小一些,比较快) 传输的数据都是文本(比较慢), 不支持推送目前!!!3). http2.0 (2015) : 传输的数据经过压缩的,效率很高, 支持推送 4). http3.0 : 2019,想基于udp# 3. http协议的内容1). 请求报文: 浏览器发送给服务器的数据 请求行, 请求头, 请求体2). 响应报文: 服务器发送给浏览器的数据响应行, 响应头, 响应体# 4. 抓包工具1. 在浏览器和服务器交互的时候(发送请求,然后响应),我们可以使用工具抓取数据查看2. google浏览器内置开发者工具

chrome(谷歌)——按键f12

firefox(火狐)——按键f12

Http请求

浏览器查看Http请求协议

get方式

post方式

HTTP请求消息格式

请求行

* 格式请求方式 请求路径 协议/版本号* 例如POST /xxx/static/login.html HTTP/1.1GET /xxx/static/login.html?username=jack&password=123 HTTP/1.1* 请求方式区别get1.请求参数在地址栏显示（请求行）2.请求参数大小有限制3.数据不太安全post1.请求参数不在地址栏显示（请求体）2.请求参数大小没有限制3.数据相对安全(上传文件和表单要用post,其他请求两种都可以)

请求头

* 格式请求头名称：请求头的值
* 例如   Host: localhost:8080

常见请求头：


1. Host: localhost:8080         访问服务器的地址（域名+端口）
2. Connection: keep-alive       长连接（http1.1协议）
3. Upgrade-Insecure-Requests:1   客户端支持https加密协议  4. Referer: http://baidu.com    上一次请求的地址   防盗链....
5. User-Agent:        客户端系统和浏览器版本User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) Chrome/63.0 Safari/537.36浏览器兼容性判断 : 服务器根据用户的浏览器版本, 返回响应的数据谷歌方式一 : 发送google浏览器可以解析的数据IE方式二 : 发送ie浏览器可以解析的数据火狐方式三 :

请求体（正文）

* 格式参数名=参数值&参数名=参数值...
* 例如username=jack&password=123* 注意：get方式没有请求体，post方式才有

Http响应

浏览器查看Http响应协议

HTTP响应消息格式

响应行

* 格式协议/版本号 状态码
* 例如HTTP/1.1 200* 常见状态码--------------- 用户可以正常访问页面200 ：表示成功   302 ：重定向304 ：从缓存中读取数据(如果这个资源没有变化,浏览器是会缓存的,下次请求,就直接从缓存中读取,提高效率)--------------- 用户无法正常访问页面404：请求资源未找到（not  found）405：请求的方法未找到500：服务器内部错误（java代码写错了.....）

响应头

* 格式响应头名称：响应头的值
* 例如Last-Modified: Mon, 13 Apr 2020 06:11:24 GMT

常见响应头：

1. Location：通常与状态码302一起使用，实现重定向操作Location:http://www.xxx.cn
2. Content-Type：服务器告诉客户端，返回响应体的数据类型和编码方式Content-Type:text/html;charset=utf-8
3. Content-Disposition：服务器告诉客户端，以什么样方式打开响应体* in-line（默认）：浏览器直接打开相应内容，展示给用户* attachment;filename=文件名：浏览器以附件的方式保存文件 【文件下载】
4. Refresh：在指定间隔时间后，跳转到某个页面Refresh:5;http://www.xxx.cn

响应体（正文）

* 服务器返回的数据，由浏览器解析后展示给用户用户看到页面所有的内容，都是在响应体中返回的

web前端（JSON、AJAX、Tomcat、Http）相关推荐

ajax中async_小猿圈web前端之ajax的同步和异步有怎样的区别？
对于ajax我们应该知道ajax是主要用来在前端页面中向服务器后端请求数据,ajax中根据async的值不同分为同步(async = false)和异步(async = true)两种执行方式,那么, ...
【Web前端】AJAX局部更新网页
使用XMLHttpRequest(XHR)更新部分网页内容实现效果 <!DOCTYPE html> <html lang="en"> <head&g ...
垃圾分类网站 web前端 + java后端
数据库设计垃圾分类知识表: 字段名称数据类型 id(唯一标识) BIGINT(20) title(名称) VARCHAR(255) image(图片) VARCHAR(255) content(介 ...
web前端之后的4天(Ajax,json,redis,maven)
web前端之后的10天(Ajax,json,redis,maven) day2(还是前端的内容) 1.AJAX 2.JSON AJAX: 1.概念:ASynchronous JavaScrip And ...
firefox如何载入json文件_如何去解决JS跨域问题怎么能学好Web前端开发
如何去解决JS跨域问题?怎么能学好Web前端开发?JavaScript跨域是指通过JS在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过JS获取页面中不同域的框架中(if ...
点击部分刷新html ajax,一文全解web前端精简知识点
Web 前端知识体系精简介绍,让你学web前端轻松容易,让你选择web前端更轻松容易! Never give up on something you really want. It's difficu ...
addeventlistener不支持ajax_好程序员web前端学习路线分享了解AJAX是什么
好程序员web前端学习路线分享了解AJAX是什么首先是服务器什么是服务器:咱们的页面来源于服务器:实例(在phpnwo上面存放一个页面), 咱们把页面放在互联网的服务器上,就有了自己的网站了. 1. ...
ajax请求是宏任务还是微任务_好程序员web前端学习路线分享了解AJAX是什么
好程序员web前端学习路线分享了解AJAX是什么首先是服务器什么是服务器:咱们的页面来源于服务器:实例(在phpnwo上面存放一个页面), 咱们把页面放在互联网的服务器上,就有了自己的网站了. 1. ...
Ajax的简历技能如何写,web前端工程师简历专业技能怎么写
专业技能(案例一) javascript.css.node.js.vue.angluer.react 专业技能(案例二) JavaScript HTML5 Web前端专业技能(案例三) ps.ai ...
【从0到1学Web前端】javascript中的ajax对象（一）
[从0到1学Web前端]javascript中的ajax对象(一) 如今最流行的获取后端的(浏览器从server)数据的方式就是通过Ajax了吧.今天就来具体的来学习下这个知识吧.假设使用ajax来訪 ...

web前端（JSON、AJAX、Tomcat、Http）