【Ajax原生+封装+扩展】入门到入土，这一篇就够了

前端小刘不怕牛牛

于 2022-06-03 07:26:07 发布

阅读量1.2k

点赞数 47

分类专栏：前端笔记文章标签： ajax xml javascript json 前端

本文链接：https://blog.csdn.net/weixin_62542181/article/details/125109560

版权

文章目录

前言

AJAX 全称为Asynchronous JavaScript And XML，也就是异步的JS和XML

通过AJAX，可以在无刷新页面的情况下，向服务器发送异步请求，并获取来自服务端的数据，这也是AJAX最大的优势：无需刷新获取数据

AJAX的使用在网页中非常常见，比如上新闻网，往下刷着刷着，需要加载一会才能显示下面的信息，这就是触发到底事件，浏览器通过AJAX获取到新的数据，然后通过JS创建元素显现在网页中

异步的JS相信无需讲解，下面对XML简单进行说明

0.1 XML简介

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

XML和HTML在结构上类似，不同的是HTML里是预定义标签，如<html></html>

而XML中没有预定义标签，均为自定义标签，用来表示（“形容”）数据

如下栗子：

<student>
    <name>张三</name>
	<age>18</age>
</student>
//这就是一个承载某位学生的XML数据段

最早AJAX中传送和存储数据用的就是XML，不过，现在已经被JSON替代，

如下：

{
   "name":"张三","age":18}

JSON是一种纯数据格式，只包含属性
简洁，在数据转换更加容易，灵活度远胜于 XML

0.2 AJAX 特点

优点
- 无需刷新页面而与服务器进行通信
- 允许根据用户事件来更新部分页面内容
缺点
- 无浏览历史，无法回退
  
  没有页面刷新
- 存在跨域问题
  
  无法从一个服务向另一个服务发送请求
- SEO不友好
  
  AJAX获取的数据，爬虫爬不到（感兴趣可以去了解一下SEO），简单说明就是百度搜不到这些数据

1. HTTP相关

首先我们需要对HTTP有一定的了解

全名为超文本传输协议，其实就是一个互联网的规定，简单理解就是统一语言

想要全面的学习http，MAD文档是个不错的选择

点此可跳转

1.1 HTTP请求交互基本过程

在这里插入图片描述

1.2 HTTP请求报文

包括四部分

行

行包括三部分，请求类型（GET、POST等），URL路径，HTTP版本/1.1or1.0

头

请求体类型

Host: atguigu.com
Cookie: name=giugu
Content-type: applicatiion/x-www-form-urlencoded
User-Agent: chrome 83
//键值对格式

空行
体

GET请求时，请求体为空，POST请求时，请求体可不为空
```
username=admin&password=admin
```

1.3 HTTP响应报文

四部分

行

包含三部分，协议版本——HTTP/1.1，响应状态码——如200表示OK（如常见的404），响应状态字符串
头

格式跟请求报文头一样
空行
体

主要返回结果

html文本、json文本、js、css、图片...

1.4 post请求体参数格式

Content-Type：application/x-www-form-urlencoded;charset=utf-8

用于键值对参数，参数的键值用=链接，参数之间用`&连接
Content-Type: application/json;charset=utf-8

用于json字符串参数
Content-Type: multipart/form-data

用于文件上传请求

1.5 不同类型的请求及作用

GET：从服务端读取数据
POST：向服务端添加新数据
PUT：更新服务端数据
DELETE：删除服务端数据

也就是查增改删

1.6 一般http请求与Ajax请求的区别

Ajax是特殊的http请求
对于浏览器端，只有XHR，和fetch发出的才是Ajax请求，其他所有都是非Ajax请求
浏览器响应：
1. 接收一般http请求后，浏览器一般会直接显示响应体的数据，也就是刷新/跳转页面
2. 接收Ajax请求后，浏览器并不会刷新，只是通过回调函数，传入响应体的数据

1.7 http状态码

无需考究太多，能知道代表什么就行，http状态码是在响应报文的行里面的。
200~300 表示OK，不过用得多的是200
404 表示服务端未接收到请求
500 服务器端错误，有时候就是服务器代码编译出错

这几个是比较常见的，后面发现没见过的一定要灵活应用搜索引擎

2. 原生AJAX基本使用（XHR）

xhr，全称为XMLHttpRequest，用于与服务器交互数据，是ajax功能实现所依赖的对象

2.1 准备工作

我们接下来通过案例实现Ajax的交互，从而学习Ajax

首先我们需要在服务端做一些准备

安装node.js

官方链接

打开命令行输入
node -v
若出现某个版本号，说明安装成功

安装express框架

利用命令行

npm init --yes
初始化环境
npm i express 
下载express包，建议使用管理员身份打开VScode或命令行，否则可能出现err

2.2 请求的基本操作

如何建立浏览器与服务端联系，下面通过一个小例子说明

服务端：

//引入express
const express = require('express')
//创建应用对象
const obj = express();

//创建路由规则
//request 对请求报文的封装
//response 对响应报文的封装
obj.get('/server', (request, response)=>{
   
    response.setHeader('Access-Control-Allow-Origin', '*');

    response.send('HELLO AJAX');
})

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

html:

<!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>AJAX GET 请求</title>
    <style>
        #result{
     
            width: 200px;
            height: 200px;
            border: 5px solid #90b;
        }
    </style>
</head>
<body>
    <button>点击此发送请求</button>
    <div id="result"></div>

    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.

最低0.47元/天解锁文章

前端小刘不怕牛牛

关注

47
点赞
踩
52

收藏

觉得还不错? 一键收藏
打赏
38
评论
【Ajax原生+封装+扩展】入门到入土，这一篇就够了

AJAX 全称为，也就是异步的JS和XMLAJAX的使用在网页中非常常见，比如上新闻网，往下刷着刷着，需要加载一会才能显示下面的信息，这就是触发到底事件，浏览器通过AJAX获取到新的数据，然后通过JS创建元素显现在网页中异步的JS相信无需讲解，下面对XML简单进行说明XML 是可扩展标记语言，被设计用来传输和存储数据XML和HTML在结构上类似，不同的是HTML里是预定义标签，如而XML中没有预定义标签，均为自定义标签，用来表示（“形容”）数据如下栗子：最早AJAX中传送和存储数据用的就是XML，不过，现
复制链接

扫一扫