Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1,305 changed files
with
130,418 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
# HTTP | ||
HTTP(hypertext transport protocol)协议『超文本传输协议』,协议详细规定了浏览器和万维网服务器之间互相通信的规则。 | ||
约定, 规则 | ||
|
||
## 请求报文 | ||
重点是格式与参数 | ||
``` | ||
行 POST /s?ie=utf-8 HTTP/1.1 | ||
头 Host: atguigu.com | ||
Cookie: name=guigu | ||
Content-type: application/x-www-form-urlencoded | ||
User-Agent: chrome 83 | ||
空行 | ||
体 username=admin&password=admin | ||
``` | ||
|
||
## 响应报文 | ||
``` | ||
行 HTTP/1.1 200 OK | ||
头 Content-Type: text/html;charset=utf-8 | ||
Content-length: 2048 | ||
Content-encoding: gzip | ||
空行 | ||
体 <html> | ||
<head> | ||
</head> | ||
<body> | ||
<h1>尚硅谷</h1> | ||
</body> | ||
</html> | ||
``` | ||
* 404 | ||
* 403 | ||
* 401 | ||
* 500 | ||
* 200 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
//1. 引入express | ||
const express = require('express'); | ||
|
||
//2. 创建应用对象 | ||
const app = express(); | ||
|
||
//3. 创建路由规则 | ||
// request 是对请求报文的封装 | ||
// response 是对响应报文的封装 | ||
app.get('/', (request, response)=>{ | ||
//设置响应 | ||
response.send('HELLO EXPRESS'); | ||
}); | ||
|
||
//4. 监听端口启动服务 | ||
app.listen(8000, ()=>{ | ||
console.log("服务已经启动, 8000 端口监听中...."); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>AJAX GET 请求</title> | ||
<style> | ||
#result{ | ||
width:200px; | ||
height:100px; | ||
border:solid 1px #90b; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<button>点击发送请求</button> | ||
<div id="result"></div> | ||
|
||
<script> | ||
//获取button元素 | ||
const btn = document.getElementsByTagName('button')[0]; | ||
const result = document.getElementById("result"); | ||
//绑定事件 | ||
btn.onclick = function(){ | ||
//1. 创建对象 | ||
const xhr = new XMLHttpRequest(); | ||
//2. 初始化 设置请求方法和 url | ||
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300'); | ||
//3. 发送 | ||
xhr.send(); | ||
//4. 事件绑定 处理服务端返回的结果 | ||
// on when 当....时候 | ||
// readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4 | ||
// change 改变 | ||
xhr.onreadystatechange = function(){ | ||
//判断 (服务端返回了所有的结果) | ||
if(xhr.readyState === 4){ | ||
//判断响应状态码 200 404 403 401 500 | ||
// 2xx 成功 | ||
if(xhr.status >= 200 && xhr.status < 300){ | ||
//处理结果 行 头 空行 体 | ||
//响应 | ||
// console.log(xhr.status);//状态码 | ||
// console.log(xhr.statusText);//状态字符串 | ||
// console.log(xhr.getAllResponseHeaders());//所有响应头 | ||
// console.log(xhr.response);//响应体 | ||
//设置 result 的文本 | ||
result.innerHTML = xhr.response; | ||
}else{ | ||
|
||
} | ||
} | ||
} | ||
|
||
|
||
} | ||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>AJAX POST 请求</title> | ||
<style> | ||
#result{ | ||
width:200px; | ||
height:100px; | ||
border:solid 1px #903; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div id="result"></div> | ||
<script> | ||
//获取元素对象 | ||
const result = document.getElementById("result"); | ||
//绑定事件 | ||
result.addEventListener("mouseover", function(){ | ||
//1. 创建对象 | ||
const xhr = new XMLHttpRequest(); | ||
//2. 初始化 设置类型与 URL | ||
xhr.open('POST', 'http://127.0.0.1:8000/server'); | ||
//设置请求头 | ||
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); | ||
xhr.setRequestHeader('name','atguigu'); | ||
//3. 发送 | ||
xhr.send('a=100&b=200&c=300'); | ||
// xhr.send('a:100&b:200&c:300'); | ||
// xhr.send('1233211234567'); | ||
|
||
//4. 事件绑定 | ||
xhr.onreadystatechange = function(){ | ||
//判断 | ||
if(xhr.readyState === 4){ | ||
if(xhr.status >= 200 && xhr.status < 300){ | ||
//处理服务端返回的结果 | ||
result.innerHTML = xhr.response; | ||
} | ||
} | ||
} | ||
}); | ||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>JSON响应</title> | ||
<style> | ||
#result{ | ||
width:200px; | ||
height:100px; | ||
border:solid 1px #89b; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div id="result"></div> | ||
<script> | ||
const result = document.getElementById('result'); | ||
//绑定键盘按下事件 | ||
window.onkeydown = function(){ | ||
//发送请求 | ||
const xhr = new XMLHttpRequest(); | ||
//设置响应体数据的类型 | ||
xhr.responseType = 'json'; | ||
//初始化 | ||
xhr.open('GET','http://127.0.0.1:8000/json-server'); | ||
//发送 | ||
xhr.send(); | ||
//事件绑定 | ||
xhr.onreadystatechange = function(){ | ||
if(xhr.readyState === 4){ | ||
if(xhr.status >= 200 && xhr.status < 300){ | ||
// | ||
// console.log(xhr.response); | ||
// result.innerHTML = xhr.response; | ||
// 1. 手动对数据转化 | ||
// let data = JSON.parse(xhr.response); | ||
// console.log(data); | ||
// result.innerHTML = data.name; | ||
// 2. 自动转换 | ||
console.log(xhr.response); | ||
result.innerHTML = xhr.response.name; | ||
} | ||
} | ||
} | ||
} | ||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>IE缓存问题</title> | ||
<style> | ||
#result{ | ||
width:200px; | ||
height:100px; | ||
border:solid 1px #258; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<button>点击发送请求</button> | ||
<div id="result"></div> | ||
<script> | ||
const btn = document.getElementsByTagName('button')[0]; | ||
const result = document.querySelector('#result'); | ||
|
||
btn.addEventListener('click', function(){ | ||
const xhr = new XMLHttpRequest(); | ||
xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now()); | ||
xhr.send(); | ||
xhr.onreadystatechange = function(){ | ||
if(xhr.readyState === 4){ | ||
if(xhr.status >= 200 && xhr.status< 300){ | ||
result.innerHTML = xhr.response; | ||
} | ||
} | ||
} | ||
}) | ||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>请求超时与网络异常</title> | ||
<style> | ||
#result{ | ||
width:200px; | ||
height:100px; | ||
border:solid 1px #90b; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<button>点击发送请求</button> | ||
<div id="result"></div> | ||
<script> | ||
const btn = document.getElementsByTagName('button')[0]; | ||
const result = document.querySelector('#result'); | ||
|
||
btn.addEventListener('click', function(){ | ||
const xhr = new XMLHttpRequest(); | ||
//超时设置 2s 设置 | ||
xhr.timeout = 2000; | ||
//超时回调 | ||
xhr.ontimeout = function(){ | ||
alert("网络异常, 请稍后重试!!"); | ||
} | ||
//网络异常回调 | ||
xhr.onerror = function(){ | ||
alert("你的网络似乎出了一些问题!"); | ||
} | ||
|
||
xhr.open("GET",'http://127.0.0.1:8000/delay'); | ||
xhr.send(); | ||
xhr.onreadystatechange = function(){ | ||
if(xhr.readyState === 4){ | ||
if(xhr.status >= 200 && xhr.status< 300){ | ||
result.innerHTML = xhr.response; | ||
} | ||
} | ||
} | ||
}) | ||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>取消请求</title> | ||
</head> | ||
<body> | ||
<button>点击发送</button> | ||
<button>点击取消</button> | ||
<script> | ||
//获取元素对象 | ||
const btns = document.querySelectorAll('button'); | ||
let x = null; | ||
|
||
btns[0].onclick = function(){ | ||
x = new XMLHttpRequest(); | ||
x.open("GET",'http://127.0.0.1:8000/delay'); | ||
x.send(); | ||
} | ||
|
||
// abort | ||
btns[1].onclick = function(){ | ||
x.abort(); | ||
} | ||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>重复请求问题</title> | ||
</head> | ||
<body> | ||
<button>点击发送</button> | ||
<script> | ||
//获取元素对象 | ||
const btns = document.querySelectorAll('button'); | ||
let x = null; | ||
//标识变量 | ||
let isSending = false; // 是否正在发送AJAX请求 | ||
|
||
btns[0].onclick = function(){ | ||
//判断标识变量 | ||
if(isSending) x.abort();// 如果正在发送, 则取消该请求, 创建一个新的请求 | ||
x = new XMLHttpRequest(); | ||
//修改 标识变量的值 | ||
isSending = true; | ||
x.open("GET",'http://127.0.0.1:8000/delay'); | ||
x.send(); | ||
x.onreadystatechange = function(){ | ||
if(x.readyState === 4){ | ||
//修改标识变量 | ||
isSending = false; | ||
} | ||
} | ||
} | ||
|
||
// abort | ||
btns[1].onclick = function(){ | ||
x.abort(); | ||
} | ||
</script> | ||
</body> | ||
</html> |
Oops, something went wrong.