1 Ajax简介
Ajax，全称“Asynchronous JavaScript and XML”，即异步的 JavaScript 和 XML。
通过Ajax可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。
2 XML简介
XML是可扩展标记语言，XML与HTML类似，区别：
- XML被设计用来传输和存储数据
HTML用来显示数据 - XML中的标签都是自定义的
HTML中都是预定义标签
XML现在已经被JSON取代了。
3 Ajax的特点
3.1 优点
- 可以无需刷新页面与服务器端进行通信
- 允许根据用户事件来更新部分页面内容
3.2 缺点
- 没有浏览历史，不能回退
- 存在跨域问题（同源）
- SEO不友好，网页中的内容爬虫爬不到
4 HTTP协议
HTTP，超文本传输协议，协议详细规定了浏览器与服务器之间互相通信的规则。
4.1 HTTP请求报文
请求行： 请求类型-GET/POST URL 协议版本-HTTP/1.1
请求头：
Host：baidu.com
Cookie： name=baidu
User-Agent： chrome83
…
空行
请求体 GET请求可以为空
4.2 HTTP响应报文
响应行：协议版本-HTTP/1.1 状态码-200 状态字符串-OK
响应头：
Content-Type：text/html；charset=utf-8
Content-length：2048
…
空行
响应体：服务器返回的内容
5 原生Ajax的使用
5.1 基本使用步骤
- 创建XMLHttpRequest对象
- 设置请求方式和url
- 发送请求
- 拿到响应数据
const xhr = new XMLHttpRequest()
xhr.open("GET","http://www.baidu.com")
xhr.send()
xhr.onreadystatechange() = function(){
if(xhr.readystate === 4){
if(xhr.status === 200){
console.log(xhr.status)
console.log(xhr.statusText)
console.log(xhr.getAllResponseHeaders())
console.log(xhr.response)
}
}
}
xhr对象的readystate：
0：未初始化
1：open调用成功，初始化完成
2：send调用成功，请求发送成功
3：服务器返回部分数据
4：服务器返回全部数据
onreadystatechange()函数：当xhr对象的readystate变化时调用。
5.2 携带参数的Ajax请求
- get请求
const xhr = new XMLHttpRequest()
xhr.open("GET","http://www.baidu.com?a=1&b=2")
xhr.send()
- post请求
const xhr = new XMLHttpRequest()
xhr.open("GET","http://www.baidu.com")
xhr.send("a=1&b=2")
5.3 Ajax处理超时和网络异常
- 处理超时
const xhr = new XMLHttpRequest()
xhr.timeout = 2000
xhr.ontimeout = function(){
alert('请求超时！')
}
xhr.open("GET","http://www.baidu.com")
xhr.send()
- 处理网络异常
const xhr = new XMLHttpRequest()
xhr.onerror = function(){
alret("网络异常！")
}
xhr.open("GET","http://www.baidu.com")
xhr.send()
5.4 取消请求
取消请求：abort()函数
<body>
<button>发送请求</button>
<button>取消请求</button>
</body>
<script>
const btns = document.getElementsByTagName('button')
let xhr = new XMLHttpRequest()
btns[0].onclick = function(){
xhr.open('GET','http://127.0.0.1:8000/server')
xhr.send("111")
}
btns[1].onclick = function(){
xhr.abort()
}
</script>
6 跨域问题
6.1 为什么会出现跨域
出现跨域问题是由于同源策略的限制。
同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。
6.2 什么是跨域
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
6.3 解决跨域
6.3.1 jsonp
script标签天生具有跨域能力，通过向页面中添加一个新的script标签来向服务器发送请求，服务器返回一个函数调用，要返回的数据作为这个函数的实参。
页面：
<body>
<button>点击获取数据</button>
<p></p>
<script>
const btn = document.getElementsByTagName('button')[0]
const p = document.getElementsByTagName('p')[0]
function handle(data){
p.innerHTML = data.msg
}
btn.onclick = function(){
const script = document.createElement('script')
script.src = 'http://127.0.0.1:9000/test'
document.body.appendChild(script)
}
</script>
</body>
服务器：
const express = require('express')
const app = express()
app.all('/test',(request,response)=>{
const data = {msg:'hello!'}
let str = JSON.stringify(data)
response.send(`handle(${str})`)
})
app.listen(9000,()=>{
console.log('服务已启动，正在监听9000...')
})
6.3.2 CORS
跨源资源共享 (CORS) （或通俗地译为跨域资源共享）是一种基于HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它origin（域，协议和端口），这样浏览器可以访问加载这些资源。
跨源资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS
设置CORS
app.all('/cors',(request,response)=>{
response.setHeader('Access-Control-Allow-Origin','*')
response.send('hello,CORS')
})
|