Ajax是什么?JavaScript中如何使用Ajax技术进行网络请求?
toyiye 2024-09-19 04:46 1 浏览 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
文案编辑|云端学长
文案配图|云端学长
内容由:云端源想分享
相关推荐
- 为何越来越多的编程语言使用JSON(为什么编程)
-
JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...
- 何时在数据库中使用 JSON(数据库用json格式存储)
-
在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...
- MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)
-
前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...
- JSON对象花样进阶(json格式对象)
-
一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...
- 深入理解 JSON 和 Form-data(json和formdata提交区别)
-
在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...
- JSON 语法(json 语法 priority)
-
JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...
- JSON语法详解(json的语法规则)
-
JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...
- MySQL JSON数据类型操作(mysql的json)
-
概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...
- JSON的数据模式(json数据格式示例)
-
像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...
- 前端学习——JSON格式详解(后端json格式)
-
JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...
- 什么是 JSON:详解 JSON 及其优势(什么叫json)
-
现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...
- PostgreSQL JSON 类型:处理结构化数据
-
PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...
- JavaScript:JSON、三种包装类(javascript 包)
-
JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...
- Python数据分析 只要1分钟 教你玩转JSON 全程干货
-
Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...
- 比较一下JSON与XML两种数据格式?(json和xml哪个好)
-
JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- r语言矩阵 (127)
- browsererror (114)
- exportexcel (119)
- cv2.bitwise_not (137)
- dump命令 (128)
- es6concat (126)
- heapify (127)
- java.security.egd (130)
- javax.annotation (117)
- jsstringsplit (117)
- js数字 (115)
- maven编译 (132)
- mysqlleft (128)
- nodejsbuffer (149)
- org.apache.commons.httpclient (126)
- org.jsoup (141)
- org.springframework.web (128)
- robotframework-ride (115)
- setnocounton (141)
- socket.gethostbyname (122)
- sqlmid (121)
- time.strptime (133)
- vscode格式化 (125)
- win32con (129)
- window.localstorage (126)