文章目录
XMLHttpRequest
// post请求
const xhr = new XMLHttpRequest()
xhr.open('GET', '/login', false)
xhr.onreadystatechange = function() {
// 这里的函数异步执行
if(xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText)
}
}
}
const postData= {
userName: 'zhangsan'
password: 'xxx'
}
xhr.readyState
- 0 - UNSET尚未调用open方法
- 1 - OPENED open 方法已被调用
- 2 - HEADERS_RECEIVED send 方法已被调用,header 已被接收
- 3 - LOADING 下载中,responseText 已有部分内容
- 4 - DONE下载完成
xhr.status
- 2xx-表示成功处理请求,如200
- 3xx- 需要重定向,浏览器直接跳转,如301、302、304
- 4xx-客户端请求错误404、403
- 5xx- 服务器端错误
跨域
什么是跨域( 同源策略 )
- ajax 请求时,浏览器要求当前网页和 server 必须同源(安全)
- 同源:协议、域名、端口,三者必须一致
- 前端: http://a.com:8080/ ;server : https://b.com/api/xxx
加载css js可无视同源策略
- < img src=跨域的图片地址 />
- < link href=跨域的css地址 />
- < script src=跨域的js地址 >< /script >
JSONP
- < script>可绕过跨域限制
- 服务器可以任意动态拼接数据返回
- 所以,< script>就可以获得跨域的数据,只要服务端愿意返回
// jQuery 实现jsonp
$.