静态仔的挣扎第01天

2024-01-12 01:32
文章标签 01 静态 挣扎

本文主要是介绍静态仔的挣扎第01天，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Ajax:让静态页面动起来,成为一名合格的前端人员

学习目标(重点)

** 【理解】AJAX 是什么
【理解】AJAX的应用场景
【应用】AJAX的实现步骤
【理解】AJAX的运行原理
【理解】服务器响应的数据格式
【理解】请求报文与请求参数的格式
【应用】获取服务器端的响应
【应用】AJAX异步编程**

传统网站中存在的问题
  1. 网速慢的情况下，页面加载时间长，用户只能等待
  2. 表单提交后，如果一项内容不合格，需要重新填写所有表单内容
  3. 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间
Ajax的重要性
  1. 它是浏览器提供的一套方法,可以实现页面无刷新更新数据,提高用户浏览网站应用的体验
  2. 可以让前端向后台发送请求(让前端页面向后台服务器要数据)
  3. 异步请求:服务器很卡,网络很卡,ajax请求发送出去也不会影响到页面的内容展示
  4. 局部刷新:就算服务当服务器返回结果之后,前端页面可以根据服务器返回数据更新页面中的内容
Ajax 应用场景
  1. 页面上拉加载更多数据
  2. 列表数据无刷新分页
  3. 表单项离开焦点数据验证
  4. 搜索框提示文字下拉列表
Ajax 的运行环境

Ajax技术需要运行在网站环境中才能生效

Ajax 运行原理

Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。

Ajax的实现步骤
  1. 创建ajax对象var xhr = new XMLHttpRequest();
  2. 告诉 Ajax 请求地址以及请求方式xhr.open('get', 'http://www.example.com');
  3. 发送请求xhr.send();
  4. 获取服务器端给与客户端的响应数据xhr.onload = function () { console.log(xhr.responseText); }
服务端响应的数据格式

在真实的项目中，服务器端大多数情况下会以 JSON对象作为响应数据的格式。当客户端拿到响应数据时，要将 JSON 数据和 HTML 字符串进行拼接，然后将拼接的结果展示在页面中。

在 http 请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。

JSON.parse() // 将 json 字符串转换为json对象
请求参数传递

传统网站表单提交
`

<!– http://www.example.com?username=zhangsan&password=123456 -->` Ajax传递方式 1.GET 请求方式 ``` xhr.open('get', 'http://www.example.com?name=zhangsan&age=20'); ``` 2.POST 请求方式 ``` xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') xhr.send('name=zhangsan&age=20'); ``` #### 请求报文 在 HTTP 请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，这些数据和信息要遵守规定好的格式。
请求参数的格式

1.application/x-www-form-urlencoded

 name=zhangsan&age=20&sex=男

2.application/json

{name: 'zhangsan', age: '20', sex: '男'}

在请求头中指定 Content-Type 属性的值是 application/json，告诉服务器端当前请求参数的格式是 json

 JSON.stringify() // 将json对象转换为json字符串

注意：get 请求是不能提交 json 对象数据格式的，传统网站的表单提交也是不支持 json 对象数据格式的。

获取服务器端的响应
Ajax 状态码

在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态码。

0：请求未初始化(还没有调用open())
1：请求已经建立，但是还没有发送(还没有调用send())
2：请求已经发送
3：请求正在处理中，通常响应中已经有部分数据可以用了
4：响应已经完成，可以获取并使用服务器的响应了xhr.readyState // 获取Ajax 状态码
onreadystatechange 事件

当 Ajax 状态码发生变化时将自动触发该事件

在事件处理函数中可以获取 Ajax 状态码并对其进行判断，当状态码为 4 时就可以通过 xhr.responseText 获取服务器端的响应数据了.

// 当Ajax状态码发生变化时xhr.onreadystatechange = function () {// 判断当Ajax状态码为4时if (xhr.readyState == 4) {// 获取服务器端的响应数据console.log(xhr.responseText);}}
两种获取服务器端响应方式的区别

onload事件和onreadystatechange事件之间的区别

Ajax 错误处理

  1. 网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。
    可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取http状态码

  2. 网络畅通，服务器端没有接收到请求，返回404状态码。
    检查请求地址是否错误。

  3. 网络畅通，服务器端能接收到请求，服务器端返回500状态码。
    服务器端错误，找后端程序员进行沟通。

  4. 网络中断，请求无法发送到服务器端。
    会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理

