您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

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

时间:2023-06-28 17:32:25  来源:今日头条  作者:云端源想IT培训

在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



Tags:Ajax   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
Ajax是什么?JavaScript中如何使用Ajax技术进行网络请求?
在web初期阶段,前端想要获取后端服务信息需要刷新整个页面,这种方式既耗时又让用户体验十分糟糕,那么怎么解决这个问题呢?想要搭建起前端和后端的快速通道,这个时候就需要使用Aja...【详细内容】
2023-06-28  Search: Ajax  点击:(230)  评论:(0)  加入收藏
Java抓取前端Ajax的秘诀:andXML和XML
在当今互联网时代,前端技术的发展已经越来越快,越来越多的网站采用了Ajax技术来实现前端渲染。这种技术可以使得页面更加流畅,用户体验更好,但是它也给后端爬虫带来了很大的挑战...【详细内容】
2023-05-09  Search: Ajax  点击:(378)  评论:(0)  加入收藏
在 node 中使用 jquery ajax
对于前端同学来说,ajax 请求应该不会陌生。jquery 真的ajax请求做了封装,可以通过下面的方式发送一个请求并获取相应结果:$.ajax({ url: "https://echo.apipost.cn/get.php"...【详细内容】
2022-09-01  Search: Ajax  点击:(406)  评论:(0)  加入收藏
Ajax 之战:XMLHttpRequest 与 Fetch API
Ajax 是大多数 web 应用程序背后的核心技术,它允许页面向 web 服务发出异步请求,因此数据可以不经过页面往返服务器无刷新显示数据。术语 Ajax 不是一种技术,相反,它指的是从客...【详细内容】
2022-05-06  Search: Ajax  点击:(298)  评论:(0)  加入收藏
在 JS 中如何使用 Ajax 来进行请求
本人已经过原 Danny Markov 授权翻译在本教程中,我们将学习如何使用 JS 进行AJAX调用。1.AJAX术语AJAX 表示 异步的 JavaScript 和 XML。AJAX 在 JS 中用于发出异步网络请求...【详细内容】
2021-01-12  Search: Ajax  点击:(453)  评论:(0)  加入收藏
ajax请求controller ajax跨域报错处理
报错:Access to XMLHttpRequest at 'http://localhost:8080/SpringBootServer/testfile' from origin 'null' has been blocked by CORS policy: No 'Ac...【详细内容】
2020-09-03  Search: Ajax  点击:(216)  评论:(0)  加入收藏
ajax跨域完全讲解
跨域产生的原因: 浏览器限制。如果浏览器发现请求是跨域的时候,就会做校验,如果校验不通过就会报跨域的错误 跨域。发出去的请求只要域名、端口、协议中的任意一个与当前域不同...【详细内容】
2020-07-02  Search: Ajax  点击:(377)  评论:(0)  加入收藏
JavaScript、Ajax、jQuery全部知识点,1分钟速懂!
本文将详细解读JavaScript、ajax、jQuery是什么?他们可以实现什么?1、JavaScript定义:javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一种广泛用于客户端Web开...【详细内容】
2020-04-29  Search: Ajax  点击:(307)  评论:(0)  加入收藏
PHP使用反向Ajax技术实现在线客服系统
反向Ajax技术,又称为服务器推技术,server push等。一般用于“在线客服”、“消息推送”、“即时通信”等功能中,比如新浪微博的私信功能,就是客户端不断的请求服务器并创建连接,...【详细内容】
2020-04-18  Search: Ajax  点击:(295)  评论:(0)  加入收藏
Java解决Ajax跨域解决方案
一、跨域问题的来源浏览器跨域处理原由:浏览器安全防护的“同源政策”影响。关于什么是“同源政策”,可以看这边文章,讲解比较详细易懂https://blog.csdn.net/dreamcatcher1...【详细内容】
2019-12-20  Search: Ajax  点击:(423)  评论:(0)  加入收藏
▌简易百科推荐
17 个你需要知道的 JavaScript 优化技巧
你可能一直在使用JavaScript搞开发,但很多时候你可能对它提供的最新功能并不感冒,尽管这些功能在无需编写额外代码的情况下就可以解决你的问题。作为前端开发人员,我们必须了解...【详细内容】
2024-04-03  前端新世界  微信公众号  Tags:JavaScript   点击:(5)  评论:(0)  加入收藏
你不可不知的 15 个 JavaScript 小贴士
在掌握如何编写JavaScript代码之后,那么就进阶到实践——如何真正地解决问题。我们需要更改JS代码使其更简单、更易于阅读,因为这样的程序更易于团队成员之间紧密协...【详细内容】
2024-03-21  前端新世界  微信公众号  Tags:JavaScript   点击:(27)  评论:(0)  加入收藏
又出新JS运行时了!JS运行时大盘点
Node.js是基于Google V8引擎的JavaScript运行时,以非阻塞I/O和事件驱动架构为特色,实现全栈开发。它跨平台且拥有丰富的生态系统,但也面临安全性、TypeScript支持和性能等挑战...【详细内容】
2024-03-21  前端充电宝  微信公众号  Tags:JS   点击:(25)  评论:(0)  加入收藏
构建一个通用灵活的JavaScript插件系统?看完你也会!
在软件开发中,插件系统为应用程序提供了巨大的灵活性和可扩展性。它们允许开发者在不修改核心代码的情况下扩展和定制应用程序的功能。本文将详细介绍如何构建一个灵活的Java...【详细内容】
2024-03-20  前端历险记  微信公众号  Tags:JavaScript   点击:(20)  评论:(0)  加入收藏
对JavaScript代码压缩有什么好处?
对JavaScript代码进行压缩主要带来以下好处: 减小文件大小:通过移除代码中的空白符、换行符、注释,以及缩短变量名等方式,可以显著减小JavaScript文件的大小。这有助于减少网页...【详细内容】
2024-03-13  WangLiwen    Tags:JavaScript   点击:(2)  评论:(0)  加入收藏
跨端轻量JavaScript引擎的实现与探索
一、JavaScript 1.JavaScript语言JavaScript是ECMAScript的实现,由ECMA 39(欧洲计算机制造商协会39号技术委员会)负责制定ECMAScript标准。ECMAScript发展史: 2.JavaScript...【详细内容】
2024-03-12  京东云开发者    Tags:JavaScript   点击:(2)  评论:(0)  加入收藏
面向AI工程的五大JavaScript工具
令许多人惊讶的是,一向在Web开发领域中大放异彩的JavaScript在开发使用大语言模型(LLM)的应用程序方面同样大有价值。我们在本文中将介绍面向AI工程的五大工具,并为希望将LLM...【详细内容】
2024-02-06    51CTO  Tags:JavaScript   点击:(53)  评论:(0)  加入收藏
JS小知识,使用这6个小技巧,避免过多的使用 if 语句
最近在重构我的代码时,我注意到早期的代码使用了太多的 if 语句,达到了我以前从未见过的程度。这就是为什么我认为分享这些可以帮助我们避免使用过多 if 语句的简单技巧很重要...【详细内容】
2024-01-30  前端达人  今日头条  Tags:JS   点击:(56)  评论:(0)  加入收藏
18个JavaScript技巧:编写简洁高效的代码
本文翻译自 18 JavaScript Tips : You Should Know for Clean and Efficient Code,作者:Shefali, 略有删改。在这篇文章中,我将分享18个JavaScript技巧,以及一些你应该知道的示例...【详细内容】
2024-01-30  南城大前端  微信公众号  Tags:JavaScript   点击:(68)  评论:(0)  加入收藏
使用 JavaScript 清理我的 200GB iCloud,有了一个意外发现!
本文作者在综合成本因素之下,决定用 Java 脚本来清理一下自己的 iCloud,结果却有了一个意外发现,即在 iCloud 中上传同一个视频和删除此视频之后,iCloud 的空间并不一致,这到底是...【详细内容】
2024-01-11    CSDN  Tags:JavaScript   点击:(99)  评论:(0)  加入收藏
站内最新
站内热门
站内头条