系列文章目录

---

---

JS-Web-API-Ajax

一、ajax 的核心API - XMLHttpRequest

1、原生 AJAX 发送 GET 请求

xhr.readyState 不同值的不同意思：

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

xhr.status 不同值的不同意思：

• 2xx - 表示成功处理请求，如 200
• 3xx - 需要重定向，浏览器直接跳转，如 301（永久重定向） 302（临时重定向） 304（资源未改变）
• 4xx - 客户端请求错误，如 404 403
• 5xx - 服务端错误

	// test.json
	{ "name": "zhangsan"}
1
2

    const xhr = new XMLHttpRequest()
    xhr.open('GET', './test.json', true) // true 表示异步
    xhr.onreadystatechange = function () {
        if(xhr.readyState === 4) {
            if(xhr.status === 200) {
                console.log(JSON.parse(xhr.responseText))
            } else {
                console.log('其他情况')
            }
        } 
    }
    xhr.send(null)
1
2
3
4
5
6
7
8
9
10
11
12

2、原生 AJAX 发送 POST 请求

示例：登录的请求，注意：需要传参

    const xhr = new XMLHttpRequest()
    xhr.open('POST', '/login', true)
    xhr.onreadystatechange = function () {
        if(xhr.readyState === 4) {
            if(xhr.status === 200) {
                console.log(JSON.parse(xhr.responseText))
            }
        } else {
            console.log('其他情况')
        }
    }
    const postData = {
        username: 'zhangsan',
        password: 'xxx'
    }
    xhr.send(JSON.stringify(postData))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

二、浏览器的同源策略

1、同源策略

• ajax 请求时，浏览器要求当前网页和 server 必须同源（安全）
• 同源：协议、域名、端口，三者必须一致
• 不同源 => 前端：http://a.com:8080/ ；server：https://b.com/api/xxx

2、加载图片 css js 可无视同源策略

• 可用于统计打点，可使用第三方统计服务
• 可使用 CDN，CDN 一般都是外域