第 1 章:原生 AJAX

原生AJAX

1. AJAX 简介

  • AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML。
  • 通过 AJAX 可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据。
  • AJAX 不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。

2. XML 简介

  • XML (Extensible Markup Language)可扩展标记语言。

  • XML 被设计用来传输和存储数据。

  • XML 和 HTML 类似,不同的是 HTML 中都是预定义标签,而 XML 中没有预定义标签,全都是自定义标签,用来表示一些数据。

  • 比如说我有一个学生数据:name = "孙悟空" ; age = 18 ; gender = "男" ;

    用 XML 表示:

html 复制代码
<student>
	<name>孙悟空</name>
	<age>18</age>
	<gender>男</gender>
</student>
  • 现在已经被 JSON 取代了。
    用 JSON 表示:
    {"name":"孙悟空","age":18,"gender":"男"}

3. AJAX 的特点

3.1 AJAX 的优点

  1. 可以无需刷新页面而与服务器端进行通信。
  2. 允许你根据用户事件来更新部分页面内容。

3.2 AJAX 的缺点

  1. 没有浏览历史,不能回退
  2. 存在跨域问题(同源)
  3. SEO 不友好

4. HTTP

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

4.1 请求报文

4.2 响应报文

4.3 Chrome网络控制台产看通信报文

网页F12打开控制台 -> Network -> Headers

5. NodeJS的安装与介绍

Node.js基础

6. express框架介绍与基本使用

因为ajax要向服务端发送请求,所以我们这里用express模拟一下服务端

6.1 express的安装

  1. 初始化npm包管理工具:npm init --yes
  2. 安装express:npm i express

6.2 使用express

javascript 复制代码
// 1. 引入express
const express = require('express');

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

// 3. 创建路由规则
app.get('/', (request, response) => {
	response.send('hello express');
}

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

6.3 启动服务

右键js文件打开终端输入:node 文件名.js

相关推荐
Run Freely9372 天前
Ajax-day2(图书管理)-弹框显示和隐藏
前端·javascript·ajax
xkroy2 天前
ajax
前端·javascript·ajax
元亓亓亓2 天前
JavaWeb--day3--Ajax&Element&路由&打包部署
android·ajax·okhttp
Yvonne爱编码2 天前
AJAX入门-URL、参数查询、案例查询
前端·javascript·ajax
lwprain3 天前
龙蜥8.10中spark各种集群及单机模式的搭建spark3.5.6(基于hadoop3.3.6集群)
大数据·ajax·spark
知识分享小能手3 天前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
Yvonne爱编码4 天前
构建高效协作的桥梁:前后端衔接实践与接口文档规范详解
前端·git·ajax·webpack·node.js
William_cl4 天前
MVC 中 AJAX 与前后端交互深度实战(含独家避坑与场景化方案)
ajax·mvc·交互
Yvonne爱编码5 天前
AJAX入门-AJAX 概念和 axios 使用
前端·javascript·ajax·html·js
闯闯桑5 天前
Spark 中spark.implicits._ 中的 toDF和DataFrame 类本身的 toDF 方法
大数据·ajax·spark·scala