AJAX的前因后果

前因后果"/>

AJAX的前因后果

几种不同的请求方式

• 用 form 可以发请求，但是会刷新页面或新开页面
• 用 a 可以发 get 请求，但是也会刷新页面或新开页面
• 用 img 可以发 get 请求，但是只能以图片的形式展示
• 用 link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示
• 用 script 可以发 get 请求，但是只能以脚本的形式运行

什么是 AJAX

1. 使用 XMLHttpRequest 发请求
2. 服务器返回 XML 格式的字符串
3. JS 解析 XML，并更新局部页面

而现阶段基本采用 JSON 替代 XML

如何实现 AJAX

let request = new XMLHttpRequest()request.open('get', '/xxx') // 配置requestrequest.send()request.onreadystatechange = ()=>{ //监听readystateif(request.readyState === 4){if(request.status >= 200 && request.status < 300){let string = request.responseText// 把符合 JSON 语法的字符串// 转换成 JS 对应的值let object = window.JSON.parse(string) // JSON.parse 是浏览器提供的}}}
复制代码

同源策略

• 只有 协议+端口+域名 一模一样才允许发 AJAX 请求

CORS 跨域

突破同源策略就需要使用 CORS 跨域，在服务器端加入如下代码：

response.setHeader('Access-Control-Allow-Origin', '/xxx')