【初始前后端交互+原生Ajax+Fetch+axios+同源策略+解决跨域】

最新推荐文章于 2024-05-07 13:55:26 发布
最新推荐文章于 2024-05-07 13:55:26 发布
阅读量1.6k 收藏 20
点赞数 23
分类专栏： Ajax 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64875217/article/details/134334924
版权

初始前后端交互+原生Ajax+Fetch+axios+同源策略+解决跨域

1 初识前后端交互

  • 传统网站的问题：
    1> 为了获取数据，需要重新加载，浪费资源，增加等待时间，性能不好。
    2> 验证表单过程中，一项内容不合格，页面需要重新加载，体验不好。
  • 解决问题：
    1> ajax 全名 async javascript and XML
    2> 是前后台交互的能力
    3> 也就是我们客户端给服务端发送消息的工具，以及接受响应的工具
    4> 是一个默认异步执行机制的功能
  • AJAX的优势：
    1> 不需要插件的支持，原生 js 就可以使用
    2> 用户体验好（不需要刷新页面就可以更新数据）
    3> 减轻服务端和带宽的负担
    4> 缺点： 搜索引擎的支持度不够，因为数据都不在页面上，搜索引擎搜索不到

2 原生Ajax

2.1 Ajax基础

  • 在 js 中有内置的构造函数来创建 ajax 对象；
const xhr = new XMLHttpRequest()
// 上面就是有了一个 ajax 对象
// 我们就可以使用这个 `xhr` 对象来发送 ajax 请求了
  • 配置链接信息；
xhr.open("get","1.json ",true)
// xhr.open('请求方式', '请求地址', 是否异步)
// xhr 对象中的 open 方法是来配置请求信息的
// 第一个参数是本次请求的请求方式 get / post / put / ...
// 第二个参数是本次请求的 url
// 第三个参数是本次请求是否异步，默认 true 表示异步，false 表示同步
  • 创建 ajax 对象以后，我们就使用 ajax 对象的方法去发送请求和接受响应。
xhr.send()
// 使用 xhr 对象中的 send 方法来发送请求
// 上面代码是把配置好信息的 ajax 对象发送到服务端

一、一个基本的ajax请求：
	一个最基本的 ajax 请求就是上面三步
	但是光有上面的三个步骤，我们确实能把请求发送的到服务端
	如果服务端正常的话，响应也能回到客户端，但是我们拿不到响应
	如果想拿到响应，我们有两个前提条件:
		1. 本次 HTTP 请求是成功的，也就是我们之前说的 http 状态码为 200 ~ 299
		2. ajax 对象也有自己的状态码，用来表示本次 ajax 请求中各个阶段
二、ajax 状态码：
	ajax 状态码 —— xhr.readyState
	是用来表示一个 ajax 请求的全部过程中的某一个状态
	readyState === 0： 表示未初始化完成，也就是 `open` 方法还没有执行
	readyState === 1：  表示配置信息已经完成，也就是执行完 `open` 之后
	readyState === 2：  表示 `send` 方法已经执行完成
	readyState === 3：  表示正在解析响应内容
	readyState === 4：  表示响应内容已经解析完毕，可以在客户端使用了
	这个时候我们就会发现，当一个 ajax 请求的全部过程中，只有当 `readyState === 4` 的时候，我们才可以正常使用服务端给我们的数据
	所以，配合 http 状态码为 200 ~ 299
		一个 ajax 对象中有一个成员叫做 `xhr.status` 
 		这个成员就是记录本次请求的 http 状态码的
 	两个条件都满足的时候，才是本次请求正常完成
三、readyStateChange
	在 ajax 对象中有一个事件，叫做 `readyStateChange` 事件
	这个事件是专门用来监听 ajax 对象的 `readyState` 值改变的的行为
	也就是说只要 `readyState` 的值发生变化了，那么就会触发该事件
	所以我们就在这个事件中来监听 ajax 的 `readyState` 是不是到 4 了