低版本 IE 浏览器的缓存问题
问题：在低版本的 IE 浏览器中，Ajax 请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了，客户端依然拿到的是缓存中的旧数据。
解决方案：在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同

xhr.open('get', 'http://www.example.com?t=' + Math.random());

Ajax 异步编程

同步异步概述
同步
  1. 一个人同一时间只能做一件事情，只有一件事情做完，才能做另外一件事情。
  2. 落实到代码中，就是上一行代码执行完成后，才能执行下一行代码，即代码逐行执行。
console.log('第一件事情'); console.log('第二件事情');
异步

1.个人一件事情做了一半，转而去做其他事情，当其他事情做完以后，再回过头来继续做之前未完成的事情。
2.落实到代码上，就是异步代码虽然需要花费时间去执行，但程序不会等待异步代码执行完成后再继续执行后续代码，而是直接执行后续代码，当后续代码执行完成后再回头看异步代码是否返回结果，如果已有返回结果，再调用事先准备好的回调函数处理异步代码执行的结果。

console.log('第一件事情');setTimeout(() => { console.log('最后一件事情');}, 2000);console.log('第二件事情');

Ajax 封装

问题

发送一次请求代码过多，发送多次请求代码冗余且重复

解决方案

将请求代码封装到函数中，发请求时调用函数即可

完整封装Ajax代码(这只是封装代码的开始)

大多数代码都被封装完毕了,只需要自己会调用就可以了

代码完整版

