JS-Web-API(三):Ajax

JS-Web-API(三):Ajax

XMLHttpRequest

GET请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 初始化实例
const xhr = new XMLHttpRequest()
// 第三个参数true则为异步
xhr.open('GET','url', true)
xhr.onreadystatechange = function () {
// 这里函数异步执行
if (xhr.readyState === 4) {
if (xhr.statusCode === 200) {
console.log(xhr.responseText)
} else {
console.log('请求失败')
}
}
}
xhr.send()

POST请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 初始化实例
const xhr = new XMLHttpRequest()
// 第三个参数true则为异步
xhr.open('POST','url', true)
xhr.onreadystatechange = function () {
// 这里函数异步执行
if (xhr.readyState === 4) {
if (xhr.statusCode === 200) {
console.log(xhr.responseText)
} else {
console.log('请求失败')
}
}
}
const postData = JSON.stringify({
a: 1
})
// 发送数据
xhr.send(postData)

readyState

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

status

  • 1xx - 临时响应并需要请求者继续执行操作
  • 2xx - 成功处理请求,比如200
  • 3xx - 重定向,浏览器直接跳转,如301 302 304
  • 4xx - 客户端请求错误,如404 403
  • 5xx - 服务器错误

同源策略与跨域

同源策略

  • ajax请求时, 浏览器要求 当前网页和server必须同源(安全)
  • 同源:协议、域名、端口, 三者必须一致
  • 加载图片、css、js文件可无视同源策略

跨域

  • 所有的跨域,都必须经过server端允许与配合
  • 未经server端允许就实现跨域,说明浏览器有漏洞,危险信号

jsonp和cors

jsonp

  • script标签可绕过跨域限制
  • 服务端可以任意动态拼接数据返回
  • script标签可以获得跨域的数据,只要服务端愿意返回
1
2
3
4
5
6
7
8
9
10
<script src="xxx/getData.js"></script>
<!--返回一个方法 callback({a:1,b:2}) -->

<script>
// 调用返回的方法
window.callback = function(data) {
// 这里得到跨域的数据
console.log(data)
}
</script>

cors

服务器设置http header

1
2
3
4
5
6
7
// 第二个参数填写允许跨域的域名,不建议直接填写 “*”
response.setHeader("Access-Control-Allow-Origin", "http://localhost:8011");
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
response.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

// 接收跨域的cookie
response.setHeader("Access-Control-Allow-Credentials", "true")

使用Promise封装一个简易Ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Request(url, method, data) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.open(method, 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'))
} else {
reject(JSON.parse(xhr.responseText))
}
}
}
xhr.send(JSON.stringify(data))
})
}

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×