四、responseText
	ajax 对象中的 `responseText` 成员
	就是用来记录服务端给我们的响应体内容的
	所以我们就用这个成员来获取响应体内容就可以

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>aaa</button>
    <script>
        var xhr = new XMLHttpRequest()

        xhr.open("get","1.json ",true)
        // 第一个参数 get post 请求方式
        // 第二个参数 请求地址
        // 第三个参数 是否异步

        xhr.send()

        // 监听
        // 方法一
        /* xhr.onreadystatechange = function() {
            console.log("电话接通");
            console.log(xhr.readyState); // 准备状态
            if(xhr.readyState === 4) {
                // if(xhr.status === 200) {
                if(/^2\d{2}$/.test(xhr.status)) {
                    console.log(JSON.parse(xhr.responseText))
                } else {
                    console.log("error",xhr.responseText);
                }
            }
        } */

        // 方法二
        xhr.onload = function() {
            if(/^2\d{2}$/.test(xhr.status)) {
                console.log(JSON.parse(xhr.responseText))
            } else {
                console.log("error",xhr.responseText);
            }
        }
    </script>
</body>
</html>

{
    "name":"xiaowang"
}

在这里插入图片描述

2.2 Ajax案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">click</button>
    <ul id="list">
        
    </ul>
    <script>
        var obtn = document.querySelector('#btn')
        var olist = document.querySelector('#list')
        obtn.onclick = function() {
            var xhr = new XMLHttpRequest()

            xhr.open("get","http://www.xiongmaoyouxuan.com/api/tabs", true) // 后端接口地址

            xhr.send()

            xhr.onload = function() {
                if(/^2\d{2}$/.test(xhr.status)) {
                    // console.log(JSON.parse(xhr.responseText))
                    render(JSON.parse(xhr.responseText))
                } else {
                    console.log("error",xhr.responseText);
                }
            }
        }
        // 渲染页面
        function render(res) {
            console.log(res.data.list);

            var newlist = res.data.list.map(function(item){
                return `<li>
                    <img src="${item.imageUrl}"/>
                    <div>${item.name}</div>    
                </li>`
            })

            console.log(newlist);

            olist.innerHTML = newlist.JSON.join("")
        }
    </script>
</body>
</html>

{
    "data": {
        "list": [
            {
                "name": "假数据111",
                "imageUrl": "http://img1.lukou.com/static/p/fb/tab/1/20181211-151644.jpeg"
            },
            {
                "name": "假数据222",
                "imageUrl": "http://img1.lukou.com/static/p/fb/tab/1/20181211-151644.jpeg"
            },
            {
                "name": "假数据111",
                "imageUrl": "http://img1.lukou.com/static/p/fb/tab/1/20181211-151644.jpeg"
            },
            {
                "name": "假数据111",
                "imageUrl": "http://img1.lukou.com/static/p/fb/tab/1/20181211-151644.jpeg"
            }

        ]
    }
}

2.3 ajax请求方式

  • 不同的请求方式：
    1> get 偏向获取
    2> post 偏向提交
    3> put 偏向更新
    4> patch 偏向修改部分
    5> delete 偏向删除信息
    6> head 偏向获取服务器头的信息
    7> option 偏向获取服务器设备信息
    8> connect 保留请求方式

  • 使用get请求方式(不传参数)：

oget.onclick = function() {
	var xhr = new XMLHttpRequest()
    xhr.open("GET","http://localhost:3000/list", true) // 后端接口地址
    xhr.send()
    xhr.onload = function() {
    	if(/^2\d{2}$/.test(xhr.status)) {
        	console.log(JSON.parse(xhr.responseText))
            // render(JSON.parse(xhr.responseText))
		} else {
        	console.log("error",xhr.responseText);
        }
	}
}
  • 使用get请求方式(传参数)：
oget.onclick = function() {
	var xhr = new XMLHttpRequest()
    xhr.open("GET","http://localhost:3000/users?id=1", true)
    xhr.send()
    xhr.onload = function() {
    	if(/^2\d{2}$/.test(xhr.status)) {
        	console.log(JSON.parse(xhr.responseText))
            // render(JSON.parse(xhr.responseText))
		} else {
        	console.log("error",xhr.responseText);
        }
	}
}
  • 使用post请求方式(传参数)：
