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)}
}

后端的数据

{"name":"zhangsan"
}

在这里插入图片描述

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.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))