AJAX请求报文
#请求报文
行 GET/POST url=""；HTTP/2.0
头 Host: baidu.com
Cookie: name=baidu
Content-type：application/x-www-form-urlencoded
User-Agent：chrome 89
空行
体（post可空可不空GET空格 ）
eg:username=admin&password=admin
#响应报文
行 http/2.0(协议版本) 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 ok
main.JS
//1.引入express
const express = require("express");
//创建应用对象
const app = express();
//3.创建路由规则
app.get("/server", (require, response) => {
response.setHeader("Access-Control-Allow-Origin", "*");
response.send("HELLO AJAX,你学会了吗");
});
//4.监听端口启动服务
app.listen(8000, () => {
console.log("服务已经启动，8000端口监听中...请稍等");
});
#count{
width: 200px;
height: 200px;
border: 1px s``olid #110df3;
}
<body>
<button>点击尝试一下</button>
<div id="count"></div>
<script>
const btn=document.getElementsByTagName('button')[0];
const count=document.getElementById('count');
btn.οnclick=function(){
// 1.创建一个对象
const xhr=new XMLHttpRequest();
//2.初始化，设置请求方法和URL
xhr.open('GET','http://127.0.0.1:8000/server');
//3.发送
xhr.send();
//4.事件绑定，
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
//判断响应结果
if(xhr.status>=200&&xhr.status<300){
// 1.响应行
console.log("状态码:"+xhr.status);
console.log("状态字符串:"+xhr.statusText);
console.log("获取所有的响应头:"+xhr.getAllResponseHeaders());
console.log("获取响应体:"+xhr.response);
count.innerHTML=xhr.response;
}else{
}
}
}
}
</script>
</body>
#快捷键
撤销：<kbd>Ctrl/Command</kbd> + <kbd>Z</kbd>
重做：<kbd>Ctrl/Command</kbd> + <kbd>Y</kbd>
加粗：<kbd>Ctrl/Command</kbd> + <kbd>B</kbd>
斜体：<kbd>Ctrl/Command</kbd> + <kbd>I</kbd>
标题：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>H</kbd>
无序列表：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>U</kbd>
有序列表：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd>
检查列表：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd>
插入代码：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd>
插入链接：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd>
插入图片：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>G</kbd>
查找：<kbd>Ctrl/Command</kbd> + <kbd>F</kbd>
替换：<kbd>Ctrl/Command</kbd> + <kbd>G</kbd
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