opost.onclick = function() {
	var xhr = new XMLHttpRequest()
    xhr.open("POST","http://localhost:3000/users", true) // 后端接口地址
    // 两种提交方式：
    // form编码 name=kerwin&age=100
    // json {name:"kerwin",age:100}
    // 方式一
    /* xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
    xhr.send(`name=tiechui&age=18`) */ // 数据放在这里
    // 方式二
    xhr.setRequestHeader("content-type","application/json")
    xhr.send(JSON.stringify({
    	name:"guludunzi",
        age:90
    })) // 数据放在这里
    xhr.onload = function() {
        if(/^2\d{2}$/.test(xhr.status)) {
        	console.log(JSON.parse(xhr.responseText))
            // render(JSON.parse(xhr.responseText))
        } else {
            console.log("error",xhr.responseText);
        }
	}
}
  • 使用put请求方式(传参数)：
oput.onclick = function() {
    var xhr = new XMLHttpRequest()
    xhr.open("PUT","http://localhost:3000/users/4", true) // 后端接口地址
    // 两种提交方式：
    // form编码 name=kerwin&age=100
    // json {name:"kerwin",age:100}
    // 方式一
    /* xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
    xhr.send(`name=tiechui&age=18`) */ // 数据放在这里
    // 方式二
    xhr.setRequestHeader("content-type","application/json")
    xhr.send(JSON.stringify({
        username:"guludunzi",
        age:70
    })) // 数据放在这里
    xhr.onload = function() {
        if(/^2\d{2}$/.test(xhr.status)) {
            console.log(JSON.parse(xhr.responseText))
            // render(JSON.parse(xhr.responseText))
        } else {
            console.log("error",xhr.responseText);
        }
    }
}
  • 使用patch请求方式(传参数)：
opatch.onclick = function() {
    var xhr = new XMLHttpRequest()
    xhr.open("PATCH","http://localhost:3000/users/4", true) // 后端接口地址
    // 两种提交方式：
    // form编码 name=kerwin&age=100
    // json {name:"kerwin",age:100}
    // 方式一
    /* xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
    xhr.send(`name=tiechui&age=18`) */ // 数据放在这里
    // 方式二
    xhr.setRequestHeader("content-type","application/json")
    xhr.send(JSON.stringify({
        // username:"guludunzi",
        age:180
    })) // 数据放在这里
    xhr.onload = function() {
        if(/^2\d{2}$/.test(xhr.status)) {
            console.log(JSON.parse(xhr.responseText))
            // render(JSON.parse(xhr.responseText))
        } else {
            console.log("error",xhr.responseText);
        }
    }
}
  • 使用delete请求方式(无参数)：
odelete.onclick = function() {
    var xhr = new XMLHttpRequest()
    xhr.open("DELETE","http://localhost:3000/users/4", true) // 后端接口地址
    xhr.send()
    xhr.onload = function() {
        if(/^2\d{2}$/.test(xhr.status)) {
            console.log(JSON.parse(xhr.responseText))
            // render(JSON.parse(xhr.responseText))
        } else {
            console.log("error",xhr.responseText);
        }
    }
}

3 Fetch

  • XMLHttpRequest 是一个设计粗糙的 API，配置和调用方式非常混乱， 而且基于事件的异步模型写起来不友好。
  • 先在集成终端中打开json-server监视：
    在这里插入图片描述

3.1 fetch基础

  • 使用get请求方式(不传参数)：
oget.onclick = function() {
    fetch("http://localhost:3000/users")
    .then(res =>res.json())
    .then(res => {
        console.log(res);
    })
}
  • 使用get请求方式(传参数)：
oget.onclick = function() {
    fetch("http://localhost:3000/users?id=1")
    .then(res =>res.json())
    .then(res => {
        console.log(res);
    })
}
  • 使用post请求方式(传参数)：
opost.onclick = function() {
    fetch("http://localhost:3000/users",{
        method:"post",
        headers:{
            // 两种提交方式：
            // form编码 name=kerwin&age=100
            // json {name:"kerwin",age:100}
            // 方式一
            // "content-type":"application/x-www-form-urlencoded"
            // 方式二
            "content-type":"application/json"
        },
        // body:"name=dazhuang&age=100" // 方式一body
        body:JSON.stringify({
            name:"xiaoli",
            age: 20
        })
    })
    .then(res =>res.json())
    .then(res => {
        console.log(res);
    })
}
  • 使用put请求方式(传参数)：
