Ajax 概述

2024-07-29 16:28:22 浏览数 (4)

1.1 AJAX 简介

  1. AJAX 全称为 (Asynchronous JavaScript And XML)，就是异步的 JS 和 XML。 通过 AJAX 可以在浏览器中向服务器发送异步请求
  2. 最大的优势：无刷新获取数据。 AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

1.2 XML简介

XML 可扩展标记语言。 XML 被设计用来传输和存储数据

XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签， 全都是自定义标签，用来表示一些数据

例如:

代码语言：javascript复制
比如说我有一个学生数据： 
      name = "孙悟空" ; age = 18 ; gender = "男" ; 
用 XML 表示： 
      <student>
   		<name>孙悟空</name>
		<age>18</age>
		<gender>男</gender>
	  </student>

现在已经被 JSON 取代了。

代码语言：javascript复制
用 JSON 表示：

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

1.3 AJAX 的特点

1.3.1 AJAX 的优点
  • 可以无需刷新页面而与服务器端进行通信。
  • 允许你根据用户事件来更新部分页面内容。
1.3.2 AJAX 的缺点
  • 没有浏览历史，不能回退
  • 存在跨域问题(同源)
  • seo不友好

2. HTTP相关问题

2.1 MDN 文档

Http概述:developer.mozilla.org/zh-CN/docs/…

2.2 HTTP 请求交互的基本过程
  1. 前后应用从浏览器端向服务器发送HTTP 请求(请求报文)
  2. 后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)
  3. 浏览器端接收到响应, 解析显示响应体/调用监视回调
2.3 HTTP 请求报文
  1. 请求行 method url GET /product_detail?id=2 POST /login
  2. 多个请求头
  • Host: www.baidu.com
  • Cookie: BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706;
  • Content-Type: application/x-www-form-urlencoded 或者application/json
  1. 请求体 username=tom&pwd=123 {"username": "tom", "pwd": 123}
2.4 HTTP 响应报文

1.响应状态行:

status statusText

2.多个响应头:

Content-Type: text/html;charset=utf-8 Set-Cookie: BD_CK_SAM=1;path=/

3.响应体:

html 文本/json 文本/js/css/图片...

2.5 post 请求体参数格式
  1. Content-Type: application/x-www-form-urlencoded;charset=utf-8 用于键值对参数，参数的键值用=连接, 参数之间用&连接 例如: name=小明&age=12
  2. Content-Type: application/json;charset=utf-8 用于 json 字符串参数 例如: {"name": "小明", "age": 12}
  3. Content-Type: multipart/form-data 用于文件上传请求
2.6 常见的响应状态码
  1. 200 OK 请求成功。 一般用于GET 与POST 请求
  2. 201 Created 已创建。 成功请求并创建了新的资源
  3. 401 Unauthorized 未授权/请求要求用户的身份认证
  4. 404 Not Found 服务器无法根据客户端的请求找到资源
  5. 500 Internal Server Error 服务器内部错误，无法完成请求
代码语言：javascript复制
// 判断(服务端返回了所有的结果)

        if (xhr.readyState === 4) {

         //判断响应码 200 404 403 401 500

          //2xx 成功

          if (xhr.status >= 200 && xhr.status < 300) {

            // 处理结果 行 头 空格 体

            // // 1/响应行

            // console.log(xhr.status);//状态码

            // console.log(xhr.statusText);//状态字符串

            // console.log( xhr.getAllResponseHeaders);//所有响应头
2.7 不同类型的请求及其作用
  • GET: 从服务器端读取数据（查）
  • POST: 向服务器端添加新数据 （增）
  • PUT: 更新服务器端已经数据 （改）
  • DELETE: 删除服务器端数据 （删）
2.8 区别 一般http请求 与 ajax请求
  1. ajax请求 是一种特别的 http请求
  2. 对服务器端来说, 没有任何区别, 区别在浏览器端
  3. 浏览器端发请求: 只有XHR 或fetch 发出的才是ajax 请求, 其它所有的都是非ajax 请求
  4. 浏览器端接收到响应

(1) 一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面 (2) ajax请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调函数并传入响应相关数据

学习视频来源于 :【尚硅谷】3小时Ajax入门到精通_哔哩哔哩_bilibili

ajax 服务器 连接 浏览器 数据

1 人点赞