AJAX

这是一篇关于AJAX的思维导图，包括：简介、xml、AJAX特点、同步和异步、进程和线程、XMLHttpRequest对象、请求类型。

AJAX

• 简介
  • AJAX 是 异步 JS 和 XML。英文全称：Asynchronous Javascript And XML。是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
• xml
  • 可扩展的标记语言。可以认为HTML是XML的子集。xml主要用来传输数据的，是一种数据交换格式，是比较旧的数据交换格式，原来webService中使用。后面再介绍一种数据交换格式：JSON
• AJAX特点
  • 不需要重新加载整个网页，更改局部网页内容。即无刷新，用户体验好。
  • 异步加载数据，用户不用等待数据加载过程。用户体验好。
  • 缺点：1. 没有浏览历史，不能回退，2. 存在跨域问题，3. SEO不友好（爬虫）。
• 同步和异步
  • 同步：一句代码不执行完，下一句代码不能执行，JS语句顺序执行的过程就是同步。同步会造成阻塞代码。特别是执行数据量大的业务逻辑时，用户体验不好。
  • 异步：代码的执行没有顺序，代码并行执行，哪句代码执行的时间短，哪句代码先执行完，异步不会造成阻塞代码。用户体验好。而AJAX就是一种异步的操作。
• 进程和线程
  • 专业解读：进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配和调度的基本单位，是操作系统结构的基础。简单理解：操作系统中一个程序运行的环境就是进程，比如：QQ，360管家，浏览器等
  • 专业解读：线程（Thread）是操作系统能够进行运算调度的最小单位。它被包含在进程之中，是进程中的实际运作单位。简单理解：如果把进程比作一个车间，那么线程就是车间中的工人。
• XMLHttpRequest对象
  • XMLHttpRequest 对象是js提供的进行AJAX请求操作的对象。也是最早的AJAX技术方案。它内置很多的API。随着技术的发展，各大互联网公司在XMLHttpRequest基础上，封装了各种脚本库，如:jquery.js,axios.js。另外JS语言本身也在发展，交提供了新的异步方案，比如：Promise对象, fetch()方法，async/await。
• 请求类型
  • GET请求：主要用来查询数据。
    • get请求:把请求参数拼接在url之后;get请求具有缓存，如果俩次请求url如果没有发生变化，get请求从缓存里面取数据，可以通过传递时间戳把缓存机制清除掉；get请求相对来说不安全；get请求传递数据量有限
  • POST请求：主要用来提交数据。
    • post请求:把请求参数追加到请求体里面；post请求没有缓存的；post请求相对来说安全；post请求传递数据量比get数据量要大
  • PUT请求：主要用来修改数据。
  • DELETE请求：主要用来删除数据。
• JSON
  • 简述：JSON: JavaScript Object Notation(JavaScript 对象表示法)。是一种轻量级的数据交换格式，也是目前最流行的数据交换格式。它类似于XML。但JSON 比 XML 更小、更快，更易解析。
  • 语法要求：
    • JSON中不能添加注释。
    • JSON中的属性名称必须使用双引号包裹。
    • JSON中最后属性值后的逗号不能添加。
    • JSON中属性值不能使用JS API。
    • JSON中属性值如果是字符串必须使用双引号包裹。
    • JSON中属性值不能是JS函数，但可以是数组，布尔，数字，字符串。
  • JSON方法：
    • ----------------------------------------------------------------------------------------
    • JSON.parse()把字符串格式的数据转换为JS对象。方便开发者调用。
    • JSON.stringify()把JS对象转换为字符串格式的数据。方便开发者调用。
• URL和URI
  • 从上面的例子来看，你可能觉得URI和URL可能是相同的概念，其实并不是，URI和URL都定义了资源是什么，但URL还定义了该如何访问资源。URL是一种具体的URI，它是URI的一个子集，它不仅唯一标识资源，而且还提供了定位该资源的信息。URI是一种语义上的抽象概念，可以是绝对的，也可以是相对的，而URL则必须提供足够的信息来定位，是绝对的。
• 同源和非同源
  • 同源策略：两个或多个URL地址的协议相同，域名相同，端口相同都相同时，这些URL之间就同源的URL，它们之间遵守同源策略。端口号默认是80
  • 非同源策略：如果协议名 ip地址 端口号三者有其一不一样就是非同源URL。
  • 非同源策略限制：
    • Cookie、LocalStorage 和 IndexDB 无法读取。
    • DOM 无法获得。
    • AJAX 请求不能发送。
  • 跨域：非同源就是跨域。解决AJAX跨域问题使用JSONP技术
• JSONP
  • JSONP是JSON with padding(填充式JSON或参数式JSON)的简写，是应用JSON的一种新方法（临时方案，“取巧”行为），常用于服务器与客户端跨域通信，在后来的Web服务中非常流行。
  • JSONP的原理：网页通过添加一个<script>元素，向服务器请求JSON数据（把src设置api的接口地址，并添加callback，由于src属性天生就支持跨域），这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
  • JSONP的优缺点（了解）
    • 最大优点：JSONP跨越同源策略。 主要缺点：只支持GET请求而不支持POST等其他Http请求。POST，PUT， DELETE要想要跨域需要使用新技术CORS（标准）。
  • JSON和JSONP的区别（了解）
    • JSON不支持跨域，支持各种http请求，JSON已形成标准。
    • JSONP支持跨域，只支持GET请求。JSONP是“取巧”技术，不是标准，仅仅利用了HTML标签的某个特性。
  • JSONP和AJAX的区别（了解）
    • AJAX的核心是通过xmlHttpRequest获取非本页内容，从而实现页面的无刷新，提升用户体验；
    • JSONP的核心是动态添加script标签调用服务器提供的js脚本。
• 设置请求头
  • Content-type：请求内容的类型，请求头数据都是通过键值对进行设置
  • Content-length：请求内容的长度
  • application/x-www-form-urlencoded：请求数据以键值对形式发个服务器的
  • multipart/form-data ：上传图片的时候采用该编码格式