Ajax原理以及优缺点

Ajax原理

1.Ajax 的原理简单来说是在用户和服务器之间加了---个中间层(AJAX 引擎),通过XmlHttpRequest 对象来向服务器发异步请求,

2.从服务器获得数据,然后用javascript 来操作DOM 而更新页面。使用户操作与服务器响应异步化。

3.这其中最关键的一步就是从服务器获得请求数据

4.Ajax 的过程只涉及JavaScriptXMLHttpRequestDOMXMLHttpRequest是ajax的核心机制

下面是代码

javascript 复制代码
/** 1. 创建连接 **/
var xhr = null;
xhr = new XMLHttpRequest()
/** 2. 连接服务器 **/
xhr.open('get', url, true)
/** 3. 发送请求 **/
xhr.send(null);
/** 4. 接受请求 **/
xhr.onreadystatechange = function(){
	if(xhr.readyState == 4){
		if(xhr.status == 200){
			success(xhr.responseText);
		} else { 
			/** false **/
			fail && fail(xhr.status);
		}
	}
}

ajax有哪些优缺点那?

优点

  1. 通过异步模式,提升了用户体验.

  2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用.

  3. ajax在客户端运行,承担了一部分本来由服务器承担的工作,减少了大用户量下的服务器负载。

  4. ajax可以实现动态不刷新(局部刷新)
    缺点

  5. 安全问题 AJAX暴露了与服务器交互的细节。

  6. 对搜索引擎的支持比较弱。

  7. 不容易调试。

到这里也就结束了希望对您有所帮助。

相关推荐
摸鱼的春哥6 分钟前
Agent教程15:认识LangChain(中),状态机思维
前端·javascript·后端
明月_清风11 分钟前
告别遮挡:用 scroll-padding 实现优雅的锚点跳转
前端·javascript
明月_清风14 分钟前
原生 JS 侧边栏缩放:从 DOM 监听到底层优化
前端·javascript
万少9 小时前
HarmonyOS 开发必会 5 种 Builder 详解
前端·harmonyos
橙序员小站11 小时前
Agent Skill 是什么?一文讲透 Agent Skill 的设计与实现
前端·后端
炫饭第一名14 小时前
速通Canvas指北🦮——基础入门篇
前端·javascript·程序员
王晓枫14 小时前
flutter接入三方库运行报错:Error running pod install
前端·flutter
符方昊14 小时前
React 19 对比 React 16 新特性解析
前端·react.js
ssshooter14 小时前
又被 Safari 差异坑了:textContent 拿到的值居然没换行?
前端
曲折14 小时前
Cesium-气象要素PNG色斑图叠加
前端·cesium