web前端(JSON、AJAX、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
在这里插入图片描述

安装

绿色免安装版,解压即用(注意:不要有中文路径)
在这里插入图片描述
在这里插入图片描述

目录结构

在这里插入图片描述

启动和关闭

在这里插入图片描述

  1. tomcat启动之后, 窗口不要关掉(相当于关闭软件): 点击startup.bat
  2. 直接右上角点击X : 强制关闭(断电) , 不推荐用(在测试时无所谓)
  3. 正常关闭: 点击shutdown.bat

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

启动报错问题

Java环境变量

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

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

解决:

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

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

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

    ​ jvm : java virtual machine(java 虚拟机)

  2. 配置好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

    1. 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
    评论
以下是一个简单的 Java Web 项目,实现了省份城市二级联动功能。该项目使用了 MySQL 数据库,通过 AJAX 请求获取 JSON 格式的省份和城市数据,然后通过 JavaScript 实现了省份和城市的二级联动。 1. 数据库部分: 创建两个表,一个用于存储省份数据,一个用于存储城市数据。在省份表中,包含省份的 id、名称和编码;在城市表中,包含城市的 id、名称、编码和所属省份的 id。 省份表 SQL 语句: ``` CREATE TABLE `province` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT NULL, `code` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8; ``` 城市表 SQL 语句: ``` CREATE TABLE `city` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT NULL, `code` varchar(255) NOT NULL, `province_id` int(11) NOT NULL, PRIMARY KEY (`id`), KEY `idx_province_id` (`province_id`), CONSTRAINT `fk_province_id` FOREIGN KEY (`province_id`) REFERENCES `province` (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8; ``` 2. 后端部分: 创建一个 Java Servlet,用于处理 ajax 请求,并从数据库中获取省份和城市的数据。在 doGet() 方法中,根据请求参数获取对应的省份和城市数据,并将数据以 JSON 格式返回给前端。 ProvinceServlet.java 代码: ```java import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.json.JSONArray; import org.json.JSONObject; public class ProvinceServlet extends HttpServlet { private static final long serialVersionUID = 1L; private static final String DB_DRIVER = "com.mysql.jdbc.Driver"; private static final String DB_URL = "jdbc:mysql://localhost:3306/test"; private static final String DB_USER = "root"; private static final String DB_PASSWORD = "root"; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("application/json"); response.setCharacterEncoding("UTF-8"); String type = request.getParameter("type"); if ("province".equals(type)) { getProvinces(response); } else if ("city".equals(type)) { String provinceCode = request.getParameter("provinceCode"); getCities(response, provinceCode); } } private void getProvinces(HttpServletResponse response) throws IOException { Connection conn = null; PreparedStatement stmt = null; ResultSet rs = null; try { Class.forName(DB_DRIVER); conn = DriverManager.getConnection(DB_URL, DB_USER, DB_PASSWORD); String sql = "SELECT * FROM province"; stmt = conn.prepareStatement(sql); rs = stmt.executeQuery(); JSONArray provinces = new JSONArray(); while (rs.next()) { JSONObject province = new JSONObject(); province.put("id", rs.getInt("id")); province.put("name", rs.getString("name")); province.put("code", rs.getString("code")); provinces.put(province); } PrintWriter out = response.getWriter(); out.print(provinces); } catch (ClassNotFoundException | SQLException e) { e.printStackTrace(); } finally { if (rs != null) { try { rs.close(); } catch (SQLException e) { e.printStackTrace(); } } if (stmt != null) { try { stmt.close(); } catch (SQLException e) { e.printStackTrace(); } } if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } } private void getCities(HttpServletResponse response, String provinceCode) throws IOException { Connection conn = null; PreparedStatement stmt = null; ResultSet rs = null; try { Class.forName(DB_DRIVER); conn = DriverManager.getConnection(DB_URL, DB_USER, DB_PASSWORD); String sql = "SELECT c.id, c.name, c.code FROM city c JOIN province p ON c.province_id = p.id WHERE p.code = ?"; stmt = conn.prepareStatement(sql); stmt.setString(1, provinceCode); rs = stmt.executeQuery(); JSONArray cities = new JSONArray(); while (rs.next()) { JSONObject city = new JSONObject(); city.put("id", rs.getInt("id")); city.put("name", rs.getString("name")); city.put("code", rs.getString("code")); cities.put(city); } PrintWriter out = response.getWriter(); out.print(cities); } catch (ClassNotFoundException | SQLException e) { e.printStackTrace(); } finally { if (rs != null) { try { rs.close(); } catch (SQLException e) { e.printStackTrace(); } } if (stmt != null) { try { stmt.close(); } catch (SQLException e) { e.printStackTrace(); } } if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } } } ``` 3. 前端部分: 在 HTML 页面中添加两个 select 标签,一个用于选择省份,一个用于选择城市。给这两个 select 标签分别添加 id,例如:province 和 city。 然后,在 JavaScript 中,通过 ajax 发送请求,获取省份和城市的数据。在省份 select 标签中添加 option 标签,显示所有省份的名称。当用户选择某个省份时,再次发送 ajax 请求,获取该省份下的所有城市,并在城市 select 标签中添加 option 标签,显示所有城市的名称。 index.html 代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>省份城市二级联动</title> </head> <body> <select id="province"></select> <select id="city"></select> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> $(function() { // 获取所有省份 $.ajax({ url: "ProvinceServlet", type: "GET", data: { type: "province" }, success: function(data) { // 在省份 select 标签中添加 option 标签 for (var i = 0; i < data.length; i++) { var option = $("<option>").val(data[i].code).text(data[i].name); $("#province").append(option); } // 触发省份 select 标签的 change 事件 $("#province").trigger("change"); } }); // 当省份 select 标签的值发生变化时,获取该省份下的所有城市 $("#province").on("change", function() { var provinceCode = $(this).val(); $.ajax({ url: "ProvinceServlet", type: "GET", data: { type: "city", provinceCode: provinceCode }, success: function(data) { // 清空城市 select 标签中的 option 标签 $("#city").empty(); // 在城市 select 标签中添加 option 标签 for (var i = 0; i < data.length; i++) { var option = $("<option>").val(data[i].code).text(data[i].name); $("#city").append(option); } } }); }); }); </script> </body> </html> ``` 4. 部署和运行: 将上述代码保存在一个 Java Web 项目中,将 MySQL 驱动程序添加到项目的 classpath 中,然后部署到 Tomcat 服务器中运行。在浏览器中访问该项目的 index.html 页面,即可实现省份城市二级联动功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值