江苏龙网

  1. 主页 > 生活百科 > >

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

ajax

在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是什么？JavaScript中如何使用Ajax技术进行网络请求？

文章插图
 
发送 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 。
Ajax是什么？JavaScript中如何使用Ajax技术进行网络请求？

文章插图
 
发送请求
发送请求的方法：
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请求需要五步】


推荐阅读


上一篇：AIGC大肆污染互联网，防范垃圾内容要“用魔法打败魔法”？

下一篇：AI七十年，从一篇论文到一个世界