【Ajax】HTTP相关问题-GET-POST-XHR使用-jQuery中的ajax-跨域-同源-jsonp-cors

文章目录

• 1. Ajax概述
• • 1.1 AJAX 简介
  • 1.2 XML 简介
  • 1.3 AJAX 的特点
  • • 1.3.1 AJAX 的优点
    • 1.3.2 AJAX 的缺点
• 2. HTTP相关问题
• • 2.1 MDN 文档
  • 2.2 HTTP 请求交互的基本过程
  • 2.3 HTTP 请求报文
  • • 1. 请求行
    • 2. 多个请求头
    • 3. 请求体
  • 2.4 HTTP 响应报文
  • 2.5 post 请求体参数格式
  • 2.6 常见的响应状态码
  • 2.7 不同类型的请求及其作用
  • 2.8 API 的分类
  • 2.9 区别 一般http请求 与 ajax请求
• 3. 原生AJAX 的基本使用 XHR
• • 3.0 准备工作
  • • 3.0.1 安装node.js
    • 3.0.2 安装express（服务端框架）
    • 3.0.3 安装nodemon自动重启工具
  • 3.1 理解
  • 3.2 核心对象使用步骤
  • • 3.2.1 创建XMLHttpRequest 对象
    • 3.2.2 设置请求信息（请求方法和url）
    • 3.2.3 发送请求
    • 3.2.4 接收响应（事件绑定，处理服务端返回的结果）
  • 3.3 使用案例
  • • 3.3.1 GET 请求
    • • # GET 请求设置请求参数
    • 3.3.2 POST请求
    • • # 设置请求头信息
  • 3.4 json数据请求
  • 3.5 请求超时与网络异常
  • 3.6 取消请求
  • 3.7 请求重复发送问题
  • 3.8 解决 IE 缓存问题
  • 3.9 AJAX 请求状态
  • 3.10 API总结
• 4. jQuery 中的AJAX
• • 4.1 get 请求
  • 4.2 post 请求
  • 4.3 通用方法
• 5. 跨域
• • 5.1 同源策略
  • 5.2 如何解决跨域
  • • 5.2.1 JSONP
    • • 1) JSONP 是什么
      • 2) JSONP 怎么工作的？
      • 3) JSONP 的使用
      • • 1.动态的创建一个script 标签
        • 2.设置script 的src，设置回调函数
        • 3.将script 添加到body 中
        • 4.服务器中路由的处理
      • 4) jQuery 中的JSONP
    • 5.2.2 CORS
    • • 1) CORS 是什么？
      • 2) CORS 怎么工作的？
      • 3) CORS 的使用

1. Ajax概述

1.1 AJAX 简介

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

1.2 XML 简介

XML 可扩展标记语言。
XML 被设计用来传输和存储数据。
XML 和HTML 类似，不同的是HTML 中都是预定义标签，而XML 中没有预定义标签，
全都是自定义标签，用来表示一些数据。

比如说我有一个学生数据：
name = “孙悟空” ; age = 18 ; gender = “男” ;
用XML 表示：

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

现在已经被JSON 取代了。

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

1.3 AJAX 的特点

1.3.1 AJAX 的优点

1. 可以无需刷新页面而与服务器端进行通信
2. 允许你根据用户事件来更