[AJAX] ajax详解

朴灿烈づ我的快乐病毒、 2023-06-28 11:10 3阅读 0赞

前言：  
最近在复习AJAX，所以打算在博客中记录一下AJAX。

#### 什么是AJAX? ####

AJAX = Asynchronous JavaScript and XML。  
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。  
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

#### AJAX过程？ ####

*  创建XMLHttpRequest对象,也就是创建一个异步调用对象
 *  创建一个新的HTTP请求，并指定其请求的方法、URL及验证信息
 *  设置响应HTTP请求状态变化的函数
 *  发送HTTP请求
 *  获取异步调用返回的数据
 *  使用JavaScript和DOM实现局部刷新  
    例如：

#### AJAX优缺点 ####

*  优点：可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量，避免用户不断刷新或者跳转页面，提高用户体验
 *  缺点：：对搜索引擎不友好，要实现ajax下的前进后退功能成本较大；跨域问题限制

#### Ajax、jQuery.ajax、Axios和Fetch的区别 ####

*  ajax最早出现的发送后端请求技术，利用用XMLHttpRequest对象。
 *  $.ajax是jQuery中的发送后端请求技术，基于原生Ajax的封装。
 *  Axios不是原生JS的，需要进行安装。它在client-side和server-side都可以使用。也可以在请求和响应阶段进行拦截。它是基于promise对象的
 *  Fetch号称是AJAX的替代品，使用了ES6中的promise对象。其参数有点像jQuery.ajax。但是fetch不是对ajax的封装，而是原生js实现的，并没有使用XMLHttpRequest对象。

#### AJAX下使用get还是post ####

GET与POST相比，GET更简单也更快，并且在大部分情况下都能用。  
然后在以下情况下，请使用POST请求：

*  无法使用缓存文件(更新服务器上的文件或数据库)
 *  向服务器发送大量的数据（POST没有数据量限制）
 *  发送包含未知字符的用户输入时，POST比GET更稳定更可靠

#### AJAX异步 ####

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。  
MLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

xmlhttp.open("GET","ajax_test.asp",true);

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。  
通过 AJAX，JavaScript 无需等待服务器的响应，而是：

*  在等待服务器响应时执行其他脚本
 *  当响应就绪后对响应进行处理

#### AJAX中 loadXMLDoc()函数 ####

loadXMLDoc() 函数创建 XMLHttpRequest 对象，添加当服务器响应就绪时执行的函数，并将请求发送到服务器。

当服务器响应就绪时，会构建一个 HTML 表格，从 XML 文件中提取节点（元素），最后使用已经填充了 XML 数据的 HTML 表格来更新 txtCDInfo 占位符：

具体使用就不再这里讲了，挺简单的，用一回基本就会使用了。