课程来源：coding.imooc.com/learn/list/…
题目
- 手写一个简易的ajax
- 跨域的常用实现方式
知识点
- XMLHttpRequest
- 状态码
- 跨域：同源策略，跨域解决方案
一、XMLHttpRequest
// get 请求
const xhr = new XMLHttpRequest() // XMLHttpRequest()同步和异步的情况都支持
xhr.open('GET', '/api', false) // true表示是异步的请求
xhr.onreadtstatechange = function () {
// 这里的函数异步执行，可参考之前JS基础中的异步模块
if(xhr.readyState === 4) {
if(xhr.status === 200) {
// console.log(
// JSON.parse(xhr.responseText)
// )
alert(xhr.responseText)
} else {
console.log('其他情况')
}
}
}
xhr.send(null)
// post 请求
const xhr = new XMLHttpRequest()
xhr.open('POST', '/login', true)
xhr.onreadtstatechange = function () {
// 这里的函数异步执行，可参考之前JS基础中的异步模块
if(xhr.readyState === 4) {
if(xhr.status === 200) {
alert(xhr.responseText)
} else {
console.log('其他情况')
}
}
}
const postData = {
userName: 'zhangsan',
password: 'xxx'
}
xhr.send(JSON.stringify(postData))
xhr.readyState
- 0 = （未初始化）还没有调用send()方法
- 1 = （载入）已调用send()方法，正在发送请求
- 2 = （载入完成）send()方法执行完成，已经接收到全部响应内容
- 3 = （交互）正在解析响应内容
- 4 = （完成）响应内容解析完成，可以在客户端调用
xhr.status
- 2xx - 表示成功处理请求，如200
- 3xx - 需要重定向，浏览器直接跳转，如301 302 304
- 4xx - 客户端请求错误，如404 403
- 5xx - 服务端错误
二、同源策略和跨域
- 什么是跨域（同源策略-如何绕过）
- JSONP
- CORS（服务端支持）
同源策略
- ajax请求时，浏览器要求当前网页和server必须同源（安全）
- 同源：协议、域名、端口，三者必须一致
- 前端：a.com:8080/；server：htt…
加载图片 css js可无视同源策略
<img src=跨域的图片地址/>
<link href=跨域的css地址/>
<script src=跨域的js地址></script>
<img/>可用于统计打点，可使用第三方统计服务
<link/><script>跨域
- 所有的跨域，都必须经过server端允许和配合
- 未经server端允许就实现跨域，说明浏览器有漏洞，危险信号
三、jsonp和cors
JSONP
- 访问https://imooc.com/，服务端一定返回一个html文件吗？
- 服务器可以任意动态拼接数据返回，只要符合html格式要求
- 同理于
<script src="https://imooc.com/getData.js"> <script>可绕过跨域限制- 服务器可以任意动态拼接数据返回
- 所以，
<script>就可以获得跨域的数据，只要服务端愿意返回
<script>
window.callback = function (data) {
// 这是我们跨域得到信息
console.log(data)
}
</script>
<script src="https://imooc.com/getData.js"></script>
<!-- 将返回 callback({ x: 100, y: 200 }) -->
jQuery实现jsonp
$.ajax({
url: 'http://localhost:8882/x-origin.json',
dataType: 'jsonp',
jsonpCallback: 'callback',
success: function (data) {
console.log(data)
}
})
CORS - 服务器设置 http header
// 第二个参数填写允许跨域的域名称，不建议直接写“*”
response.setHeader("Access-Control-Allow-Origin","http://localhost:8011");
response.setHeader("Access-Control-Allow-Headers","X-Requested-With");
response.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
// 接收跨域的cookie
response.setHeader("Access-Control-Allow-Credentials","true");
四、问题补充解答
手写一个简易的ajax
function ajax(url, successFn) {
const xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.onreadtstatechange = function () {
if(xhr.readyState === 4) {
if(xhr.status === 200) {
successFn(xhr.responseText)
}
}
}
xhr.send(null)
}
// 采用promise的形式
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.error(err))
跨域的实现方式
- JSONP
- CORS
存储
题目
- 描述cookie localStorage sessionStorage区别
知识点
- cookie
- localStorage和sessionStorage
一、cookie
cookie
- 本身用于浏览器和server通讯
- 被“借用”到本地存储来
- 可用document.cookie = '...' 来修改
cookie的缺点
- 存储大小，最大4KB
- http请求时需要发送到服务端，增加请求数据量
- 只能用document.cookie = '...' 来修改，太过简陋
二、html5存储
localStorage和sessionStorage
-
HTML5专门为存储而设计，最大可存5M
-
API简单易用 setItem getItem
-
不会随着http请求被发送出去
-
localStorage数据会永久存储，除非代码或手动删除
-
sessionStorage数据只存在于当前会话，浏览器关闭则清空
-
一般用localStorage会更多一些
三、问题补充解答
描述 cookie localStorage sessionStorage 区别
- 容量
- API易用性
- 是否跟随http请求发送出去
————————————————————————————————————————