oput.onclick = function() {
    fetch("http://localhost:3000/users/2",{
        method:"put",
        headers:{
            // 两种提交方式：
            // form编码 name=kerwin&age=100
            // json {name:"kerwin",age:100}
            // 方式一
            // "content-type":"application/x-www-form-urlencoded"
            // 方式二
            "content-type":"application/json"
        },
        // body:"name=dazhuang&age=100" // 方式一body
        body:JSON.stringify({
            name:"xiaowang",
            age: 76
        })
    })
    .then(res =>res.json())
    .then(res => {
        console.log(res);
    })
}
  • 使用patch请求方式(传参数)：
opatch.onclick = function() {
    fetch("http://localhost:3000/users/2",{
        method:"PATCH",
        headers:{
            // 两种提交方式：
            // form编码 name=kerwin&age=100
            // json {name:"kerwin",age:100}
            // 方式一
            // "content-type":"application/x-www-form-urlencoded"
            // 方式二
            "content-type":"application/json"
        },
        // body:"name=dazhuang&age=100" // 方式一body
        body:JSON.stringify({
            age: 33
        })
    })
    .then(res =>res.json())
    .then(res => {
        console.log(res);
    })
}
  • 使用delete请求方式(无参数)：
odelete.onclick = function() {
    fetch("http://localhost:3000/users/2",{
        method:"delete",
    })
    .then(res =>res.json())
    .then(res => {
        console.log(res);
    })
}
  • 以使用get请求方式为例失败处理：
oget.onclick = function() {
    fetch("http://localhost:3000/users?id=1")
    .then(res =>{
		if(res.ok){
			return res.json()
		}else{
			return Promise.reject({
				// 展示出错码和出错原因
				status:res.status,
				statusText:res.statusText
			})
		}
	})
    .then(res => {
        console.log(res);
    }).catch(err => {
		console.log("err", err)
	})
}

在这里插入图片描述

3.2 fetch案例

  • 通过输入作者姓名找到新闻标题，再根据新闻标题对应的新闻id找到所对应的评论内容。
  • db.json代码：
{
    "news": [
        { "id" : 1, "title" : "男人看了沉默，女人看了流泪", "author" : "kerwin"},
        { "id" : 2, "title" : "震惊！他年薪仅1元", "author" : "tiechui"},
        { "id" : 3, "title" : "速看！万分危急！", "author" : "gangdan"}
    ],
    "comments": [
        { "id" : 1, "body" : "我是男人", "newsId" : 1 },
        { "id" : 2, "body" : "我是女人", "newsId" : 1 },
        { "id" : 3, "body" : "我年薪2元", "newsId" : 2 },
        { "id" : 4, "body" : "我年薪3元", "newsId" : 2 },
        { "id" : 5, "body" : "1块钱就能买1块钱的东西", "newsId" : 3 },
        { "id" : 6, "body" : "2块钱就能买2块钱的东西", "newsId" : 3 }
    ]
}
  • 基于fetch的01.html代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="search">
    <h1 id="title"></h1>
    <ul id="list"></ul>
    <script>
        var osearch = document.querySelector('#search')
        var otitle = document.querySelector('#title')
        var olist = document.querySelector('#list')

        osearch.oninput = function() {
            fetch(`http://localhost:3000/news?author=${osearch.value}`)
            .then( res => res.json())
            .then( res => {
                if(res.length > 0) {
                    otitle.innerHTML = res[0].title
                    return fetch(`http://localhost:3000/comments?newsId=${res[0].id}`)
                    .then(res=>res.json())
                }else {
                    otitle.innerHTML = ""
                    return res
                }
            }).then(res=>{
                console.log(res)
                olist.innerHTML = res.map( item => `
                    <li>
                        ${item.body}
                    </li>
                `).join("") // join是为了避免中间有逗号
            })
        }
    </script>
