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. 不容易调试。

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

相关推荐
半生过往35 分钟前
2025 前端动效实战指南:Vue Bits & React Bits 深度拆解(功能 / 复用 / 高频问题处理)
前端·vue.js·react.js
程序员包打听38 分钟前
Vitest 4.0 重磅发布:Browser Mode 正式稳定,前端测试进入新纪元
前端
BumBle39 分钟前
UniApp 多页面编译优化:编译时间从10分钟到1分钟
前端
星链引擎42 分钟前
大语言模型的技术突破与稳定 API 生态的构建
前端
还是大剑师兰特43 分钟前
TypeScript 面试题及详细答案 100题 (71-80)-- 模块与命名空间
前端·javascript·typescript
BumBle43 分钟前
使用 SortableJS 实现vue3 + Element Plus 表格拖拽排序
前端·vue.js·element
玉宇夕落43 分钟前
HTML5 音乐敲击乐静态界面
前端
海在掘金6112743 分钟前
告别"拼写错误":TS如何让你的代码"字字精准"
前端
用户479492835691544 分钟前
什么是XSS攻击,怎么预防,一篇文章带你搞清楚
前端·javascript·安全
摸着石头过河的石头1 小时前
深入理解JavaScript事件流:从DOM0到DOM3的演进之路
前端·javascript·性能优化