百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

Ajax是什么?JavaScript中如何使用Ajax技术进行网络请求?

xsobi 2025-01-08 18:16 12 浏览

“这里是云端源想IT,帮你轻松学IT”

嗨~ 今天的你过得还好吗?

这个世界泥泞破碎

却也能开出温柔的花来


- 2023.06.28 -

在web初期阶段,前端想要获取后端服务信息需要刷新整个页面,这种方式既耗时又让用户体验十分糟糕,那么怎么解决这个问题呢?


想要搭建起前端和后端的快速通道,这个时候就需要使用Ajax。今天小编所要讲的内容就是在JS中如何通过Ajax技术进行网络请求。



一、Ajax介绍

Ajax是什么?

Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括:HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。

使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。


Ajax的优点:

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

Ajax的缺点:

  • 没有浏览历史,不能回退;
  • 存在跨域问题(同源);
  • SEO不友好。



Ajax 原理(发送Ajax请求的五个步骤)

接下来我们来了解一下Ajax 原理是什么,以及发送Ajax请求的五个步骤,其实也就是使用 XMLHttpRequest 对象的五个步骤。


一个完整的 HTTP 请求需要的是:

  • 请求的网址、请求方法 get/post。
  • 提交请求的内容数据、请求主体等。
  • 接收响应回来的内容。

发送 Ajax 请求的五个步骤:

1)创建异步对象,即 XMLHttpRequest 对象。

2)使用 open 方法设置请求参数。open(method, url, async)。参数解释:请求的方法、请求的 url、是否异步。第三个参数如果不写,则默认为 true。

3)发送请求:send()。

4)注册事件:注册 onreadystatechange 事件,状态改变时就会调用。如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。

5)服务端响应,获取返回的数据。


二、XMLHttpRequest 对象详解

在 JavaScript 中,XMLHttpRequest 是客户端的一个 API,它为浏览器与服务器通信提供了一个便捷通道。现代浏览器都支持 XMLHttpRequest API,如 IE 7+、Firefox、Chrome、Safari 和 Opera。

发送请求

发送请求的方法:

open(method, url, async);

参数解释:

  • method:请求的类型;GET 或 POST
  • url:文件在服务器上的位置
  • async:true(异步)或 false(同步)


另外还有个方法:(仅用于 POST 请求)

send(string);

POST 请求时注意:

如果想让像form表单提交数据那样使用POST请求,就需要使用 XMLHttpRequest 对象的 setRequestHeader()方法来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据:

xmlhttp.open('POST', 'ajax_test.php', true);


xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');


xmlhttp.send('name=smyhvae&age=27');

onreadystatechange 事件

注册 onreadystatechange 事件后,每当 readyState 属性改变时,就会调用 onreadystatechange 函数。


readyState:(存有 XMLHttpRequest 的状态。从 0 到 4 发生变化)

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪


status:

  • 200: “OK”。
  • 404: 未找到页面。

在 onreadystatechange 事件中,当 readyState 等于 4,且状态码为 200 时,表示响应已就绪。



服务器响应的内容

  • responseText:获得字符串形式的响应数据。
  • responseXML:获得 XML 形式的响应数据。

如果响应的是普通字符串,就使用 responseText;如果响应的是 XML,使用 responseXML。


三、常用Ajax请求方式

手写第一个 Ajax 请求

get 请求:

//【发送ajax请求需要五步】

//(1)创建XMLHttpRequest对象

var xmlhttp = new XMLHttpRequest();


//(2)设置请求的参数。包括:请求的方法、请求的url。

xmlhttp.open('get', '02-ajax.php');


//(3)发送请求

xmlhttp.send();


//(4)注册事件。 onreadystatechange事件,状态改变时就会调用。

//如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。

xmlhttp.onreadystatechange = function () {

// 为了保证 数据 完整返回,我们一般会判断 两个值

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

//(5)服务端相应:如果能够进入这个判断,说明数据请求成功了

console.log('数据返回成功:' + JSON.stringify(xmlhttp.responseText));


// 伪代码:按业务需要,将接口返回的内容显示在页面上

// document.querySelector('h1').innerHTML = xmlhttp.responseText;

}

};



post请求:

//(1)异步对象

var xmlhttp = new XMLHttpRequest();


//(2)设置请求参数。包括:请求的方法、请求的url。

xmlhttp.open('post', '02.post.php');


// 如果想要使用post提交数据,必须添加此行

xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');


