关于前端:面试回顾ajax常见问题总结

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>ajax 演示 </title>
    </head>
    <body>
        <p> 一段文字 1</p>

        <script src="./ajax.js"></script>
    </body>
</html>

{"name": "zhangsan"}

0 –（未初始化）还没有调用 send()办法
1 –（载入）已调用 send()办法，正在发送申请
2 –（载入实现）send()办法执行实现，曾经接管到全副响应内容
3 –（交互）正在解析响应内容
4 –（实现）响应内容解析实现，能够在客户端调用

2xx – 示意胜利解决申请，如 200
3xx – 须要重定向，浏览器间接跳转，如 301（永恒重定向），302（长期重定向），304（资源未扭转，应用缓存）
4xx – 客户端申请谬误，如 404，403
5xx – 服务器端谬误

const xhr = new XMLHttpRequest()
xhr.open('GET', '/data/test.json', true) // 设置 true 为异步申请
xhr.onreadystatechange = function () {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)

ajax 申请时，浏览器 要求以后网页和 server 必须同源（平安）
同源：协定、域名、端口，三者必须统一
前端：http://a.com:8080/ ; server：https://b.com/api/xxx（协定、域名、端口均不雷同）

<img /> 可用于统计打点，应用第三方统计服务
<link /><script> 可应用 CDN，CDN 个别都是外域
<script> 可实现 JSONP

script 可绕过跨域限度
服务器能够任意拼接数据返回
所以，script 就能够取得跨域的数据，只有服务端违心返回

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>jsonp 演示 </title>
    </head>
    <body>
        <p> 一段文字 1</p>

        <script>
            window.abc = function (data) {console.log(data)
            }
        </script>
        <script src="http://localhost:8002/jsonp.js?username=xxx&callback=abc"></script>
    </body>
</html>

//jsonp.js
abc({ name: 'xxx'}
)

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 || xhr.status === 500) {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))

关于前端:面试回顾ajax常见问题总结

html 模板

/data/test.json

手写 XMLHttpRequest

xhr.readyState

xhr.status

跨域

同源策略

img、css、js 可忽视同源策略

JSONP

CORS – 服务器设置 http header

手写一个繁难的 ajax