AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(一)

简介: AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)

根据视频进行整理

【https://www.bilibili.com/video/BV1WC4y1b78y?p=1】

视频资料

百度网盘:

链接:【https://pan.baidu.com/s/1nYiBc4hKzs8sYvAT5BZEZw】

提取码:1234

1. AJAX 简介

AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML。

通过 AJAX 可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据

AJAX 不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。

2. XML 简介

XML 可扩展标记语言。

XML 被设计用来传输和存储数据。在早期,AJAX使用XML进行数据传输,现在被JSON取代。

XML 和 HTML 类似,不同的是 HTML 中都是预定义标签(官方提前制定好的),而 XML 中没有预定义标签, 全都是自定义标签,用来表示一些数据。

比如,有一个学生数据:

name = "孙悟空" ; age = 18 ; gender = "男" ;

用 XML 表示:

<student> 
  <name>孙悟空</name> 
  <age>18</age> 
  <gender>男</gender> 
</student>

用 JSON 表示:

{
  "name":"孙悟空",
  "age":18,
  "gender":"男"
}

3. AJAX 的特点

3.1 AJAX 的优点

  1. 可以无需刷新页面而与服务器端进行通信。
  2. 允许你根据用户事件来更新部分页面内容(局部刷新、动态加载)。

3.2 AJAX 的缺点

  1. 没有浏览历史,不能回退
  2. 存在跨域问题(同源) (a.com向b.com请求数据就为跨域,AJAX默认是不允许的)
  3. SEO 不友好(由于使用AJAX动态加载数据,所以动态加载的数据在最初的页面html中不存在,不利于爬虫爬取数据)

4. HTTP 协议

HTTP(hypertext transport protocol)协议:

超文本传输协议,详细规定了浏览器和万维网服务器之间互相通信的规则。就是浏览器和服务器之间进行通讯的一种约定和规则。

HTTP协议:

通过浏览器向服务器发生请求报文和服务器向浏览器返回响应报文的方式,进行浏览器和服务器之间的通讯和数据传输。

4.1 请求报文

请求报文包括:

  • 请求行:包括:
  • 请求类型:GET/POST/PUT/DELETE/…
  • url路径:/s?ie=utf-8
  • http协议的版本:HTTP/1.1 (常用版本为1.1)
  • 请求头:
    包含的信息都为键值对
    Host: atguigu.com
    Cookie: name=guigu
    Content-type: application/x-www-form-urlencoded
    User-Agent: chrome 83
  • 空行
  • 请求体:
    向服务器发送的信息(可以为空)

4.2 响应报文

响应报文包括:

  • 响应行:
  • http协议的版本:HTTP/1.1
  • 响应状态码:200/404/403/401…
  • 响应状态字符串: OK/…
  • 响应头:
    包含的信息都为键值对
    Content-Type: text/html;charset=utf-8
    Content-length: 2048
    Content-encoding: gzip
  • 空行
  • 响应体 :
    服务器响应给浏览器的数据

4.3 浏览器中查看请求信息

  1. 鼠标右键 => 检查
  2. F12
  3. 笔记本 Fn => F12

5. Node.js

【Node.js----Node.js概述与安装和运行】

在Node.js环境下运行js文件(一定要在文件对应的位置运行)

node js文件名

6. Express

【Express】

AJAX阶段只是需要一个简单的服务器端进行请求的响应,只要能够创建一个基本的服务器即可

// 导入express
const express = require('express')
// 创建应用对象
const app = express()
// 创建路由对象
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/', (request, response) => {
  // 向客户端发送数据
  response.send( 'Hello from express' )
})
// 启动服务器进行监听
// 8000 端口 服务端在8000端口监听客户端向8000端口发送过来的请求
app.listen(8000, () => {
  console.log('服务端在8000端口监听')
} )

app.get('/server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
  ...
});

7. 发送GET请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: solid 1px #90b;
      }
    </style>
  </head>
  <body>
    <button>发送GET请求</button>
    <div id="result"></div>
    <script>
      // 获取按钮
      const btn = document.querySelector('button')
      // 获取div
      const div = document.querySelector('div')
      // 绑定事件
      btn.addEventListener( 'click', function() {
        // 创建发送AJAX请求的对象
        const xhr = new XMLHttpRequest()
        // 初始化
        // 设置请求的方法和url
        xhr.open( 'GET', 'http://127.0.0.1:8000/' )
        // 发送请求
        xhr.send()
        // 处理返回的数据
        // on 当...时候
        // readystate xhr 对象中的属性, 表示状态 0(未初始化的状态) 1(open方法调用完毕) 2(send方法调用完毕) 3(服务端返回部分结果) 4(服务端返回全部结果)
        // change  改变
        // 当状态改变会触发
        xhr.onreadystatechange = function() {
          // 服务端返回了所有的结果
          if ( xhr.readyState===4 ) {
            // 响应状态码 2xx 为成功
            if ( xhr.status>=200 && xhr.status<300 ) {
              // 返回的响应状态码
              console.log(xhr.status)
              // 返回的响应状态字符串
              console.log(xhr.statusText)
              // 返回的所有响应头
              console.log(xhr.getAllResponseHeaders)
              // 响应体(返回的数据)
              console.log(xhr.response)
              // 设置div中的文本
              div.innerHTML = xhr.response
            }
          }
        }
      } )
    </script>
  </body>