function ajax (options) {// 存储的是默认值var defaults = {type: 'get',url: '',data: {},header: {'Content-Type': 'application/x-www-form-urlencoded'},success: function () {},error: function () {}};// 使用options对象中的属性覆盖defaults对象中的属性Object.assign(defaults, options);// 创建ajax对象var xhr = new XMLHttpRequest();// 拼接请求参数的变量var params = '';// 循环用户传递进来的对象格式参数for (var attr in defaults.data) {// 将参数转换为字符串格式params += attr + '=' + defaults.data[attr] + '&';}// 将参数最后面的&截取掉 // 将截取的结果重新赋值给params变量params = params.substr(0, params.length - 1);// 判断请求方式if (defaults.type == 'get') {defaults.url = defaults.url + '?' + params;}/*{name: 'zhangsan',age: 20}name=zhangsan&age=20*/// 配置ajax对象xhr.open(defaults.type, defaults.url);// 如果请求方式为postif (defaults.type == 'post') {// 用户希望的向服务器端传递的请求参数的类型var contentType = defaults.header['Content-Type']// 设置请求参数格式的类型xhr.setRequestHeader('Content-Type', contentType);// 判断用户希望的请求参数格式的类型// 如果类型为jsonif (contentType == 'application/json') {// 向服务器端传递json数据格式的参数xhr.send(JSON.stringify(defaults.data))}else {// 向服务器端传递普通类型的请求参数xhr.send(params);}}else {// 发送请求xhr.send();}// 监听xhr对象下面的onload事件// 当xhr对象接收完响应数据后触发xhr.onload = function () {// xhr.getResponseHeader()// 获取响应头中的数据var contentType = xhr.getResponseHeader('Content-Type');// 服务器端返回的数据var responseText = xhr.responseText;// 如果响应类型中包含applicaition/jsonif (contentType.includes('application/json')) {// 将json字符串转换为json对象responseText = JSON.parse(responseText)}// 当http状态码等于200的时候if (xhr.status == 200) {// 请求成功 调用处理成功情况的函数defaults.success(responseText, xhr);}else {// 请求失败 调用处理失败情况的函数defaults.error(responseText, xhr);}}}

这篇关于静态仔的挣扎第01天的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/596365。

相关文章

Apache伪静态(Rewrite).htaccess文件详解与配置技巧

Apache伪静态(Rewrite).htaccess文件详解与配置技巧

《Apache伪静态(Rewrite).htaccess文件详解与配置技巧》Apache伪静态(Rewrite).htaccess是一个纯文本文件,它里面存放着Apache服务器配置相关的指令,主要的... 一、.htAccess的基本作用.htaccess是一个纯文本文件，它里面存放着Apache服务器
阅读更多...
解读静态资源访问static-locations和static-path-pattern

解读静态资源访问static-locations和static-path-pattern

《解读静态资源访问static-locations和static-path-pattern》本文主要介绍了SpringBoot中静态资源的配置和访问方式,包括静态资源的默认前缀、默认地址、目录结构、访... 目录静态资源访问static-locations和static-path-pattern静态资源配置
阅读更多...
hdu 2602 and poj 3624(01背包)

hdu 2602 and poj 3624(01背包)

01背包的模板题。 hdu2602代码： #include<stdio.h>#include<string.h>const int MaxN = 1001;int max(int a, int b){return a > b ? a : b;}int w[MaxN];int v[MaxN];int dp[MaxN];int main(){int T;int N, V;s
阅读更多...
Thymeleaf：生成静态文件及异常处理java.lang.NoClassDefFoundError: ognl/PropertyAccessor

Thymeleaf：生成静态文件及异常处理java.lang.NoClassDefFoundError: ognl/PropertyAccessor

我们需要引入包： <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.springframework</groupId><artifactId>sp
阅读更多...
集中式版本控制与分布式版本控制——Git 学习笔记01

集中式版本控制与分布式版本控制——Git 学习笔记01

什么是版本控制 如果你用 Microsoft Word 写过东西，那你八成会有这样的经历： 想删除一段文字，又怕将来这段文字有用，怎么办呢？有一个办法，先把当前文件“另存为”一个文件，然后继续改，改到某个程度，再“另存为”一个文件。就这样改着、存着……最后你的 Word 文档变成了这样： 过了几天，你想找回被删除的文字，但是已经记不清保存在哪个文件了，只能挨个去找。真麻烦，眼睛都花了。看
阅读更多...
01 Docker概念和部署

01 Docker概念和部署

目录 1.1 Docker 概述 1.1.1 Docker 的优势 1.1.2 镜像 1.1.3 容器 1.1.4 仓库 1.2 安装 Docker 1.2.1 配置和安装依赖环境 1.3镜像操作 1.3.1 搜索镜像 1.3.2 获取镜像 1.3.3 查看镜像 1.3.4 给镜像重命名 1.3.5 存储，载入镜像和删除镜像 1.4 Doecker容器操作 1.4
阅读更多...
C++/《C++为什么要有静态成员函数》

C++/《C++为什么要有静态成员函数》

摘要        本文说明了什么是静态成员变量，什么是静态成员函数的概念，讨论了访问私有静态成员变量的三个方法。得出用静态成员函数访问静态私有成员变量是最佳方法即回答了“C++为什么要有静态成员函数“的问题。 类的静态成员 我们可以使用 static 关键字来把类成员定义为静态的。当我们声明类的成员为静态时，这意味着无论创建多少个类的对象，静态成员都只有一个副本。静态成员在类的所有对象中是
阅读更多...
c++的静态变化！

c++的静态变化！

静态成员 　　对于非静态成员，一个类的每个对象都自己存有一个副本，每个对象根据自己拥有的非静态的数据成员来区别于其他对象。而静态成员则解决了同一个类的多个对象之间数据和函数的共享问题。 　　静态数据成员 　　静态数据成员的作用是：实现同一类的不同对象之间的数据共享。 　　#include<IOSTREAM> 　　using namespace std; 　　class Po
阅读更多...
本地如何快速启动静态服务器

本地如何快速启动静态服务器

本地快速启动静态服务器 有许多第三方库可以帮助你快速启动一个静态服务器，甚至无需编写代码。通过命令行运行这些库后，它们会自动启动一个服务器并打开指定端口，展示当前目录下的文件内容： 电脑得提前安装NodeJS 1、http-server http-server 是一个轻量级的命令行工具，允许你快速启动一个静态文件服务器。 安装 npm install -g http-server
阅读更多...
linux基础IO——动静态库——进程编址、进程执行、动态库加载

linux基础IO——动静态库——进程编址、进程执行、动态库加载

前言：本节内容为基础IO部分的最后一节， 主要是为了讲一下动静态库里面的动态库如何加载到内存， 动态库的地址等等。 但是，这些内容牵扯到了程序的编址， 程序的加载， 进程的执行等等知识点， 所以，我们会从程序的编址讲起， 一直到进程的执行， 以及动态库加载结束。         ps：本节内容涉及到了进程地址空间， 磁盘的内容， 建议友友们了解相关知识后再来观看。 目录
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2