AJAX的知识点

得鹿梦为鱼

已于 2022-07-26 03:01:30 修改

阅读量273

点赞数

文章标签： ajax visual studio vscode

于 2022-07-25 01:09:58 首次发布

本文链接：https://blog.csdn.net/qq_52460205/article/details/125967016

版权

AJAX XML HTTP协议 Express框架 Web服务器

关键词由CSDN通过智能技术生成

AJAX的知识点

文章目录

AJAX的知识点

ajax的简介

AJAX是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术，是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，使网页实现异步更新。
AJAX就是异步的JS和XML，通过ajax可以在浏览器中向服务器发送异步请求，ajax最大的优势是：无需刷新获取数据。AJAX不是新的编程语言。

XML简介

XML：可扩展标记语言。被设计用来传输和存储数据。

HTML中都是预定义标签，而xml中没有预定义标签（如：a标签、p标签），全部都是自定义标签，用来表示一些数据。

比如有一个学生数据：
name="张三" sex="男" age=21;
用XML表示为：
<student>
  <name>张三</name>
  <sex>男</sex>
  <age>21</age>
</student>

由于json格式与xml格式相比，更加简洁，而且在数据转换时更加容易,所以xml现在已经被json取代了。

用JSON表示为：
{"name":"张三","sex":"男","age":"21"}

ajax的特点

ajax的优点

可以无需刷新页面而与服务器端进行通信；
允许根据用户事件（如:鼠标事件、键盘事件）来更新部分页面内容。

ajax的缺点

没有浏览历史，不能回退；
存在跨域问题；
SEO不友好

HTTP协议

http协议：超文本传输协议，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

请求报文

请求报文：浏览器给服务器发送请求的内容。

请求报文的格式如下：

请求行  ：请求方法（GET/POST） 请求路径URL HTTP协议版本号(如:http/1.1)
请求头部：名字+冒号+空格+值  （如：Host:atguigu.com  Cookie: name=guigu)
  空行：此行表示请求头部结束，之后的是请求数据。
请求体（请求数据）： post请求时，数据在请求体中，即是有数据；get请求时，数据附加在URL参数里，格式为：URL?参数名=参数值

请求数据：请求数据中，post方法适用于表单，如：登录时的表单输入。常用的Content-type有：image/jpg(jpg图片格式)、video/mpeg4(视频mp4格式)、text/plain(纯文本格式)、text/xml(XML格式)等。

URL组成：

 <协议>://<主机>:<端口>/<路径>
如：http://localhost:8080/index.html?......
Http默认端口号为80，而Https默认端口号为443

响应报文

响应报文：服务器向浏览器返回的结果。

响应报文格式：

响应行： 协议版本号（如http/1.1)  + 响应状态码（200表示OK，404表示找不到、401表示未授权、403表示禁止、500表示内部错误） + 响应状态字符串（如;ok)  如：Http/1.1  200 OK
响应头部：对响应体进行一些描述。如：Content-Type:text/html;charset=UTF-8  Content-length:2048  Content-encoding:UTF-8
 空行：此行表示响应头部结束，之后的是响应数据。
响应体：用于存放需要给客户端的数据信息。
   	   <html>
  			  <head>
  			  </head>
   				 <body>
  					  <h1>ajax</h1>
  				  </body>
  	  </html>

AJAX-express框架

Express是基于Node.js（使用express框架前必须先下载Node.js）运行环境的Web应用程序开发框架,为Web应用程序提供了强大的功能。把Node.js的HTTP模块的功能封装在一个接口中，用于扩展HTTP模块的功能，可以轻松地处理服务器的路由、响应、Cookie和HTTP请求的状态。

安装Express

在根目录（一定要在根目录下）下鼠标右击，选择在集成终端打开

在这里插入图片描述

在终端上输入

npm init --yes

在这里插入图片描述

然后再输入

npm i express

在这里插入图片描述

到这里express就安装完成了。

利用Express搭建Web服务器

在创建的express.js文件下编写如下代码：

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