</html>

7.1 GET请求设置参数

在请求地址url后加上?,后面再加上 参数名=参数值&参数名=参数值&...,&为参数之间分隔

// 绑定事件
      btn.addEventListener( 'click', function() {
        // 创建发送AJAX请求的对象
        const xhr = new XMLHttpRequest()
        // 初始化
        // 设置请求的方法和url
        xhr.open( 'GET', 'http://127.0.0.1:8000/?name=zs&age=18' )
        ...
      })

edge浏览器



相关文章
|
4月前
|
人工智能 前端开发 JavaScript
webpack-dev-server代理后端一直报CORS跨域或500错误
在Vue项目中使用Webpack的devServer代理后端接口时,遇到500错误。问题根源在于浏览器请求中携带的Origin头导致服务器报错,而Postman测试正常。通过分析发现,调整或移除Origin头可解决问题。解决办法包括:1) 在代理配置中添加正确的Origin头;2) 删除请求中的Origin头。文章还深入解析了Origin头的作用及changeOrigin配置的实际意义,并附带相关文档链接,帮助开发者更好地理解与解决类似跨域问题。
288 12
|
6月前
|
前端开发 JavaScript 应用服务中间件
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
跨域问题是前端开发中常见且棘手的问题,但通过理解CORS的工作原理并应用合适的解决方案,如服务器设置CORS头、使用JSONP、代理服务器、Nginx配置和浏览器插件,可以有效地解决这些问题。选择合适的方法可以确保应用的安全性和稳定性,并提升用户体验。
4305 90
|
6月前
|
JSON 缓存 前端开发
对CORS(跨域)的一些见解
CORS(跨域资源共享)是W3C标准,用于解决AJAX跨源请求限制。浏览器与服务器需共同支持CORS,浏览器自动处理请求头,开发者无需额外操作。CORS分为简单请求与非简单请求:简单请求满足特定条件(如方法为GET/POST/HEAD且头信息有限制),浏览器直接发送;非简单请求需先进行“预检”请求(OPTIONS方法),确认服务器允许后才发送实际请求。服务器回应需包含Access-Control-Allow-Origin等字段,以控制跨域访问权限。
184 10
|
9月前
|
安全 Java 应用服务中间件
SpringBoot:CORS是什么?SpringBoot如何解决跨域问题?
CORS是Web开发中常见且重要的机制,SpringBoot通过提供注解、全局配置和过滤器等多种方式来解决跨域问题。选择适合的方式可以帮助开发者轻松处理跨域请求,提高应用的灵活性和安全性。
544 2
|
10月前
|
安全
CORS 跨域资源共享的实现原理是什么?
CORS 跨域资源共享的实现原理是什么?
|
10月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
132 0
|
10月前
|
安全
CORS 跨域资源共享的实现原理
CORS 跨域资源共享的实现原理
203 0
|
9月前
|
SQL 安全 网络安全
网络安全与信息安全:知识分享####
【10月更文挑战第21天】 随着数字化时代的快速发展,网络安全和信息安全已成为个人和企业不可忽视的关键问题。本文将探讨网络安全漏洞、加密技术以及安全意识的重要性,并提供一些实用的建议,帮助读者提高自身的网络安全防护能力。 ####
224 17
|
9月前
|
SQL 安全 网络安全
网络安全与信息安全:关于网络安全漏洞、加密技术、安全意识等方面的知识分享
随着互联网的普及,网络安全问题日益突出。本文将从网络安全漏洞、加密技术和安全意识三个方面进行探讨,旨在提高读者对网络安全的认识和防范能力。通过分析常见的网络安全漏洞,介绍加密技术的基本原理和应用,以及强调安全意识的重要性,帮助读者更好地保护自己的网络信息安全。
177 10
|
9月前
|
存储 SQL 安全
网络安全与信息安全:关于网络安全漏洞、加密技术、安全意识等方面的知识分享
随着互联网的普及,网络安全问题日益突出。本文将介绍网络安全的重要性,分析常见的网络安全漏洞及其危害,探讨加密技术在保障网络安全中的作用,并强调提高安全意识的必要性。通过本文的学习,读者将了解网络安全的基本概念和应对策略,提升个人和组织的网络安全防护能力。