4.1.3 网站通信技术

文章目录


今天我们将深入探讨网站通信技术,这是互联网时代中不可或缺的技术之一。我们将从基础的HTTP通信开始,逐步深入了解URL的作用,以及如何通过不同的方式发送请求。

1. 网站通信方式

在互联网的世界里,网站和服务器之间的通信主要依赖于HTTP协议。这个过程其实就是Web应用的请求响应机制。当我们在浏览器中输入一个URL,浏览器就会向后端服务器发送一个请求,这个请求包含了URL、Header等信息。服务器监听特定的端口,接收到请求后进行处理,并将处理结果以响应的形式返回给前端浏览器。

2. URL - 统一资源定位符

定义

URL(Uniform Resource Locator)是互联网上用于定位和访问资源的唯一地址。它定义了资源在网络中的位置,允许用户通过浏览器等工具快速访问。

格式

一个典型的URL格式如下:

协议名://主机名:端口号/路径名

例如,http://localhost:8080/huawei/vueboot.png 就是一个URL,它指向本地服务器上的一个图片资源。

演示

让我们通过一个实际的例子来演示URL的使用。首先,在服务器上准备一张图片,存放路径为D:\apache-tomcat-10.1.16\webapps\huawei\vueboot.png。然后,在命令行窗口启动Tomcat服务器,执行命令startup.bat。最后,通过浏览器访问http://localhost:8080/huawei/vueboot.png来查看这张图片。

3. 发送请求的4种形式

在Web应用中,发送请求有以下几种常见的形式:

在地址栏中输入URL访问

例如,直接在浏览器地址栏中输入http://localhost:8080/huawei/login.html来访问登录页面。

超链接href属性指定URL

创建一个首页index.html,并在其中添加一个超链接,通过单击该链接来访问另一个页面。例如,访问http://localhost:8080/huawei/index.html,然后单击【泸州职业技术学院】超链接。

form表单在action中指定URL

在登录表单中,通过<form action="doLogin.jsp" method="post">来指定登录请求发送到的URL。登录处理页面可以通过response.sendRedirect("showProduct.jsp");来跳转到商品展示页面。

通过AJAX请求后端数据

使用AJAX技术,我们可以在不重新加载整个页面的情况下,与服务器进行数据交换。例如,通过fetch('emp/getAll')来获取全部员工数据,并在页面上动态显示。

4. 两种不同返回的请求

在Web应用中,请求的返回也有两种不同的情况:

发送URL,后端处理完响应页面

例如,当用户访问http://localhost:8080/showEmployee,后端控制器会处理请求并返回一个员工信息页面。

发送AJAX请求,后端处理完响应字符串或JSON字符串

例如,通过AJAX请求emp/getById/2,后端控制器会返回一个JSON格式的员工数据字符串,前端页面通过JavaScript处理并显示这些数据。

通过这些演示,我们可以更深入地理解网站通信技术的工作机制,以及如何在实际的Web应用中应用这些技术。

相关推荐
qingy_204616 小时前
【JavaWeb】JSON介绍及入门案例
javascript·ajax·ecmascript
雪碧聊技术1 天前
01-Ajax入门与axios使用、URL知识
前端·javascript·ajax·url·axios库
Fetters041 天前
️️一篇快速上手 AJAX 异步前后端交互
ajax
蔚一1 天前
Javaweb—Ajax与jQuery请求
前端·javascript·后端·ajax·jquery
Jiaberrr2 天前
uniapp中使用原生ajax上传文件并携带其他数据,实时展示上传进度
前端·javascript·vue.js·ajax·uni-app
芒果披萨3 天前
Ajax异步调用
前端·javascript·ajax
scc21403 天前
spark的学习-04
学习·ajax·spark
MarisolHu3 天前
前端学习笔记-Ajax篇
前端·笔记·学习·ajax
2301_811212334 天前
React的概念以及发展前景如何?
css·ajax·前端框架·json·echarts·html5·easyui
出逃日志4 天前
CSS的综合应用例子(网页制作)
前端·javascript·ajax