AJAX请求报文

最新推荐文章于 2022-08-10 10:47:04 发布

开心的人er

最新推荐文章于 2022-08-10 10:47:04 发布

阅读量237

点赞数

文章标签： ajax js web vue css3

本文链接：https://blog.csdn.net/weixin_45010901/article/details/115532228

版权

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

先创建一个JS文件，引入express,node激活服务器

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端口监听中...请稍等");
});

创建一个HTML页面

#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

在这里插入图片描述

开心的人er

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX请求报文

AJAX请求报文#请求报文#响应报文#相应响应状态码#快捷键#请求报文行 GET/POST url=""；HTTP/2.0头 Host: baidu.comCookie: name=baiduContent-type：application/x-www-form-urlencodedUser-Agent：chrome 89空行体（post可空可不空GET空格）eg:username=admin&password=admin#响应报文行 http/2.0(协议版本)
复制链接

扫一扫