JS高级编程课件18_JavaScript网络编程.pdf

JavaScriptXHR、Fetch

王红元coderwhy

目录

1前端数据请求方式

content

2Http协议的解析

3XHR的基本用法

4XHR的进阶和封装

5Fetch的使用详解

6前端文件上传流程

coderwhy前后端分离的优势

◼早期的网页都是通过后端渲染来完成的：服务器端渲染（SSR，serversiderender）：

客户端发出请求-服务端接收请求并返回相应HTML文档-页面刷新，客户端加载新的HTML文档；

◼服务器端渲染的缺点：

当用户点击页面中的某个按钮向服务器发送请求时，页面本质上只是一些数据发生了变化，而此时服务器却要将重绘的整个页面再返

回给浏览器加载，这显然有悖于程序员的“DRY（Don‘trepeatyourself）”原则；

而且明明只是一些数据的变化却迫使服务器要返回整个HTML文档，这本身也会给网络带宽带来不必要的开销。

◼有没有办法在页面数据变动时，只向服务器请求新的数据，并且在阻止页面刷新的情况下，动态的替换页面中展示的数据呢？

答案正是“AJAX”。

◼AJAX是“AsynchronousJavaScriptAndXML”的缩写(异步的JavaScript和XML)，是一种实现无页面刷新获取服务器数据的技术。

AJAX最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

◼你可以使用AJAX最主要的两个特性做下列事：

在不重新加载页面的情况下发送请求给服务器；

接受并使用从服务器发来的数据。

coderwhy网页的渲染过程–服务器端渲染

coderwhy网页的渲染过程–前后端分离

coderwhy什么是HTTP？

◼什么是HTTP呢？我们来看一下维基百科的解释：

超文本传输协议（英语：HyperTextTransferProtocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议；

HTTP是万维网的数据通信的基础，设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法；

通过HTTP或者HTTPS协议请求的资源由统一资源标识符（UniformResourceIdentifiers，URI）来标识；

◼HTTP是一个客户端（用户）和服务端（网站）之间请求和响应的标准。

通过使用网页浏览器、网络爬虫或者其它的工具，客户端发起一个HTTP请求到服务器上指定端口（默认端口为80）；

✓我们称这个客户端为用户代理程序（useragent）；

响应的服务器上存储着一些资源，比如HTML文件和图像。

✓我们称这个响应服务器为源服务器（originserver）；

coderwhy网页中资源的获取

◼我们网页中的资源通常是被放在Web资源服务器中，由浏览器自动发送HTTP请求来获取、解析、展示的。

◼目前我们页面中很多数据是动态展示的：

比如页面中的数据展示、搜索数据、表单验证等等，也是通过在JavaScript中发送HTTP请求获取的；

coderwhyHTTP的组成

◼一次HTTP请求主要包括：请求（Request）和响应（Response）

coderwhyHTTP的版本

◼HTTP/0.9

发布于1991年；

只支持GET请求方法获取文本数据，当时主要是为了获取HTML页面内容；

◼HTTP/1.0

发布于1996年；

支持POST、HEAD等请求方法，支持请求头、