【面试题】Ajax

1. Ajax请求

1.1 get请求方式

const xml = new XMLHttpRequest()
xml.open("get", "test.json", true)   
xml.send(null)
xml.onreadystatechange = function(){
    if(xml.readyState === 4 && xml.status === 200){
        console.log(JSON.parse(xml.responseText))
        alert(xml.responseText)
    }
}
1
2
3
4
5
6
7
8
9

后端的数据

{
    "name":"zhangsan"
}
1
2
3

1.2 post请求方式

post请求方式发送请求参数，需要使用JSON.stringify(xxx),将数据转为json格式。

const xml = new XMLHttpRequest()
xml.open("post", "/login", true)

xml.onreadystatechange = function(){
    if(xml.readyState === 4 && xml.status === 200){
        alert(xml.responseText)
    }
}

const postData = {
    userName: 'zhangsan',
    password: 'xxx'
}

xml.send(JSON.stringify(postData))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

1.3 readyState

readyState是请求的状态：

• 0：UNSET，尚未调用open方法
• 1：OPENED，open方法已被调用
• 2：HEADERS_RECEIVED，send方法已被调用，header已被接收
• 3：LOADING，下载中，responseText已有部分内容
• 4：DONE，下载完成

1.4 status

status是服务器返回的状态码：

• 2xx：表示成功处理请求，如200
• 3xx：需要重定向，浏览器直接跳转，如301 302 304。301是永久重定向，重定向为a，若是访问b也会重定向a。302是临时重定向，只重定向一次。304是资源未改变，服务器并没有返回新的资源。
• 4xx：客户端请求错误，如404 403。404是请求的地址有错误，服务器找不到页面。403是没有访问权限。
• 5xx：服务器端错误

2. 浏览器同源策略

进行Ajax请求时，浏览器要求当前网页和服务器必须同源。同源指的是请求的URL地址和当前页面的URL地址中的协议、域名、端口三者必须一致。

• 加载图片、CSS、JS可无视同源策略。
• 所有的跨域，都必须经过服务器端允许和配合。
• 未经服务器端允许就实现跨域，说明浏览器有漏洞。

3. 跨域解决方案

3.1 方法1：JSONP

3.2 方法2：CORS-服务器设置 http header

4. 手动封装Ajax请求函数

function ajax(url){
    const p = new Promise((resolve, reject)=>{
        const xml = new XHLHttpRequest()
        xml.open("get", url, true)
        xml.send(null)
        xml.onreadystatechange = function(){
            if(xml.readyState === 4 && xml.status === 200){
                resolve(JSON.parse(xml.responseText))
            }else if(xml.status === 404){
                reject(new Error('404 not found'))
            }
        }
    })
    return p
}

const url = '/data/test.json'
ajax(url)
.then(res=>console.log(res))
.catch(err=>console.error(error))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20