2024年最全【Ajax原生+封装+扩展】入门到入土，这一篇就够了(1)，2024年最新web前端面试宝典

于 2024-05-14 13:45:43 发布
阅读量629 收藏 29
点赞数 27
分类专栏： 程序员 文章标签： 前端 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84447297/article/details/138852050
版权

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  • 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

  • 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

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

    用于键值对参数，参数的键值用=链接，参数之间用`&连接

  2. Content-Type: application/json;charset=utf-8

    用于json字符串参数

  3. Content-Type: multipart/form-data

    用于文件上传请求

1.5 不同类型的请求及作用

  1. GET：从服务端读取数据

  2. POST：向服务端添加新数据

  3. PUT：更新服务端数据

  4. 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

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

  1. 安装node.js

官方链接


打开命令行输入

node -v

若出现某个版本号，说明安装成功
  1. 安装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.getElementById('result');

        //注册事件

        btn.onclick = 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){

                        //设置result的文本

                        result.innerHTML = xhr.response;

                    }

                }

            }

        }

    </script>

</body>

</html>

在VScode里打开终端，执行服务端js文件


node .\server.js

此时设置的监听器打开

再把html在浏览器中打开，便可实现交互效果，你可以点点那个按钮看看哦

上述的GET请求的案例，作用就是在服务端获取信息，大家还可以试试类型完成交互，本文主讲GET 和POST两种类型

补充：

GET请求设置参数

大家有时可以看到某些URL后面会带着一长串东西，那就是浏览器向服务端传输的数据参数

格式如下：

在域名后加上?作为分割，紧接着用参数=值&参数=值的循序叠加

栗子如下：


http://127.0.0.1:8000/server?a=100&b=200&c=300





//在代码里则表现为

xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');

上述请求的基本操作对于GET和POST均成立

这里提的是他们设置参数方式的不同

对于POST设置参数则为：


xhr.send('a=100&b=200&c=300');

事件绑定：

也就是第四个步骤，目前较新的用法是onload事件


xhr.onload = function(){

	 if(xhr.status >= 200 && xhr.status <=300){

          //设置result的文本

          result.innerHTML = xhr.response;

                    }

}

当然，两个方法都是可用的

2.3 如何设置请求头

报文的其他部分我们都以及有了设置的方法，还差一个请求头

这个也是通过XHR对象的一个方法实现的

语法如下：


xhr.setRequestHeader('Content-Type', 'application/x-www-from-urlencoded');

需要注意的是，当你使用post类型时，记得把服务端文件中的get改为post哦，否则无法接受到请求

2.4 JSON数据请求

接下来同样用一个例子让我们理解JSON

首先先有几个知识点

我们知道，JSON就是存储数据的，没有标签，没有函数

那么如果我们想要获取到服务端的数据


const data = {

    name : 'zhangsan';

}

那么从前面学的知识，我们可以想到，在JS文件中，对


response.send('...');

进行修改即可，需要注意的是，该send方法只能传递字符串

那我们还可以利用一个对象的方法

let str = JSON.stringify(data);

对该data对象进行字符串转换，那么合起来代码就是：


const data = {

    name : 'zhangsan'

};

let str = JSON.stringify(data);

response.send(str);

那么在浏览器端，就会接收到这样一段数据

name : 'zhangsan'

如果我想得到值，去掉这个name怎么办？

在日常的应用中，大多数情况也是不需要这个name属性

我们可以在浏览器端设置

  1. 第一种，手动设置

    
let data = JSON.parse(xhr.response);

result.innerHTML = data.name;

  2. 第二种，自动转化

    在XHR对象中，有一个设置返回数据类型的格式

    我们可以这样设置它，

    
xhr.responseType = 'json';

    这句代码只需要在前面定义，后面只要我们需要用到某个值，都可以直接

    
result.innerHTML = xhr.response.name;

    灰常方便！！

服务端：


const express = require('express')

const app = express();



app.all('/server', (request, response) => {

  // 设置响应头, 设置允许跨域

  response.setHeader('Access-Control-Allow-Origin', '*');

  // 响应一个数据

  const data = {

    name: 'zhangsan'

  };

  // 对 对象 进行 字符串 转换

  let str = JSON.stringify(data)

  // 设置响应体 

  response.send(str);

});

html：


<!DOCTYPE html>

<html lang='en'>

    <head>

        <meta charset="UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewpport" content="width=device-width, initial-scale=1.0">

        <title>JSON</title>

        <style>

            #result{

                width: 200px;

                height: 200ox;

                border: 5px solid #90b;

            }

        </style>

    </head>

    <body>

        <div id="result"></div>

		<script>

            const result = document.getElementById('result');

            //绑定键盘按下事件

            window.onkeydown = function(){

                //发送请求

                const xhr = new XMLHttpRequest();

                //响应体数据自动转换为JSON

                xhr.responseType = "json";

                //初始化

                xhr.open('GET', 'http://127.0.0.1:8000/server');

                //发送

                xhr.send();

                //事件绑定

                xhr.onreadystatechange = function(){

                    if(xhr.readyState === 4){

                        if(xhr.status >= 200 & xhr.status <= 300){

                            //手动数据转化

                            //let data = JSON.parse(xhr.response);

                            //result.innerHTML = data.name;

                            //自动

                            result.innerHTML = xhr.response.name;

                        }

                    }

                }

            }

        </script>

    </body>

</html>

2.5 nodemon

这里先来介绍一个工具

我们知道，当我们对服务端文件进行修改时，需要重新启动服务才能生效，这就有点繁琐了，而这个工具可以自动检测我们的文件是否修改，如果修改，它会帮我们自动重新启动服务

安装也是非常简单，在终端写下以下代码


npm install -g nodemon

等待安装，启动服务把node的代码换成用这一串代码，就代表使用这个工具拉


nodemon server.js

2.6 请求超时和网络异常

用户在浏览网页时时常会发生网络异常，或者网络速率低超时现象

这时我们可以提醒用户，“稍后重试” ——“友好信息，保证用户体验”


//这是设置超时的对象属性

//此处设置为2秒

xhr.timeout = 2000;



//超时时间发生，调用回调函数

xhr.ontimeout = function(){

    alert('网络超时，请稍后重试')

}



//网络异常事件发生，调用回调函数

xhr.onerror = function(){

    alert('网络异常，请稍后重试');

}

2.7 取消请求

有时用户可能因为某些原因，想要取消请求操作，如等的不耐烦，按错了

这时候，我们可以使用XHR对象的abort方法


xhr.abort();

//注意，一般得设置个事件，把上面的代码放进去，比如按钮，当按下按钮，取消请求

28 请求重复发送问题

当用户快速触发事件多次发送请求，服务器压力变大，性能降低

解决方法：

重复发送请求时，将上一次未完成的请求取消


//创建一个判断是否正在发送请求的变量

let isSending = false;



//在事件内判断是否正在发送，如果是，取消请求然后再创建新请求

//在判断之后将上述变量改为真（写在初始化前面）

//这样用户发送第二次请求就会执行该if语句

if(isSending)

    xhr.abort();

x = new XMLHttpRequset();

isSending = true;

...

2.9 解决IE缓存问题

在某些浏览器如IE，由于缓存机制的存在，Ajax只会发送第一次的请求，剩余多次请求不会再发送给浏览器而是直接加载缓存中的数据

解决方法：

浏览器的缓存是通过URL地址记录的，因此我们只需要修改URL，多次请求也可以发送啦


xhr.open('GET','/server?t='+Date.now());

//给它加个时间戳，保证每次请求的URL都会不同

2.8 Ajax函数封装

重点来了，Ajax请求发送步骤不少，一次两次还行，但是实际开发中我们会经常用到Ajax请求，这时候如果还一个一个写就多出了很多重复代码，因此我们一般会用一个函数封装Ajax的基本操作


 function ajax (options){

        //设置默认值

        var defaults = {

            type: 'get',

            url: '',

            data: {},

            header: {

                'Content-Type': 'appliction/x-www-form-urlencoded'

            },

            success: function(){},

            error: function(){

                alert('请求错误');

            }

        }



		//用option覆盖defaults对象，传递的参数没有设置就用默认值

        Object.assign(defaults, options);



        var xhr = new XMLHttpRequest();

        //获取请求参数字符串

        var params = '';

        for(var attr in defaults.data){

            params += attr + '=' + defaults.data['attr'] + '&';

        }

        params = params.substring(0, [params.length - 1]);

        //判断请求方式并发送请求体

        if(defaults.type == 'get'){

            defaults.url = defaults.url + '?' +  params;

        }

        xhr.open(defaults.type, defaults.url);

        if(defaults.type == 'post'){

            xhr.send(params);

        }else{

            xhr.send();

        }



        //获取返回的数据

        xhr.onload = function(){

            var contentType = xhr.getResponseHeader('Content-Type');

            var responseText = xhr.responseText;

            if(contentType.includes('application/json')){

                responseText = JSON.parse(responseText);

            }

            if(xhr.status == 200){

                defaults.success(responseText, xhr);

            }else{

                defaults.error(responseText, xhr);

            }

        }



    }

3. 在jQuery中发送Ajax请求

3.1 GET请求


$('button').btn(0).click(function(){

    $.get('http://127.0.0.1:8000/server', {a:100, b:200}, function(data){

         console.log(data);//这里获得从服务端传来的数据进行处理

    } )

})

3.2 POST请求


$('button').btn(0).click(function(){

    $.post('http://127.0.0.1:8000/server', {a:100, b:200}, function(data){

         console.log(data);//这里获得从服务端传来的数据进行处理

    } )

})

上面两个的格式就是


$.get/post(url, [data], [callback], [type])



### 最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『**难的不会，会的不难**』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

**我特地针对初学者整理一套前端学习资料**

![前端路线图](https://img-blog.csdnimg.cn/img_convert/6adf0fb67c766030c78ce5cb1ff41cae.webp?x-oss-process=image/format,png)

![vue.js的36个技巧](https://img-blog.csdnimg.cn/img_convert/66ccaf01e801776e589047fae94634e4.webp?x-oss-process=image/format,png)

                defaults.error(responseText, xhr);

            }

        }



    }

3. 在jQuery中发送Ajax请求

3.1 GET请求


$('button').btn(0).click(function(){

    $.get('http://127.0.0.1:8000/server', {a:100, b:200}, function(data){

         console.log(data);//这里获得从服务端传来的数据进行处理

    } )

})

3.2 POST请求


$('button').btn(0).click(function(){

    $.post('http://127.0.0.1:8000/server', {a:100, b:200}, function(data){

         console.log(data);//这里获得从服务端传来的数据进行处理

    } )

})

上面两个的格式就是


$.get/post(url, [data], [callback], [type])



### 最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『**难的不会，会的不难**』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

**我特地针对初学者整理一套前端学习资料**

[外链图片转存中...(img-kRtSCb31-1715665519396)]

[外链图片转存中...(img-zMetkPnk-1715665519397)]
2401_84447297
关注
  • 27
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义封装ajax请求
tcugg的博客
11-30 597
在封装的请求中一般post，put和upload请求需要设置设置请求头，在这里我的请求头是存放在cookie中，需要用到自定义封装cookie，这里有自定义封装的cookie。xhr.readyState = 2时-发送数据,send()方法调用,但是当前的状态及http头未知,请求未完成。删除请求可以依照post请求进行书写，一般是删除请求都需要设置请求头，没有请求头不能进行删除操作。xhr.readyState = 0时-未初始化,对象已建立,尚未调用open()1**：请求收到，继续处理。
AJAX入门？有这一篇就够了！
01-08
是一种web开发的技术，而不是新的编程语言 异步发送&请求数据 不需要重新刷新当前页面 虽然名字里有XML，但现在传送数据大多用JSON格式 AJAX工作流程 原创文章 4获赞 11访问量 1077 关注 私信 展开阅读全
Ajax 封装
weixin_47505105的博客
03-09 4738
介绍了原生ajax存在的问题，以及一步步完善对ajax进行封装
Ajax的封装
weixin_51445423的博客
04-21 7058
前端封装Ajax
ajax的封装
m0_45884629的博客
11-01 1924
ajax的封装
如何对Ajax请求进行封装操作，解决跨域问题的方法，如何使用core解决跨域
最新发布
m0_71966801的博客
01-31 1460
代码重用：通过封装Ajax操作，可以将相同的代码段抽象成一个函数或方法，这样就可以在多个地方重复使用，避免代码冗余和重复编写。错误处理：封装Ajax操作可以统一处理Ajax请求的错误，避免在每个Ajax调用处都进行错误处理，提高代码的健壮性和可靠性。代码简洁：封装Ajax操作可以将繁琐的Ajax调用过程简化为一个函数或方法，从而减少代码量，提高代码的可读性和可维护性。统一管理：通过封装Ajax操作，可以将所有的Ajax请求都集中在一个地方进行管理，方便统一调用和维护。
异步编程Ajax的详解，并对其进行封装整理
热门推荐
零一的博客
10-12 2万+
对于Ajax，肯定很多小伙伴都听过甚至用过了，那么没听过的也不用着急，本文会对Ajax进行讲解，其次，一定还有一些人只用过JQuery封装好了的Ajax却对原生的Ajax并不了解，那么也不用着急，本文从最基本的Ajax开始讲起，然后最后会尽可能得模仿JQuery对其进行封装，让我刚才提到的两类人能对Ajax有进一步的了解。 公众号：Lpyexplore的编程小屋 关注我，不定时更新前端面试题 关注还有更多电子书、前端面试题、数据结构与算法代码等你来拿 异步编程——Ajax一、什么是Ajax二、Ajax的
js+ajax+jquery+easyui从入门到精通（项目实战）
06-08
1.javascript从入门到精通，为学习ajax打基础；2.ajax技术从零开始学，深入研究ajax的原理及使用，通过一些使用案例讲解；3.easyui从入门到精通课程，详细介绍各种常用控件的使用方法，结合项目模块实战；4.jquery...
【必看】2020年新型前端HTML5+CSS3+JS+Canvas+AJAX+Http前后端交互
06-17
希望学习本课程的学员认真学习每一个课时的视频，跟着视频练习和做作业，只有多写多练才能灵活变通，掌握真正的核心技术。 课程包含HTML5新标签新规范，DIV+CSS设计、Canvas绘画；CSS样式设计，其中有动画特效、...
一个jsp+AJAX评论系统第1/2页
10-30
一个jsp+AJAX评论系统
自己用的简单封装AJAX类
01-09
今天找寻AJAX类，使用起来不是很方便，算了自己封装一个<br>注：简单封装，使用简单
ajax封装数据原理
08-07
ajax封装数据原理详解,要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
自己封装的一个ajax的小工具
01-13
平时用ajax较多 , 每次都引入jQuery只用这么一个小功能感觉太浪费 , 就自己封装了一个小工具.
js封装 - ajax兼容处理
03-09
ajax封装兼容函数，有利于提高开发效率，减少代码量。
超轻量级好用的js AJAX封装类
01-03
如果是做基于广域网应用的web程序，这个ajax类最合适不过了，ajax功能全，简单好用堪比jquery，最重要的是，它无比轻量级，与jquery、extjs等框架的ajax相比，它小多了，可大大减轻网络传输压力，有效提升web访问速度。这个js类里有详细API和实例，代码注释量也很大，不但可直接用于项目也可以用于新手学习研究。
原生Javascript封装的一个AJAX函数分享
01-19
而现在使用的ajax函数是一个后台人员封装的—-但他又是基于jquery的ajax,所以离开了jquery这个函数就毫无作用了.而且我觉得,jquery的ajax方法是很完善的了,可以直接用,如果都有jquery了,那么他的ajax就不用白不用了....
AJAX手写JQuery框架封装AJAX请求和常见方法实现无DOM对象操作------AJAX
吾不识青天高黄地厚。唯见月寒日暖，来煎人寿。
11-17 94
AJAX手写JQuery框架封装AJAX请求和常见方法实现无DOM对象操作------AJAX
ajax封装（两种方式）
前端泡面人
05-06 2096
封装ajax请求的两种方式
关于Ajax的封装方法
m0_47593452的博客
05-04 1397
一、封装ajax 封装ajax，可直接复制引用 ajax.js function sendAjax(obj){/ 先判断url是否传入 if(!obj.url){ / 没有传 throw new Error('地址必填') / 抛出自定义错误 } / 传入了之后需要验证url是否是字符串 if(Object.prototype.toString.call(obj.url) !== '[object String]'){ throw new Error('地址必须是字符串') } /
后台返回map类型ajax如何接收_Ajax原理一篇就够了
05-15
Ajax（Asynchronous JavaScript and XML）是一种用于创建异步 Web 应用程序的技术。它是一种在不重新加载整个页面的情况下更新部分页面的技术，通过在后台与服务器进行少量数据交换，使 Web 应用程序更快地响应用户...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值