原生ajax

陈瀚

2023-12-01

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
发送请求
拿到响应数据

// 创建xhr对象
const xhr = new XMLHttpRequest()
// 初始化xhr对象，设置请求方式和请求的url
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()
// 参数拼接在url后面
xhr.open("GET","http://www.baidu.com?a=1&b=2")
xhr.send()

post请求

const xhr = new XMLHttpRequest()
xhr.open("POST","http://www.baidu.com")
// 参数作为send函数的实参传递
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')
    // 创建xhr对象
    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>
        // 获取button和p
        const btn = document.getElementsByTagName('button')[0]
        const p = document.getElementsByTagName('p')[0]

        // 声明handle函数
        function handle(data){
            p.innerHTML = data.msg
        }

        // 绑定单击事件
        btn.onclick = function(){
            // 创建一个新的script标签
            const script = document.createElement('script')
            // 设置src属性，即要请求的服务器地址
            script.src = 'http://127.0.0.1:9000/test'
            // 将新的script标签放入页面中，即发送请求
            document.body.appendChild(script)
        }
    </script>
</body>

服务器：

// 引入express
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')
})