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

荞澳

已于 2022-01-20 21:51:03 修改

阅读量471

点赞数

分类专栏： web前端文章标签：前端 json tomcat http ajax

于 2021-12-05 23:24:38 首次发布

本文链接：https://blog.csdn.net/weixin_50648720/article/details/121733228

版权

web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JSON、AJAX、Tomcat、Http

JSON
AJAX
Web知识概述
Tomcat服务器
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 对象）
		数组
		布尔
		Null
	3. 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 = 对象.name
    console.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) //32
    for (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中是string
              2. 前端(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) //string
    console.log(resultData.msg) //string无法这样解析,undefined

    //json格式的字符串转成对象
    let resultObj = JSON.parse(resultData)
   // let resultObj = eval("("+resultData+")") // 也可以转换,在变量外面加上小括号!!!
    console.log(resultObj) //
    console.log(typeof resultObj) // object
    console.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.在资料的地址栏中输入: cmd
	2.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").value
            let 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)
                        如果不写,默认text

             http协议的两种请求方式
                1. get
                    a. 将参数拼接进url
                    b. 可能体现在浏览器的地址栏, 不安全, 传输的数据长度有限制

                2. post
                    a. 参数不会拼接进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) 默认设置下，所有请求均为异步请求。如果需要发送同步请求,设置false
	3. 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) 默认设置下，所有请求均为异步请求。如果需要发送同步请求,设置false
            3. 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/post
                data:"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.html
            
2. 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项目

在这里插入图片描述

页面资源热更新

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HSXEYDgY-1638712249189)(assets/1586749225881.png)]

经验值分享

在这里插入图片描述

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方式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nMCT2Pq6-1638712249190)(assets/1586758259886.png)]

post方式

在这里插入图片描述

HTTP请求消息格式

请求行

* 格式
		请求方式 请求路径 协议/版本号
		
* 例如
		POST /xxx/static/login.html HTTP/1.1
		GET /xxx/static/login.html?username=jack&password=123 HTTP/1.1
		
* 请求方式区别
	get
		1.请求参数在地址栏显示（请求行）
		2.请求参数大小有限制
		3.数据不太安全
	post
		1.请求参数不在地址栏显示（请求体）
		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

响应体（正文）

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

荞澳

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web前端（JSON、AJAX、Tomcat、Http）

JSON、AJAX、Tomcat、HttpJSONJSON概述JSON基础语法JSON格式转换AJAXAJAX概述JS原生AJAX运行一个java的服务器案例需求代码实现JQuery的Ajax插件get/post 函数ajax函数同步和异步概述Web知识概述软件架构Web服务器作用资源的分类常见的Web服务器Tomcat服务器Tomcat使用下载安装目录结构启动和关闭启动报错问题Java环境变量8080端口被占用访问测试发布项目三种方式webapps 部署server.xml部署独立xml部署(开发时使用)
复制链接

扫一扫

专栏目录