AJAX

这里写目录标题

  • 原生AJAX
    • [XML 简介](#XML 简介)
    • [AJAX 的特点](#AJAX 的特点)
      • [AJAX 的优缺点](#AJAX 的优缺点)
    • HTTP协议
      • 请求报文
      • 响应报文
      • [AJAX 请求的基本操作](#AJAX 请求的基本操作)
      • [AJAX 设置请求参数](#AJAX 设置请求参数)
      • [AJAX POST设置请求体](#AJAX POST设置请求体)
      • [AJAX 设置请求头](#AJAX 设置请求头)
      • [AJAX 服务端响应JSON数据](#AJAX 服务端响应JSON数据)
      • [AJAX 请求超时和网络异常处理](#AJAX 请求超时和网络异常处理)
      • [Axios 发送AJAX 请求](#Axios 发送AJAX 请求)
      • Axios函数发送AJAX请求
      • [fetch 函数发送AJAX 请求](#fetch 函数发送AJAX 请求)

原生AJAX

XML 简介

XML 被设计用来传输和存储 数据。HTML 是在网页中呈现 数据的。XML 数据交互,HTML 数据呈现。

XML 和 HTML 类似,不同的是HTML 中都是预定义标签,而 XML 中没有预定义标签。预定义标签是已经被定义的标签,不能改变,比如 strong,ul标签等。,而 XML 中全都是自定义标签,用来表示一些数据,比如name,age,gender等。

不过现在XML 已经被JSON取代了

AJAX 的特点

AJAX 的优缺点

优点:

1.可以无需刷新页面而与服务器端进行通信,这也是创建AJAX 的初衷。

2.允许你根据用户事件 来更新部分页面内容。事件例如鼠标点击经过事件等等。

缺点:

1.没有浏览历史,不能回退

2.存在跨域问题(同源)。跨域是从一个服务端到另一个服务端比如从a.com -> b.com。AJAX 不能跨域。

3.对SEO 不友好,也就是对爬虫不友好,不能找到数据。

HTTP协议

HTTP(hypertext transport protocol)协议【超文本传输协议】,协议详细规定了浏览器和万维网服务器之间互相通信的规则。

请求报文

如果行中的是 GET ,那么请求体就是空的,如果是POST,请求体可以不为空。

请求行的三个内容:请求类型,URL路径,协议版本

响应报文

响应行的三个内容:协议版本,响应状态码,响应字符串。

AJAX 请求的基本操作

0表示初始值,1表示open初始化完成,2表示send发送完成,3表示服务器返回了部分结果,4表示服务器返回了所有的结果。

  1. 创建对象
    const xhr = new XMLHttpRequest()
    2.初始化
    xhr.open('GET','URL')
    3.发送
    xhr.send()
    4.事件绑定 处理服务端返回的结果
    xhr.onreadystatechange = function(){
    判断
    }

AJAX 设置请求参数

AJAX POST设置请求体

AJAX 设置请求头

xhr.setRequestHeader('名字','值')

名字和值可以是预定义也可以是自定义。

AJAX 服务端响应JSON数据

服务器将字符串(请求体)返回给客户端,客户端要将返回的字符串转换为对象。有两种方式。

手动对数据进行转化:

自动转化:

设置响应体数据的类型

xhr.responseType = 'json'

AJAX 请求超时和网络异常处理


手动取消。abort()方法。

Axios 发送AJAX 请求

GET 请求

baseURL 是为了简化代码。

POST 请求

先是请求体,再是其他请求。

Axios函数发送AJAX请求


fetch 函数发送AJAX 请求

相关推荐
gnip22 分钟前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫1 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel2 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼3 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手6 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法6 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku7 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode7 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu7 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu7 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript