百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

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

ztj100 2024-12-03 20:02 17 浏览 0 评论

“这里是云端源想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

文案编辑|云端学长

文案配图|云端学长

内容由:云端源想分享


相关推荐

人生苦短,我要在VSCode里面用Python

轻沉发自浅度寺量子位出品|公众号QbitAI在程序员圈子里,VisualStudioCode(以下简称VSCode)可以说是目前最火的代码编辑器之一了。它是微软出品的一款可扩展的轻量...

亲测可用:Pycharm2019.3专业版永久激活教程

概述随着2020年的到来,又有一批Pycharm的激活码到期了,各位同仁估计也是在到处搜索激活方案,在这里,笔者为大家收录了一个永久激活的方案,亲测可用,欢迎下载尝试:免责声明本项目只做个人学习研究之...

Python新手入门很简单(python教程入门)

我之前学习python走过很多的歧途,自学永远都是瞎猫碰死耗子一样,毫无头绪。后来心里一直都有一个做头条知识分享的梦,希望自己能够帮助曾经类似自己的人,于是我来了,每天更新5篇Python文章,喜欢的...

Pycharm的设置和基本使用(pycharm运行设置)

这篇文章,主要是针对刚开始学习python语言,不怎么会使用pycharm的童鞋们;我来带领大家详细了解下pycharm页面及常用的一些功能,让大家能通过此篇文章能快速的开始编写python代码。一...

依旧是25年最拔尖的PyTorch实用教程!堪比付费级内容!

我真的想知道作者到底咋把PyTorch教程整得这么牛的啊?明明在内容上已经足以成为付费教材了,但作者偏要免费开源给大家学习!...

手把手教你 在Pytorch框架上部署和测试关键点人脸检测项目DBFace

这期教向大家介绍仅仅1.3M的轻量级高精度的关键点人脸检测模型DBFace,并手把手教你如何在自己的电脑端进行部署和测试运行,运行时bug解决。01.前言前段时间DBFace人脸检测库横空出世,...

进入Python的世界02外篇-Pycharm配置Pyqt6

为什么这样配置,要开发带UI的python也只能这样了,安装过程如下:一安装工具打开终端:pipinstallPyQt6PyQt6-tools二打开设置并汉化点击plugin,安装汉化插件,...

vs code如何配置使用Anaconda(vscode调用anaconda库)

上一篇文章中(Anaconda使用完全指南),我们能介绍了Anaconda的安装和使用,以及如何在pycharm中配置Anaconda。本篇,将继续介绍在vscode中配置conda...

pycharm中conda解释器无法配置(pycharm配置anaconda解释器)

之前用的好好的pycharm正常配置解释器突然不能用了?可以显示有这个环境然后确认后可以conda正在配置解释器,但是进度条结束后还是不成功!!试过了pycharm重启,pycharm重装,anaco...

Volta:跨平台开发者的福音,统一前端js工具链从未如此简单!

我们都知道现在已经进入了Rust时代,不仅很多终端常用的工具都被rust重写了,而且现在很多前端工具也开始被Rust接手了,这不,现在就出现了一款JS工具管理工具,有了它,你可以管理多版本的js工具,...

开发者的福音,ElectronEgg: 新一代桌面应用开发框架

今天给大家介绍一个开源项目electron-egg。如果你是一个JS的前端开发人员,以前面对这项任务桌面应用开发在时,可能会感到无从下手,甚至觉得这是一项困难的挑战。ElectronEgg的出现,它能...

超强经得起考验的低代码开发平台Frappe

#挑战30天在头条写日记#开始进行管理软件的开发来讲,如果从头做起不是不可以,但选择一款免费的且经得起时间考验的低代码开发平台是非常有必要的,将大幅提升代码的质量、加快开发的效率、以及提高程序的扩展性...

一文带你搞懂Vue3 底层源码(vue3核心源码解析)

作者:妹红大大转发链接:https://mp.weixin.qq.com/s/D_PRIMAD6i225Pn-a_lzPA前言vue3出来有一段时间了。今天正式开始记录一下梗vue3.0.0-be...

Windows 11 + WSL2 打造轻量级 Linux 本地开发环境实战教程

一、前言...

基于小程序 DSL(微信、支付宝)的,可扩展的多端研发框架

Mor(发音为/mr/,类似more),是饿了么开发的一款基于小程序DSL的,可扩展的多端研发框架,使用小程序原生DSL构建,使用者只需书写一套(微信或支付宝)小程序,就可以通过Mor...

取消回复欢迎 发表评论: