ajax 的核心API - XMLHttpRequest
面试题
- 手写一个简易的ajax
- 跨域常用的实现方式
- 手写一个简易的ajax
function ajax(url){
const p = 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 if(xhr.status === 404){
reject(new Error('404 not found'))
}
}
}
xhr.send(null)
})
return p;
}
const url = '/data/test.json'
ajax(url)
.then(res => console.log(res))
.catch(err => console.log(err))
- 跨域常用的实现方式
- JSONP
- CORS(纯服务端设置)
知识点
- XMLHttpRequest
- 状态码
- 跨域：同源策略，跨域解决方案
XMLHttpRequest
//get请求
const xhr = new XMLHttpRequest()
xhr.open("GET","/api",true) //true是支持异步，false是同步
xhr.onreadystatechange = function(){
//这里的函数异步执行，可参考之前JS基础中的异步模块
if(xhr.readyState === 4){
if(xhr.status === 200){
console.log(
JSON.parse(xhr.responseText)
)
alert(xhr.responseText)
}else if(xhr.status === 404){
console.log('404 not found')
}
}
}
xhr.send(null)
//post请求
const xhr = new XMLHttpRequest()
xhr.open("POST","/login",true)//true是支持异步，false是同步
xhr.onreadystatechange = function(){
//这里的函数异步执行，可参考之前JS基础中的异步模块
if(xhr.readyState === 4){
if(xhr.status === 200){
alert(xhr.responseText)
}
}
}
const postData = {
userName:'zc',
password:'xxd'
}
xhr.send(JSON.stringify(postData))
xhr.readyState
- 0 - (未初始化） 还没有调用send()方法
- 1 - (载入) 已调用send()方法，正在发送请求
- 2 - （载入完成） send()方法执行完成，已经接收到全部响应内容
- 3 - （交互） 正在解析响应内容
- 4 - （完成） 响应内容解析完成，可以在客户端调用 我们也是在状态4的时候才会获取responseText
xhr.status
- 2xx - 表示成功处理请求，如200
- 3xx - 需要重定向，浏览器直接跳转，如301 302 304
- 4xx - 客户端请求错误，如404 403
- 5xx - 服务器端错误
ajax常用插件工具
- jQuery
- fetch
- axios
什么是浏览器的同源策略
- 什么是跨域（同源策略）
- JSONP
- CORS(服务端支持)
同源策略
- ajax请求时，浏览器要求当前网页和server必须同源（安全）
- 同源：协议、域名、端口，三者必须一致
- 前端：a.com:8080; server:b.com/api/xxx 只是浏览器的要求， 服务器是可以跨域的，比如爬虫
加载图片css js 可无视同源策略
<img src=跨域的图片地址/><link href=跨域的css地址/><script src=跨域的js地址/></script><img/>可用于统计打点，可使用第三方统计服务<link/> <script>可使用CDN,CDN一般都是外域<script>可实现JSONP
跨域
- 所有的跨域，都必须经过server允许和配合
- 未经server端允许就实现跨域，说明浏览器有漏洞，危险信号
实现跨域的常见方式 - jsonp 和 CORS
- 访问
https://baidu.com/服务端一定返回一个html文件吗？- 服务器可以任意动态拼接数据返回，只要符合html格式要求
- 同理于
<script src='https://baidu.com/getData.js>
<scrip>可绕过跨域限制- 服务器可以任意动态拼接数据返回
- 所以，
<script>就可以获得跨域的数据，只要服务端愿意返回
什么是jsonp
-
首先，因为ajax无法跨域，然后开发者就有所思考
-
其次，开发者发现，
<script>标签的src属性是可以跨域的,把跨域服务器写成 调用本地的函数 ，回调数据回来不就好了？ -
json刚好被js支持（object）
-
调用跨域服务器上动态生成的js格式文件（不管是什么类型的地址，最终生成的返回值都是一段js代码）
-
这种获取远程数据的方式看起来非常像ajax，但其实并不一样
-
便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP。
-
传递一个callback参数给跨域服务端，然后跨域服务端返回数据时会将这个callback参数作为函数名来包裹住json数据即可。
//jsonp示例
<script>
window.callback = function(data){
//这是我们跨域得到的信息
console.log(data)
}
</script>
<script src='https://baidu.com/getData.js'></script>
<!-- 将返回callback({x:100,y:200}) -->
jQuery实现jsonp
$.ajax({
url:'http://localhost:8882/api.json',
dataType:'jsonp',
jsonpCallback:'callback',
success:function(data){
console.log(data)
}
})
jsonp与AJAX的区别是什么？
- ajax和jsonp本质上是不同的东西。
- ajax的核心是通过XmlHttpRequest获取非本页内容
- jsonp的核心则是动态添加
CORS - 服务器设置http header
通过服务端调置可解决跨域