</body>
</html>
  • fetch结合async await下的01.html代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="search">
    <h1 id="title"></h1>
    <ul id="list"></ul>
    <script>
        var osearch = document.querySelector('#search')
        var otitle = document.querySelector('#title')
        var olist = document.querySelector('#list')

        osearch.oninput = async function() {
            var res = await fetch(`http://localhost:3000/news?author=${osearch.value}`)
            .then( res => res.json())
            var result
            if(res.length > 0) {
                otitle.innerHTML = res[0].title
                result = await fetch(`http://localhost:3000/comments?newsId=${res[0].id}`)
                .then(res=>res.json())
            }else {
                otitle.innerHTML = ""
                result = res
            }
            // console.log("111",result)
            olist.innerHTML = result.map( item => `
                <li>
                    ${item.body}
                </li>
            `).join("") // join是为了避免中间有逗号
        }
    </script>
</body>
</html>

在这里插入图片描述

4 axios

4.1 axios基础

  • 使用get请求方式(不传参数)：
oget.onclick = function() {
	axios.get("http://localhost:3000/users")
    // 若成功走.then
    .then(res => {
    	console.log(res.data)
     })
     // 若失败走.catch
     .catch(err => {
        console.log("err",err)
     })
}
  • 使用get请求方式(传参数)：
oget.onclick = function() {
	axios.get("http://localhost:3000/users?name=kerwin")
    // 若成功走.then
    .then(res => {
    	console.log(res.data)
     })
     // 若失败走.catch
     .catch(err => {
        console.log("err",err)
     })
}
  • 使用get请求方式(传参数且为对象结构)：
oget.onclick = function() {
	axios.get("http://localhost:3000/users",{
		params:{
			name:"kerwin"
		}
	})
    // 若成功走.then
    .then(res => {
    	console.log(res.data)
     })
     // 若失败走.catch
     .catch(err => {
        console.log("err",err)
     })
}
  • 使用post请求方式(传参数)：
 opost.onclick = function() {
	// 以json方式传参数
	/* axios.post("http://localhost:3000/users",{
    	name:"xiaoming",
        age:18
    }) */
    
    // 以form方式传参数方法一
    // axios.post("http://localhost:3000/users","name=tiechui&age=77")

	// 以form方式传参数方法二
	const params = new URLSearchParams({name:"dazhuang",age:13});
    axios.post("http://localhost:3000/users",params)

	// 若成功走.then
    .then(res => {
    	console.log(res.data)
    })
    // 若失败走.catch
    .catch(err => {
    	console.log("err",err)
    })
}
  • 使用put请求方式(传参数)：
oput.onclick = function() {
	axios.put("http://localhost:3000/users/4",{
    	name:"dazhuang",
        age:99
    })
    // 若成功走.then
    .then(res => {
    	console.log(res.data)
    })
    // 若失败走.catch
    .catch(err => {
    	console.log("err",err)
    })
}
  • 使用patch请求方式(传参数)：
opatch.onclick = function() {
	axios.patch("http://localhost:3000/users/4",{
        age:101
    })
    // 若成功走.then
    .then(res => {
    	console.log(res.data)
    })
    // 若失败走.catch
    .catch(err => {
    	console.log("err",err)
    })
}
  • 使用delete请求方式(无参数)：
odelete.onclick = function() {
	axios.delete("http://localhost:3000/users/4")
    // 若成功走.then
    .then(res => {
    	console.log(res.data)
	})
    // 若失败走.catch
    .catch(err => {
        console.log("err",err)
    })
}
  • axios(config)配置：
axios({
	method:"post",
	url:'http://localhost:3000/users',
	// put post等放入data中 get放入params中
	data:{
		name:'kerwin',
		age: 88
	}
})
.then(res => {
	console.log(res.data)
})
.catch(err => {
	console.log(err)
})

4.2 axios使用

4.2.1 axios拦截器

  • db.json代码：
{
  "news": [
      { "id" : 1, "title" : "男人看了沉默，女人看了流泪", "author" : "kerwin"},
      { "id" : 2, "title" : "震惊！他年薪仅1元", "author" : "tiechui"},
      { "id" : 3, "title" : "速看！万分危急！", "author" : "gangdan"}
  ],
  "comments": [
      { "id" : 1, "body" : "我是男人", "newsId" : 1 },
      { "id" : 2, "body" : "我是女人", "newsId" : 1 },
      { "id" : 3, "body" : "我年薪2元", "newsId" : 2 },
      { "id" : 4, "body" : "我年薪3元", "newsId" : 2 },
      { "id" : 5, "body" : "1块钱就能买1块钱的东西", "newsId" : 3 },
      { "id" : 6, "body" : "2块钱就能买2块钱的东西", "newsId" : 3 }
  ]
}
  • 01.html代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