//(3)发送请求

xmlhttp.send('name=fox&age=18');


//(4)注册事件

xmlhttp.onreadystatechange = function () {

//(5)服务端相应

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

alert(xmlhttp.responseText);

}

};



封装 Ajax 请求(重要)

上面的代码,执行顺序很好理解,但在实战开发中,是不会这么写的。假如你的页面中,需要调十次接口,那岂不是要手写十遍 Ajax 请求?这样会导致大量的重复代码。

所以,我们需要把重复代码封装成一个公共函数,然后通过回调函数处理成功和失败的逻辑。

封装 Ajax 请求的代码如下:(get 请求为例)

// 封装 Ajax为公共函数:传入回调函数 success 和 fail

function myAjax(url, success, fail) {

// 1、创建XMLHttpRequest对象

var xmlhttp;

if (window.XMLHttpRequest) {

xmlhttp = new XMLHttpRequest();

} else {

// 兼容IE5、IE6浏览器。不写也没关系

xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');

}

// 2、发送请求

xmlhttp.open('GET', url, true);

xmlhttp.send();

// 3、服务端响应

xmlhttp.onreadystatechange = function () {

if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {

var obj = JSON.parse(xmlhttp.responseText);

console.log('数据返回成功:' + obj);

success && success(xmlhttp.responseText);

} else {

// 这里的 && 符号,意思是:如果传了 fail 参数,就调用后面的 fail();如果没传 fail 参数,就不调用后面的内容。因为 fail 参数不一定会传。

fail && fail(new Error('接口请求失败'));

}

};

}


// 单次调用 ajax

myAjax('a.json', (res) => {

console.log(res);

});


// 多次调用 ajax。接口请求顺序:a --> b --> c

myAjax('a.json', (res) => {

console.log(res);

myAjax('b.json', (res) => {

console.log(res);

myAjax('c.json', (res) => {

console.log(res);

});

});

});

学会了封装 get 请求之后,封装 post请求也是类似的写法。



下面再列举两种常见的请求方式:

Jquery-Ajax请求

// get请求

$('button').eq(0).click(()=>{

// 方法中有三个参数,给谁发,发什么参数(对象),回调

$.get('http://127.0.0.1:8001/jquery-server', {a:100,b:200}, (data)=>{

console.log(data);

})

});


// post请求

$('button').eq(1).click(()=>{

// 方法中有四个参数,给谁发 ,发什么参数(对象),回调 ,响应体数据类型

$.post('http://127.0.0.1:8001/jquery-server', {a:100,b:200}, (data)=>{

console.log(data);

})

});


// ajax方式

$('button').eq(2).click(()=>{

// 参数是一个对象

$.ajax({

//url

url:'http://127.0.0.1:8001/jquery-server',

// 携带参数

data:{a:100, b:200},

// 响应体结果类型设置

// dataType:'json',

// 请求类型

type:'GET',

// 成功的回调函数

success:function(data){

console.log(data)

},

// 超时时间

// timeout:2000,

// 头信息设置

// headers:{},

// 失败的回调

// error:function(){}

})

})



Axios-Ajax请求

// 配置baseURL

// axios.defaults.baseURL = 'http://127.0.0.1:8001'

// 有此配置项后,请求地址可省略一部分


const btn = document.querySelectorAll('button');

btn[0].addEventListener('click', ()=>{

//GET请求

axios.get('http://127.0.0.1:8001/axios-server',{

// 请求参数

params:{

a:700,

b:400

},

// 请求头信息

// headers:{

// name:'张三',

// age:20

// },

// 回调函数

}).then(value =>{

console.log(value)

});

});


btn[1].addEventListener('click',()=>{

axios.post('http://127.0.0.1:8001/axios-server',{

// 携带参数

username:'admin',

passward:'admin',

})

})


btn[2].addEventListener('click', ()=>{

axios({

// 请求方法

method:'POST',

//url

url:'http://127.0.0.1:8001/axios-server',

// 参数

params:{

a:10,

b:100,

},

// 请求头

Headers:{

c:100,

d:200

},

// 请求体参数

// data: {

// username:'admin',

// passward:'admin',

// },

})

})

以上就是比较常用的一些请求方式,希望对大家理解Ajax网络请求这一块有点帮助。无论是哪种请求方式,还是要根据自身所处环境决定如何使用,介绍的只是方法,而具体逻辑还要看业务需求自行完成。

我们下期再见!

END

