ajax

手写一个简单的ajax

跨域的常用实现方式

知识点

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

//get请求
const xhr = new XMLHttpRequest()
xhr.open("GET","/api",false)
xhr.onreadystatechange = function(){
    //这里的函数异步执行，可参考之前JS 基础中的异步模块
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            alert(xhr.responseTexe)
        }
    }
}
xhr.send(null)

console.log("ajax")
const xhr = new XMLHttpRequest()
//false代表异步请求，因为是网络请求，不能卡顿
xhr.open('GET','/test.json',false)
xhr.onreadystatechange = function (){
    if(xhr.readyState ===4){
        if(xhr.status ===200){
            alert(xhr.responseText)
        }else{
            console.log("other situatio")
        }
    }
}
xhr.send(null)

const xhr = new XMLHttpRequest()
//true，因为是网络请求，不能卡顿
xhr.open('POST','/login',true)
xhr.onreadystatechange = function (){
    if(xhr.readyState ===4){
        if(xhr.status ===200){
            alert(xhr.responseText)
        }else{
            console.log("other situatio")
        }
    }
}
const postData={
    userName:'jason',
    password:'xxx'
}
xhr.send(JSON stringify(postData))

xhr.readyState

0:未初始化 还没调用send（）方法
1：载入，已调用send（）方法，正在发送请求
2：载入完成 send()方法执行完成，已经接收到
3：交互 正在解析相应内容
4：完成 相应内容解析完成，可以在客户端调用

xhr.status

2xx：表示成功
3xx：重定向，浏览器直接跳转
4xx：客户端请求错误，404 403无权限
5xx：服务器端报错