</head>
<body>
    <button id="get">get</button>
    <script>
        var oget = document.querySelector("#get")

        // axios拦截器
        // request请求拦截器
        axios.interceptors.request.use(function (config) {
            // Do something before request is sent
            // console.log("loading-开始")
            console.log("loading显示....")
            return config;
        }, function (error) {
            // Do something with request error
            return Promise.reject(error);
        });

        // response响应拦截器
        // Add a response interceptor
        axios.interceptors.response.use(function (response) {
            // Any status code that lie within the range of 2xx cause this function to trigger
            // Do something with response data
            // 成功响应拦截器
            // console.log("loading-结束")
            console.log("成功-隐藏loading....")
            return response;
        }, function (error) {
            // Any status codes that falls outside the range of 2xx cause this function to trigger
            // Do something with response error
            // 失败响应拦截器
            // console.log("loading---结束")
            console.log("失败-隐藏loading....")
            return Promise.reject(error);
        });

        oget.onclick = function() {
            axios.get('http://localhost:3000/news').then(res => {
                console.log(res.data);
            }).catch(err => {
                console.log("err",err);
            })
        }
    </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

4.2.2 axios中断器

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// cancel the request
controller.abort()
  • 01.html代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
</head>
<body>
    <button id="get">get</button>
    <!-- 终止按钮 -->
    <button id="abort">abort</button>
    <script>
        var oget = document.querySelector("#get")
        var oabort = document.querySelector("#abort")

        // axios拦截器
        // request请求拦截器
        axios.interceptors.request.use(function (config) {
            // Do something before request is sent
            // console.log("loading-开始")
            console.log("loading显示....")
            return config;
        }, function (error) {
            // Do something with request error
            return Promise.reject(error);
        });

        // response响应拦截器
        // Add a response interceptor
        axios.interceptors.response.use(function (response) {
            // Any status code that lie within the range of 2xx cause this function to trigger
            // Do something with response data
            // 成功响应拦截器
            // console.log("loading-结束")
            console.log("成功-隐藏loading....")
            return response;
        }, function (error) {
            // Any status codes that falls outside the range of 2xx cause this function to trigger
            // Do something with response error
            // 失败响应拦截器
            // console.log("loading---结束")
            console.log("失败-隐藏loading....")
            return Promise.reject(error);
        });

        // axios中断器
        const controller = new AbortController();

        oget.onclick = function() {
            axios.get('http://localhost:3000/news',{
                signal: controller.signal
            })
            .then(res => {
                console.log(res.data);
            }).catch(err => {
                console.log("err",err);
            })
        }

        oabort.onclick = function() {
            controller.abort()
        }
    </script>
</body>
</html>

在这里插入图片描述

5 同源策略

  • 一个URL有三部分组成：协议、域名(指向主机)、端口，只有这三个完全相同的 URL 才能称之为同源。
  • 如下，能和http://www.example.com/dir1/index.html 同源的是？
    在这里插入图片描述
  • 无法读取非同源网页的 Cookie、LocalStorage 。
  • 无法接触非同源网页的 DOM。
  • 无法向非同源地址发送 AJAX 请求（可以发送，但浏览器会拒绝接受响应）。
  • 注意：同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

6 解决跨域

6.1 jsonp

  • Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
  • 为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。
  • 1.txt代码：
test("xiaowang")
  • 01.html代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function test(data){
            console.log("111",data);
        }


        var oscript = document.createElement("script")
        oscript.src = "1.txt"
        document.body.appendChild(oscript)

        // 1.script标签没有跨域限制
        // 2.后端配合返回的是 函数() 调用的方式
        // 3.前端必须提前声明好这个函数

        // 缺点：jsonp只能get请求 无法post、put、delete
    </script>
    <!-- <script>
        // <script src="1.txt">
        // test("xiaowang")
    </script> -->