文案编辑|云端学长

文案配图|云端学长

内容由:云端源想分享


相关推荐

在 Linux 系统中安装 Redis 的详细步骤

以下是在Linux系统中安装Redis的详细步骤,支持通过包管理器安装(简单快捷)和源码编译安装(获取最新版本)两种方式:方法1:使用包管理器安装(推荐新手)适用于Ubuntu/De...

在Linux系统上安装Redis集群的详细步骤

以下是在Linux系统上安装Redis集群的详细步骤,基于Redis6.x+版本,采用三主三从(6个节点)的典型配置模式:1.安装前准备环境要求系统:Ubuntu/CentOS等主流Linux发行...

Linux入门使用教程

Linux入门一、初始化配置CentOS初始化安装在开始熟悉Linux操作命令之前,我们必须先搭建好Linux操作系统环境,我们这里选用的是Linux的发行版本CentOS7,在安装好CentOS操作...

06新手学习:Linux入门级命令教程

1、开启终端问题:什么是终端(Terminal)答:Linux操作系统中用于输入命令的位置打开后,效果如下图所示:2、Linux命令格式什么是Linux的命令?答:就是指在Linux终端(命令行)...

【笔记】windows10安装linux双系统教程(可能是现今最简单方法)

这周测试成功了大牛漂移菌教的树莓派系统镜像的压缩方法(【树莓派】小空间树莓派镜像系统备份方法img镜像文件压缩方法),虚拟机下备份镜像不太方便,无论是存储空间还是读卡操作都不方便。所以打算装个linu...

网络安全工程师:小白是如何让Kali Linux操作系统从U盘成功启动

一、背景介绍作为一名渗透测试工作人员(或者小白),在我们的日常工作或者学习中,我们不可能时时刻刻将自己的个人电脑(安装好KaliLinux的个人主机)带在身边,当我们没有带自己的个人电脑而需要进行渗...

Linux配置ip地址的两种方法

Linux配置ip地址的两种方法,实验环境为centos7.6方法1:nmcli工具配置(centos7以下版本不支持该方法)第一步,通过nmcliconnection查看网卡名称[root@lo...

Linux man 命令使用教程

简介man=manual(手册)命令用来查看Linux系统命令、函数、配置文件、系统调用等的官方文档。几乎所有标准程序和工具都有对应的man手册。基本语法man[options][s...

Linux程序安装与管理指南

在Linux系统中,安装和管理程序主要通过包管理器和手动编译安装两种主要方式实现。以下是详细的操作指南,涵盖常见发行版(如Ubuntu/Debian、CentOS/RHEL、Fedora等)的用法。一...

零基础保姆级教程!手把手教你免费玩转Linux安装+学习环境搭建!

前期准备安装VMware虚拟机首先你要安装VMware虚拟机,如果你还不知道VMware是什么可以去看我的VMware相关教程,里面有详细解答检查V-CPU虚拟化是否开启当我们在虚拟机安装系统的...

网络安全工程师:小白如何使用Kali Linux生成木马后门并实现免沙

1.背景介绍msfvenom是msfpayload和msfencode的结合体,可利用msfvenom生成木马程序,并在目标机上执行,在本地监听上线,在黑客圈子,这款工具略有名气。本次教程是Msfve...

Linux详解系列一:如何安装系统及客户端工具的使用

Linux是一种开放源码的操作系统,和Windows不同的是,由于其具有开源,稳定性强,安全,多用户操作等特点,它的使用场景非常广泛,比如企业中所使用的服务器中的操作系统,以及移动端的Andr...

4种方案供你选,微软发布《如何下载和安装Linux》教程

IT之家10月14日消息,微软近日发布了一个教程指南《如何下载和安装Linux》,介绍了使用WSL、本地安装、本地虚拟机和云端虚拟机4种方案。该指南重点介绍了用户在PC上运行Li...

嵌入式Linux开发教程:Linux Shell

本章重点介绍Linux的常用操作和命令。在介绍命令之前,先对Linux的Shell进行了简单介绍,然后按照大多数用户的使用习惯,对各种操作和相关命令进行了分类介绍。对相关命令的介绍都力求通俗易懂,都给...

Linux基础手把手教学:使用22.04系统

Linux基础手把手教学:使用Ubuntu22.04系统。1.这节来讲一下下边的目录结构,因为只有清楚了解linux下边的目录结构,才能很方便地进行操作。linux下边的目录结构较为简单...