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

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

相关推荐
&白帝&1 小时前
Vue.js 过渡 & 动画
前端·javascript
总是学不会.1 小时前
SpringBoot项目:前后端打包与部署(使用 Maven)
java·服务器·前端·后端·maven
Fanfffff7202 小时前
深入探索Vue3组合式API
前端·javascript·vue.js
光影少年2 小时前
node配置swagger
前端·javascript·node.js·swagger
昱禹2 小时前
关于CSS Grid布局
前端·javascript·css
啊QQQQQ2 小时前
HTML:相关概念以及标签
前端·html
就叫飞六吧3 小时前
vue2和vue3全面对比
前端·javascript·vue.js
Justinc.3 小时前
CSS基础-盒子模型(三)
前端·css
qq_2518364574 小时前
基于ssm vue uniapp实现的爱心小屋公益机构智慧管理系统
前端·vue.js·uni-app
._Ha!n.4 小时前
Vue基础(二)
前端·javascript·vue.js