</body>
</html>

在这里插入图片描述

  • 案例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="search">
    <ul id="list">

    </ul>

    <script>
        var osearch = document.querySelector('#search')
        var olist = document.querySelector('#list')

        osearch.oninput = function(){
            // console.log(osearch.value)
            if(osearch.value === "") {
                olist.innerHTML = ""
                return
            }
            var oscript = document.createElement("script")
            oscript.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=39646,39671,39663,39676,39678,39713,39791,39787,39704,39793,39681,39662&wd=${osearch.value}&req=2&csor=1&cb=test&_=1700639132336`
            document.body.appendChild(oscript)

            oscript.onload = function() {
                oscript.remove() // 创建完script标签 等它load完了 就给它移掉
            }
        }

        function test(data) {
            // console.log(data.g);
            olist.innerHTML = data.g.map(item => 
                `
                    <li>${item.q}</li>
                `
            ).join("")
        }
    </script>
</body>
</html>

在这里插入图片描述

6.2 其他技术手段

  • 加上响应头
  • 反向代理nginx跨域解决方案
小王小王几点了
关注
  • 23
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue视频：vue + vue路由器+ vuex +（获取-> axios）
02-05
写在前面（有问题可以加qq群：725165362） 该项目有两个版本，vue和React 前端项目地址前端预览 初步项目地址后台管理 API接口地址 （未更新，接口现在重写过） react版现在已经完成 react版项目地址 react版本预览 技术栈（Vue2.js + Node.js全栈项目） 由于页面不是很多，vuex用的不多，关键掌握怎么实现就好了 vue2 + vuex + vue-router + webpack + fetch/axios + sass + flex + svg +阿里字体图标 运行 git clone https://github.com/wclimb/vu
对异步请求xhr、ajax、axios、fetch的区别比较
01-08
1. XMLHttpRequest对象 在浏览器中，最开始与服务器交换数据的方式则是通过XMLHttpRequest对象。【它可以使用JSON、XML、HTML和Text文本等格式发送和接收数据。】 优点： 1.不重新加载页面的情况下更新网页 2.在页面已加载后从服务器请求/接收数据 3.在后台向服务器发送数据。 缺点： 1.使用起来也比较繁琐，需要设置很多值。 2.早期的IE浏览器有自己的实现，这样需要写兼容代码。 if (window.XMLHttpRequest) { // model browser xhr = new XMLHttpRequest() } else if (w
详解vue中使用express+fetch获取本地json文件
10-19
本篇文章主要介绍了详解vue中使用express+fetch获取本地json文件，非常具有实用价值，需要的朋友可以参考下
ajax、axios、fetch区别
01-03
ajax、axios、fetch区别 ajax $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {} }); 优缺点： 本身是针对MVC的编程,不符合现在前端MVVM的浪潮 基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案 JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务） axios axi
unreal-fetch：Fetch API启发了Unreal Engine的HTTP客户端。 同时支持蓝图和C ++
02-06
虚幻获取 启发了虚幻引擎的HTTP客户端。 适用于Blueprints和C ++。 产品特点 使用此插件，您可以非常快速地从Blueprints与HTTP API对话。 以下是一些核心功能： 与蓝图一起使用时不需要C ++或配置 通过最少数量的蓝图节点与HTTP Apis对话 允许通过蓝图解析和创建JSON值 由于它使用内部HTTP和JSON相关模块，因此可在任何地方使用。 安装 [了解我们为什么要在市场上为此插件收费。 ] 请按照以下步骤通过源安装此插件。 关闭您现有的虚幻引擎应用程序。 在您的应用程序根目录中创建一个名为Plugins的目录。 下载GitHub存储库。 将存储
AJAX学习笔记（原生AJAX；jQuery；axios；fetch；跨域；JSONP；CORS）
赖念安的博客
08-21 584
尚硅谷AJAX学习笔记 参考课程： 参考：【尚硅谷】3小时Ajax入门到精通_哔哩哔哩_bilibili 一、前期准备 1、什么是Ajax 参考：Ajax - Web 开发者指南 | MDN 根据MDN文档的描述，大致可以这样描述AJAX： Asynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或
与服务器进行数据交互的方法——ajax，axios,fetch
热门推荐
weixin_52703987的博客
03-08 2万+
与服务器进行数据交互的方法——ajax，axios,fetch 一，与服务器交互的类型 同步交互： 理解1：同步是阻塞模式，同步交互时，两个线程的运行是相关的，a线程在运行时，b线程要阻塞等待，直到a线程运行完毕 理解2：同步交互时，客户端发出请求后，需要等待服务器相应结束以后，才能发出第二个请求。 例：再做用户登录功能时，必须检测用户名密码都正确以后才能进入系统。 异步交互： 理解1：异步是非阻塞模式，异步交互时，两个线程的运行不相关，a线程运行时，b线程也正常运行。 理解2：异步交互时，客户端发出请求后
Ajax前后端数据交互以及在java里面的应用
yuluo的博客
03-20 2823
Ajax前后端数据交互以及在java里面的应用 介绍 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。 Asynchronous JavaScript + XML（异步JavaScript和XML
数据交换和异步请求(JSON&Ajax))
vV_Leon的博客
05-06 855
数据交换异步请求技术
【spark RDD】spark 之 Kryo高性能序列化框架
hiliang521的博客
05-07 372
【spark RDD】spark 之 Kryo序列化框架
基于SSM+JSP的企业人事管理信息系统毕业设计(源码+录像+说明).rar
05-09
基于SSM+JSP的企业人事管理信息系统毕业设计(源码+录像+说明).rar 【项目技术】 开发语言：Java 框架：ssm+jsp 架构：B/S 数据库：mysql 【演示视频-编号：420】 https://pan.quark.cn/s/b3a97032fae7 【实现功能】 实现了员工基础数据的管理，考勤管理,福利管理,薪资管理,奖惩管理,考核管理,培训管理,招聘管理,公告管理,基础数据管理等功能。
node-v6.12.0-linux-ppc64le.tar.xz
05-09
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
node-v6.8.0-linux-ppc64le.tar.xz
05-09
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
基于PaddleFL框架的联邦学习医疗影像识别系统源码+GUI界面+说明（高分）.zip
05-09
基于PaddleFL框架的联邦学习医疗影像识别系统源码+GUI界面+说明.zip该项目是个人毕设项目源码，评审分达到97分，都经过严格调试，确保可以运行！放心下载使用。该项目资源主要针对计算机相关专业的学生或从业者下载使用，也可作为期末课程设计、课程大作业、毕业设计等。 基于PaddleFL框架的联邦学习医疗影像识别系统源码+GUI界面+说明.zip该项目是个人毕设项目源码，评审分达到97分，都经过严格调试，确保可以运行！放心下载使用。该项目资源主要针对计算机相关专业的学生或从业者下载使用，也可作为期末课程设计、课程大作业、毕业设计等。 基于PaddleFL框架的联邦学习医疗影像识别系统源码+GUI界面+说明.zip该项目是个人毕设项目源码，评审分达到97分，都经过严格调试，确保可以运行！放心下载使用。该项目资源主要针对计算机相关专业的学生或从业者下载使用，也可作为期末课程设计、课程大作业、毕业设计等。 基于PaddleFL框架的联邦学习医疗影像识别系统源码+GUI界面+说明.zip该项目是个人毕设项目源码，评审分达到97分，都经过严格调试，确保可以运行！放心下载使用。该项目资源
node-v6.12.2-linux-s390x.tar.xz
05-09
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
node-v7.2.0-darwin-x64.tar.xz
05-09
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
node-v4.4.1-sunos-x64.tar.xz
最新发布
05-09
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
node-v18.19.0-headers.tar.gz
05-09
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
node-v4.4.7-sunos-x64.tar.xz
05-09
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
Idea+springboot+vue 前后端交互实现
03-21
可以通过 RESTful API 实现前后端交互，前端通过 axios 或者 fetch 发送请求，后端通过 Spring Boot 提供的 @RestController 注解处理请求并返回数据。同时，可以使用 Vue 提供的组件和指令来渲染数据和实现交互。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小王小王几点了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值