Ajax
Ajax
原生Ajax
1.Ajax 是什么 Ajax 是 Asynchronous JavaScript and XML（异步 JavaScript 和 XML）的简写 Ajax 中的异步：可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据 XML(可扩展标记语言)是前后端数据通信时传输数据的一种格式 XML 现在已经不怎么用了，现在比较常用的是 JSON Ajax 其实就是浏览器与服务器之间的一种异步通信方式 使用 Ajax 可以在不重新加载整个页面的情况下，对页面的某部分进行更新 2.搭建 Ajax 开发环境 Ajax 需要服务器环境，非服务器环境下，很多浏览器无法正常使用 Ajax
Ajax的基本用法
- XMLHttpRequest
- Ajax的使用步骤
- 使用Ajax完成前后端通信
Ajax 想要实现浏览器与服务器之间的异步通信，需要依靠 XMLHttpRequest，它是一个构造函数。
不论是 XMLHttpRequest，还是 Ajax，都没有和具体的某种数据格式绑定。
Ajax的使用步骤
1.创建 xhr 对象 const xhr = new XMLHttpRequest();
2.监听事件，处理响应 当获取到响应后，会触发 xhr 对象的 readystatechange 事件，可以在该事件中对响应进行处理
readystatechange 事件监听 readyState 这个状态的变化 它的值从 0 ~ 4，一共 5 个状态 0：未初始化。尚未调用 open() 1：启动。已经调用 open()，但尚未调用 send() 2：发送。已经调用 send()，但尚未接收到响应 3：接收。已经接收到部分响应数据 4：完成。已经接收到全部响应数据，而且已经可以在浏览器中使用了
3.准备发送请求 xhr.open( 'HTTP 方法 GET、POST、PUT、DELETE', '地址 URL ./index.html ./index.xml ./index.txt', true ); 调用 open 并不会真正发送请求，而只是做好发送请求前的准备工作 3.发送请求 调用 send() 正式发送请求 send() 的参数是通过请求体携带的数据 xhr.send(null);
JSON
1.JSON 是什么
Ajax发送和接收数据的一种格式
JSON 全称是 JavaScript Object Notation
2.为什么需要 JSON
JSON 有 3 种形式，每种形式的写法都和 JS 中的数据类型很像，可以很轻松的和 JS 中的数据类型互相转换
JS->JSON->PHP/Java
PHP/Java->JSON->JS
JSON的3种形式
1.简单值形式
JSON 的简单值形式就对应着 JS 中的基础数据类型 数字、字符串、布尔值、null 注意事项：
- JSON 中没有 undefined 值
- JSON 中的字符串必须使用双引号
- JSON 中是不能注释的
2.对象形式
JSON 的对象形式就对应着 JS 中的对象
注意事项：
- JSON 中对象的属性名必须用双引号，属性值如果是字符串也必须用双引号
- JSON 中只要涉及到字符串，就必须使用双引号
- 不支持 undefined
3.数组形式
JSON 的数组形式就对应着 JS 中的数组
注意事项：
- 数组中的字符串必须用双引号
- JSON 中只要涉及到字符串，就必须使用双引号
- 不支持 undefined
JSON的常用方法
1.JSON.parse() JSON.parse() 可以将 JSON 格式的字符串解析成 JS 中的对应值 一定要是合法的 JSON 字符串，否则会报错
2.JSON.stringify() JSON.stringify() 可以将 JS 的基本数据类型、对象或者数组转换成 JSON 格式的字符串
跨域
1.跨域是什么
向一个域发送请求，如果要请求的域和当前域是不同域，就叫跨域 不同域之间的请求，就是跨域请求
2.什么是不同域，什么是同域
协议、域名、端口号，任何一个不一样，就是不同域 与路径无关，路径一不一样无所谓
3.跨域请求为什么会被阻止
阻止跨域请求，其实是浏览器本身的一种安全策略--同源策略 其他客户端或者服务器都不存在跨域被阻止的问题
4.跨域解决方案
- CORS跨域资源共享
- JSONP
优先使用 CORS 跨域资源共享，如果浏览器不支持 CORS 的话，再使用 JSONP
CORS
Access-Control-Allow-Origin: * 表明允许所有的域名来跨域请求它，* 是通配符，没有任何限制 只允许指定域名的跨域请求 Access-Control-Allow-Origin: http://127.0.0.1:5500
使用 CORS 跨域的过程：
- 浏览器发送请求
- 后端在响应头中添加 Access-Control-Allow-Origin 头信息
- 浏览器接收到响应
- 如果是同域下的请求，浏览器不会额外做什么，这次前后端通信就圆满完成了
- 如果是跨域请求，浏览器会从响应头中查找是否允许跨域访问
- 如果允许跨域，通信圆满完成
- 如果没找到或不包含想要跨域的域名，就丢弃响应结果
3.CORS 的兼容性
IE10 及以上版本的浏览器可以正常使用 CORS
JSONP
1.JSONP 的原理 script 标签跨域不会被浏览器阻止 JSONP 主要就是利用 script 标签，加载跨域文件
2.使用 JSONP 实现跨域 服务器端准备好 JSONP 接口
XHR对象
XHR的属性
1.responseType 和 response 属性
responseText 只能在没有设置 responseType 或者 responseType = '' 或 'text' 的时候才能使用
2.timeout 属性
设置请求的超时时间(单位 ms)
3.withCredentials 属性
指定使用 Ajax 发送请求时是否携带 Cookie 使用 Ajax 发送请求，默认情况下，同域时，会携带 Cookie；跨域时，不会 最终能否成功跨域携带 Cookie，还要看服务器同不同意
XHR方法
1.abort() 终止当前请求 一般配合 abort 事件一起使用 2.setRequestHeader() 可以设置请求头信息 xhr.setRequestHeader(头部字段的名称, 头部字段的值); 请求头中的 Content-Type 字段用来告诉服务器，浏览器发送的数据是什么格式的
XHR的事件
1.load 事件 响应数据可用时触发 2.error 事件 请求发生错误时触发 3.abort 事件 调用 abort() 终止请求时触发 4.timeout 事件 请求超时后触发