Ajax速通（一）——前置知识

传说中的懿痕

于 2021-09-20 23:06:06 发布

阅读量359

点赞数 1

分类专栏： Ajax速通系列文章标签： ajax http restful

本文链接：https://blog.csdn.net/yihen0214/article/details/120396365

版权

Ajax速通系列专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Ajax前置知识

文章目录

Ajax前置知识

HTTP协议

HTTP(hypertext transport prototool) 协议[超文本传输协议]，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

主要规定了两块内容：请求和响应。
该内容可大致知道，不需要刻意记住

请求报文

这里重点介绍格式与参数

请求行：包含三部分 1. 请求类型（如get） 2.url路径（域名后面的内容，3. HTTP协议版本） 

请求头：Host：www.baidu.com
	   Cookie:.....
	   Content-Type:....
	   User-Agent:....	
	 
空行

请求体：get请求该内容为空，post请求该内容可以不为空

在这里插入图片描述

响应报文

结构与请求报头相同

响应行：HTTP版本(HTTP/1.1) 响应状态码(200) 响应字符串 (OK)

响应头：Content-Type：text/html;charset=utf-8
        Content-length: 2048
        Content-encoding: gzip
       
空行

响应体：<html>
            <head></head>
            <body></body>
        </html>

在这里插入图片描述

nodejs安装

到官网下载好nodejs。
在这里插入图片描述
下载完毕后，通过cmd输入node -v检查是否安装好

express框架的安装

为了测试Ajax，我们需要用到一些express框架的一部分操作，很简单。

以管理员身份打开VS Code，最外层的文件用英文命名。最好所有文件都用英文命名
在终端输入 npm init --yes
安装express框架 npm i express

express的基本使用

// 1. 引入express
const { response } = require('express'); // 这个是自动创建的，不需要可以去写
const express =require('express');

// 2. 创建应用对象
const app= express();

// 3. 创建路由规则：
// 第一个参数为路径，即必须在地址后加上/s才能访问到
// 第二个参数是回调函数

// request  是对请求报文的一个封装
// response 是对响应报文的一个封装
app.get('/s',(request,response)=>{
    // 设置响应 ，response.send();即发送响应体回去
    response.send('HELLO EXPRESS');

});

//  4. 监听端口，启动服务
app.listen(8000,()=>{
    console.log('服务已经启动,8000端口监听中.....')
})

示例测试

第一步：打开服务端
在这里插入图片描述
第二步：向服务端发送请求，该代码以后会详细解释，现在只用来测试

<!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>Document</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <button>点击我发送请求</button>
    <div id="result"></div>
    <script>
        // 获取元素
        const btn=document.querySelector('button');
        const result=document.querySelector('#result');
        // 绑定事件
        btn.addEventListener('click',function(){
            // 创建对象
            const xhr=new XMLHttpRequest();
            // 初始化对象，第一个参数为请求方式，第二个参数为url
            xhr.open('GET','http://127.0.0.1:8000/s');
            // 发送请求
            xhr.send();
            xhr.onreadystatechange=function(){
                if(xhr.readyState===4){
                    if(xhr.status>=200&&xhr.status<300){
                        result.innerHTML=xhr.response;
                    }
                }
            }            
        })
    </script>
</body>
</html>

在这里插入图片描述

传说中的懿痕

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax速通（一）——前置知识

Ajax前置知识文章目录Ajax前置知识HTTP协议请求报文响应报文nodejs安装express框架的安装express的基本使用示例测试HTTP协议HTTP(hypertext transport prototool) 协议[超文本传输协议]，协议详细规定了浏览器和万维网服务器之间互相通信的规则。主要规定了两块内容：请求和响应。该内容可大致知道，不需要刻意记住请求报文这里重点介绍格式与参数请求行：包含三部分 1. 请求类型（如get） 2.url路径（域名后面的内容，3. HTTP协议版
复制链接

扫一扫