# 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 事件 请求超时后触发