88 lines
2.6 KiB
HTML
88 lines
2.6 KiB
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> ajax 网络请求 </title>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<ul>
|
||
|
||
</ul>
|
||
</body>
|
||
<script>
|
||
// ajax 是什么东西？
|
||
// 请求
|
||
// 请求头 寄件人信息
|
||
// 请求体 包裹（快递的物品） 数据格式： json 解析 （字符串转化为数组或对象的） （数组和对象的组合） xml
|
||
// 响应头 收集人信息
|
||
//
|
||
// 异步的前后端数据交互的一种方式
|
||
// 单向的通讯技术 前端 ----> 后端
|
||
|
||
// 1 拿出电话 创建一个ajax对象
|
||
var http = new XMLHttpRequest();
|
||
|
||
// 2 设置号码 设置ajax请求的后端网址
|
||
// 请求方式：
|
||
// GET 找后端要数据
|
||
// http://www.bmy.com/index?page=index&action=video
|
||
|
||
// POST 给后端数据的过程
|
||
// 请求体里面
|
||
|
||
// 更多区别：https://www.cnblogs.com/logsharing/p/8448446.html
|
||
|
||
|
||
// PUT 给数据 + 更新的操作
|
||
// DELETE 给数据 + 删除的操作
|
||
http.open("GET", "http://127.0.0.1:3000/api/index/threeMeals")
|
||
|
||
// 3 拨号 发送ajax请求
|
||
http.send();
|
||
|
||
|
||
// json
|
||
http.onreadystatechange = function () {
|
||
if (http.readyState == 4) {
|
||
if (http.status == 200) {
|
||
var data = JSON.parse(http.response)
|
||
console.log(data);
|
||
data.result.forEach(function (item, index) {
|
||
document.querySelector("ul").innerHTML += `<li>${item.title}</li>`
|
||
console.log(item.title);
|
||
});
|
||
} else {
|
||
alert("网络请求错误")
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
// ajax 跨域
|
||
// 前端的地址： file:///C:/Users/bmy/Desktop/front-end-team/%E6%AF%8F%E5%A4%A9%E8%AF%BE%E7%A8%8B/2022-03-28/index.html
|
||
// 后端的地址： http://127.0.0.1:3000/api/index/threeMeals
|
||
|
||
// 同源策略 （CORS ）
|
||
// 从三方面进行安全检查：
|
||
// 协议 http (80) https (443)
|
||
// 域名
|
||
// 端口
|
||
// 什么是跨域？
|
||
|
||
// 跨域如何解决？有几种方式？
|
||
// 1：后端设置请求头 Access-Control-Allow-Origin ，告诉浏览器，放行这个前端
|
||
// 2：jsonp 将ajax请求伪装成 js 文件请求 + callback 回调函数 拿回数据
|
||
// 3: 服务端代理
|
||
|
||
// A(我的前端) --- C（别人的后端）
|
||
// A(我的前端) --- B (我的后端)
|
||
// B -- C
|
||
</script >
|
||
|
||
</html > |