bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
历届学生/韩想/每日课程/2020-08-17/ajax.html Normal file
View File

@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
</ul>
</body>
<!--<script>-->
<!-- function dnkjdn(res) {-->
<!-- console.log(res)-->
<!-- }-->
<!--</script>-->
<!--<script src="http://127.0.0.1:3000/api/index?callback=dnkjdn"></script>-->
<script>
// 前端 http://localhost:63342/2020-08-17/ajax.html
// 后端 http://127.0.0.1:3000/api/index
// 域名，端口，协议
// 拿出电话
var http = new XMLHttpRequest();
// GET, POST, PUT, DELETE, OPTION
// 设置电话号码
http.open("GET","http://127.0.0.1:3000/api/zj");
// 拨打电话
http.send()
http.onreadystatechange = function () {
if(http.readyState == 4) {
if (http.status == 200) {
var res = JSON.parse(http.responseText)
console.log(res)
// res.data.forEach((val,index) => {
// document.querySelector("ul").innerHTML+=`<li>${val.title}</li>`
// });
} else {
alert("网络不好")
}
}
}
// ajax({
// method: 'GET',
// url: 'xxxx',
// success: function (res) {
//
// },
// error: function (erro) {
//
// }
// })
</script>
</html>

15
历届学生/韩想/每日课程/2020-08-17/back/br.js Normal file
View File

@@ -0,0 +1,15 @@
const express = require('express')
const app = express()
const port = 4000
app.get('/api/br', (req, res) => {
var methods = req.query.callback
var dd = {
title: '别人的后端',
};
res.json(dd)
})
app.listen(port, () => console.log(`Example app listening on port ${port}!`))

18
历届学生/韩想/每日课程/2020-08-17/back/index.js Normal file
View File

@@ -0,0 +1,18 @@
const express = require('express')
const request = require('request')
const app = express()
const port = 3000
app.all('*', function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Content-Type', 'application/json;charset=utf-8');
next();
});
app.get('/api/zj', (req, res) => {
request('http://127.0.0.1:4000/api/br', function (error, response, body) {
res.json(body)
});
})
app.listen(port, () => console.log(`Example app listening on port ${port}!`))

17
历届学生/韩想/每日课程/2020-08-17/back/package.json Normal file
View File

@@ -0,0 +1,17 @@
{
"name": "ddd",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"express": "^4.17.1",
"request": "^2.88.2"
},
"devDependencies": {},
"scripts": {
"dev": "node-dev index.js"
},
"keywords": [],
"author": "",
"license": "ISC"
}

37
历届学生/韩想/每日课程/2020-08-17/笔记.txt Normal file
View File

@@ -0,0 +1,37 @@
ajax 是一种无刷新的前后端数据交互的方式
后端渲染
后端：页面 + 功能 + 数据（dba） + 安全 + 服务器（运维）
前端：页面
前端分离
后端：使用任意后端语言实现接口
数据
前端：使用任意框架实现页面和功能
页面+功能
前端 --ajax--> 后端
ajax 跨域
解决ajax跨域
作业：明天晚上上课告诉我ajax跨域是什么？大致有哪些解决办法？
ajax跨域 浏览器拦截导致的！
1: js <== jsonp 注意它不是ajax请求，是js资源文件请求！
2: cors(Access-Control-Allow-Origin) 后端设置的，和前端无关
3：服务端代理
A(自己前端) ==跨域===> C(别人后端)
A(自己前端) =====> B(自己后端)
B(自己后端) =====> C(别人后端)