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","客户端地址")
更多推荐
ajax的那些事以及跨域问题的解决
发布评论