前端 JS 之 AJAX 简介及使用
概述
AJAX 是一个缩写,它的全名是 Asynchronous JavaScript and XML,意思就是异步 JavaScript 和 XML,即用JavaScript执行异步网络请求。
AJAX 不是一种新技术,而是一个在 2005 年被 Jesse James Garrett 提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括:
- HTML 或 XHTML
- CSS
- JavaScript
- DOM
- XML
- XSLT
- XMLHttpRequest
尽管 X 在 AJAX 中代表 XML, 但由于 JSON 的许多优势,比如更加轻量以及作为 Javascript 的一部分,目前 JSON 的使用比 XML 更加普遍。JSON 和 XML 都被用于在 AJAX 模型中打包信息。
AJAX 的优势
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
AJAX 通过在后台与服务器进行少量数据交换,可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
XMLHttpRequest 对象
XMLHttpRequest(XHR)对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。
AJAX 的工作原理
其工作原理基本经过以下几个步骤:
- 客户端发送请求,请求交给 xhr。
- xhr 把请求提交给服务。
- 服务器进行业务处理。
- 服务器响应数据交给 xhr 对象。
- xhr 对象接收数据,由 JavaScript 把数据写到页面上。
AJAX 的创建步骤
根据 AJAX 的工作原理,它的创建步骤主要包括:
- 创建 XMLHttpRequest 对象,即创建一个异步调用对象。
- 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息。
- 设置响应 HTTP 请求状态变化的函数。
- 发送 HTTP 请求。
- 获取异步调用返回的数据。
- 使用 JavaScript 和 DOM 实现局部刷新。
AJAX 的具体使用
以下是 使用 AJAX 的完整流程。
1. 创建 XMLHttpRequest 对象
const request = new XMLHttpRequest();
2. 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
创建 HTTP 请求可以使用 XMLHttpReques t对象的 open() 方法,其语法代码如下:
request.open(method, url, async, user, password);
参数解析:
- method 要使用的HTTP方法,比如 “GET”、“POST”、“PUT”、“DELETE” 等。
- url 表示要向其发送请求的 URL 地址。
- async (可选) 一个可选的布尔参数,表示是否异步执行操作,默认为 true。如果值为 false,send() 方法直到收到答复前不会返回。如果 true,已完成事务的通知可供事件监听器使用。如果 multipart 属性为 true 则这个必须为 true,否则将引发异常。
- user (可选 用于认证用途的用户名,默认值为 null。
- password (可选) 用于认证用途的密码,默认值为 null。
3. 设置响应 HTTP 请求状态变化的函数和服务端返回信息函数
创建完 HTTP 请求之后,应该就可以将 HTTP 请求发送给 Web 服务器了。然而,发送 HTTP 请求的目的是为了接收从服务器中返回的数据。从创建 XMLHttpRequest 对象开始,到发送数据、接收数据、XMLHttpRequest 对象一共会经历以下 5 种状态:
- 未初始化状态。在创建完 XMLHttpRequest 对象时,该对象处于未初始化状态,此时 XMLHttpRequest 对象的 readyState 属性值为 0。
- 初始化状态。在创建完 XMLHttpRequest 对象后使用 open() 方法创建了 HTTP 请求时,该对象处于初始化状态。此时 XMLHttpRequest 对象的readyState属性值为 1。
- 发送数据状态。在初始化 XMLHttpRequest 对象后,使用 send() 方法发送数据时,该对象处于发送数据状态,此时XMLHttpRequest 对象的 readyState 属性值为 2。
- 接收数据状态。Web 服务器接收完数据并进行处理完毕之后,向客户端传送返回的结果。此时,XMLHttpRequest 对象处于接收数据状态,XMLHttpRequest 对象的 readyState 属性值为 3。
- 完成状态。XMLHttpRequest 对象接收数据完毕后,进入完成状态,此时 XMLHttpRequest 对象的 readyState 属性值为 4。此时接收完毕后的数据存入在客户端计算机的内存中,可以使用 responseText 属性或 responseXml 属性来获取数据。
总的来说,readyState 属性的值有以下几种:
- 0 (未初始化) or (请求还未初始化)
- 1 (正在加载) or (已建立服务器链接)
- 2 (加载成功) or (请求已接受)
- 3 (交互) or (正在处理请求)
- 4 (完成) or (请求已完成并且响应已准备好)
只读属性 XMLHttpRequest.status 返回了 XMLHttpRequest 响应中的数字状态码。status 的值是一个无符号短整型
。在请求完成前,status 的值为 0。值得注意的是,如果 XMLHttpRequest 出错,浏览器返回的 status 也为0:
- UNSENT(未发送) 0
- OPENED(已打开) 0
- LOADING(载入中) 200
- DONE(完成) 200
var xhr = new XMLHttpRequest();
console.log('UNSENT', xhr.readyState); // readyState 为 0xhr.open('GET', '/api', true);
console.log('OPENED', xhr.readyState); // readyState 为 1xhr.onprogress = function () {console.log('LOADING', xhr.readyState); // readyState 为 3
};xhr.onload = function () {console.log('DONE', xhr.readyState); // readyState 为 4
};xhr.send(null);
只有在XMLHttpRequest对象完成了以上5个步骤之后,才可以获取从服务器端返回的数据。因此,如果要获得从服务器端返回的数据,就必须要先判断XMLHttpRequest对象的状态:
const xhr = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {// do something here}
}
4. 发送HTTP请求
XMLHttpRequest.send(data);
结束
最后,附上一个简单的完整 AJAX 实例:
<button id="ajaxButton" type="button">Make a request</button><script>var httpRequest;document.getElementById("ajaxButton").addEventListener('click', makeRequest);function makeRequest() {httpRequest = new XMLHttpRequest();httpRequest.onreadystatechange = alertContents;httpRequest.open('GET', 'test.html');httpRequest.send();}function alertContents() {if (httpRequest.readyState === XMLHttpRequest.DONE) {if (httpRequest.status === 200) {alert(httpRequest.responseText);} else {alert('There was a problem with the request.');}}}
</script>
~
- ~
- 本文完
~
学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!
大家好!我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!
知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!
前端 JS 之 AJAX 简介及使用相关推荐
- 前端 js jQuery ajax实现文件流下载, 下载doc,xsl等文件内容乱码问题
问题描述: 前端通过jQuery ajax接受后端的文件流,前端下载文件后内容乱码 后端代码: Header("Content-type: application/octet-stream& ...
- 前端:JS/16/JavaScript简介,lt;script标记,常用的两个客户端输出方法,JS注释,JS变量(声明,命名规则,赋值),变量的数据类型(数值型,字符型)
JavaScript简介 1,JavaScript是什么? JavaScript是一种小型的,轻量级的,面向对象的,跨平台的客户端脚本语言. JavaScript是嵌入到浏览器软件当中去的,只要你的电 ...
- 前端JS通过Ajax下载后端返回的Excel文档
我们来看下效果演示: 条件假设: 首先得有一个下载文档的接口,我们假设这个接口的地址是myurl 其次我们一般使用token来区分用户是否有权下载,假设令牌为token html部分比较简单 < ...
- php接口前端安全,前端js的ajax 调用PHP写的API接口,如何卡主安全性,防止非法调用呢?...
我在一个WebAPP项目中遇到了题主的这个问题.由于API是为APP准备的,因此在WebAPP中使用ajax和api进行交互也不得不按照app与api交互时的使用习惯. 在向api发出请求的时候,可能 ...
- jeecg中ajax传值的前端js和后台代码
前端js: var b=1; $.ajax({ type : "POST", --Post请求方式 url : 'orderController.do?wuliao', --路径 ...
- 一、AJAX学习笔记——原生AJAX (ajax简介、XML简介、ajax优缺点、ajax的使用)
第 1 章:原生 AJAX 1.1 AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML. 通过 AJAX 可以在浏览器中向服 ...
- 视频教程-2020全新Javascript基础面试视频前端js教程-JavaScript
2020全新Javascript基础面试视频前端js教程 7年的开发架构经验,曾就职于国内一线互联网公司,开发工程师,现在是某创业公司技术负责人, 擅长语言有node/java/python,专注于服 ...
- Ajax简介、封装、同步异步 Ajax相关面试题
一.Ajax 简介 (1)什么是 Ajax ? Ajax = 异步 JavaScript 和 XML: Ajax 是一种用于创建快速动态网页的技术: 通过在后台与服务器进行少量数据交换,Ajax 可以 ...
- ajax简介跟优点讲解,简要总结ajax工作原理及优缺点
虽然在实际的项目中使用多种ajax请求,但就其工作原理,优缺点尚未深入总结, 参考:http://www.cnblogs.com/SanMaoSpace/archive/2013/06/15/3137 ...
最新文章
- 让系统命令man汉化
- ERROR: Could not install packages due to an EnvironmentError: [Errno 2] No such file or directory: ‘
- 文件服务器的配置与管理(2) 实现软RAID
- 用循环语句求2^0+2^1+........+2^63 (C语言)
- ubuntu linux编译apt,Ubuntu Linux系统下apt-get命令详解
- 一个快速排序写了快 10000 字?
- 布隆过滤器(Bloom Filter)详解
- php5.4 无法连接mongo,php连接MongoDB总是失败,为什么?
- 第一章 基于STM32核心板的电路设计与制作流程
- PhpQuery PHP操作HTML类,PHP操作XML类,PHP操作Dom类
- 浅谈:企业需要什么样的技术总监?技术总监需要具备什么能力?
- 微信备份时提示不在同一个网络
- wuauclt.exe出错?self.bat,abopx.sys等作怪
- 软件测试基础知识 - 说一说黑盒与白盒的测试方法
- 我们该如何进行bug总结?
- c语言入门之项目3.6——利用for循环输出一个直角三角形
- 黑马程序员——常用类
- 从网上下载资料怎样打印,网上打印资料步骤
- HTC U11 EYEs刷机包 HTC U11 EYEs原厂系统维修线刷包msm8976含教程
- Fully convolutional network