ajax的那些事以及跨域问题的解决

ajax的那些事以及跨域问题的解决"/>

ajax的那些事以及跨域问题的解决

为了介绍ajax，手写先来一段ajax代码吧

手写ajax

// 一个最简单的get ajax请求
const xhr = new XMLHttpRequest()
xhr.oend("GET","/路径"，true)
xhr.onreadtstatechange = function() {if(xhr.readyState === 4) {if(xhr.status  === 200) {}}
}
xhr.send(null)

当然了如果是post请求的话

let data = JSOM.Stringify(postdata)
xhr.send(data)

回调类型的Ajax

function ajax（url）{return new Promise((resolve,reject) => {const xhr = new XMLHttpRequest()xhr.open("GET",url,true)xhr.onreadystatechange = function() {if(xhr.readyState === 4) {if(xhr.status === 200) {resolve(JSON.parse(xhr.responseText))} else {reject()}}}xhr.send(null)}) 
}

@[TOC](readyState 的那些事情)```bash
0  未初始化    还没有调用
1  载入       正在发送
2  载入完成    客户端收到响应
3  交互        解析返回
4  完成        解析完成

status的那些事情

status的那些事情

情)

// status可以说是我们程序员必须会的东西2** 表示成功200 成功3** 表示重定向301 永久重定向302 临时重定向304 资源未改变
4** 客户端错误403 没有权限404 请求地址错误（资源找不到）
5** 服务端错误500 

同源策略

在我们说跨域的时候，就必须要明白为什么会产生跨域，跨域是怎么来的。所以我们就要谈一谈同源策略
ajax请求的时候， 浏览器要求当前的网页和server必须是同源的，
而所谓的同源是指：协议，域名，端口三者必须一致
为什么会有这种要求呢？如果没有的话，我们随便做一个网站不就可以获取到支付宝，淘宝的数据了，那么我们的账号就不会安全
当然了，浏览器既然限制了ajax这种请求方式，就会对某些地方放宽松。
比如是 script的请求，img的请求，css的请求就不受同源策略的影响，而这也会为我们跨域提供了方法（jsonp）

JSONP原理

服务端可以任意动态拼接数据返回，只要符合html格式要求就可以，同理也可以返回js代码

 <script>var script = document.createElement('script');script.type = 'text/javascript';// 传参并指定回调执行函数为onBackscript.src = ':8080/login?user=admin&callback=onBack';document.head.appendChild(script);// 回调执行函数function onBack(res) {alert(JSON.stringify(res));}</script>

服务端返回如下（返回时即执行全局函数）：

onBack({"status": true, "user": "admin"})

当然了，如果服务器段进行了cors配置，就不用考虑这么多了

response.setHeader("Access-Controle-Allow-Origin","客户端地址")