Ajax

1.知识点

• XMLHttpRequest
• 状态码
• 跨域：同源策略，跨域解决方案

Ajax请求

//GET请求
const xhr = new XMLHttpRequest();
xhr.open('GET',url,true); // 此时还没有发送   当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status === 200){
            alert(xhr.response)
        }
    }
}
xhr.send(null)
//POST请求
const xhr = new XMLHttpRequest();
xhr.open('POST',url,true); // 此时还没有发送   当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status === 200){
            alert(xhr.response)
        }
    }
}
const postData = {
    userName : "zhangsan",
    password : "xx"
}
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-服务器端错误

什么是跨域

• 跨域是浏览器为了安全而做出的限制策略
• 浏览器请求必须遵循同源策略：同域名、同端口、同协议

同源策略

• ajax请求时，浏览器要求当前网页和server必须同源（安全）
• 加载图片css js可以无视同源策略

<img src=跨域的图片地址/>
<link href=跨域的css地址/>
<script src=跨域的js地址></script>

• img可用于统计打点，可以使用三方统计服务
• link、script可使用CDN，CDN一般都在外域
• script可以实现JSONP

CORS跨域

• 服务器端设置，前端直接调用
• 说明：后台允许前端某个站点进行访问

JSONP跨域

• 前台适配，后台配合
• 说明：前后台同时改造

典型题

手写一个简易的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 = 'xx.json'
ajax(url).then(res=>console.log(res))
.catch(err=>console.log(err))

跨域常用的实现形式

• CORS跨域
• JSONP跨域
• 代理跨域