一、什么是Ajax
Ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验，通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
比如以下新闻网站：
当我鼠标滑到页面最下放时，会有一个显示"加载中"的按钮，当我点击这个按钮时，页面下方会显示出新的内容，而并没有刷新页面，这里并不是用display：none将内容隐藏起来了，而是Ajax技术的运用，Ajax就是可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
二、Ajax的功能使用场景
除了以上例子外，还有很多使用了Ajax技术的地方
例如：
1.网站的登录注册提示
2.分页功能
这些功能都是在更新页面内容的同时不需要页面重新加载
三、Ajax的工作原理
认识XMLHttpRequest对象
XMLHttpRequest是与浏览器本身内置的request相互独立的与服务器交互的请求对象。要使用ajax, XML HttpRequest对象就是基础，没有它，就没有异步传输的可能。这是一种异步请求的技术, 简单滴说就是JavaScript通过XML
HttpRequest对象向服务器请求数据和处理响应，达到用户看到的页面无刷新效果。
客户端通过XMLHttpRequest对象向服务器发起异步请求，从服务器获取数据，然后通过JavaScript操作DOM节点来更新页面数据。
四、Ajax的优缺点
优点：
1.减轻服务器的负担，Ajax一般只从服务器获取只需要的数据。
2.无刷新页面更新，减少用户等待时间。
3.更好的客户体验，可以将一些服务器的工作转移到客户端完成，节约网络资源，提高用户体验
4.基于标准化的并被广泛支持的技术，不需要下载插件或者小程序
缺点
1.页面中存在大量js，给搜索引擎带来困难
2.破坏浏览器的后退与加入收藏书签功能
3.破坏了程序的异常机制。
五、创建Ajax
1.初始化XMLHttpRequest对象
// new ActiveXObject('Microsoft.XMLHTT')ie7以下使用
let ajax_ = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTT')
- 1
- 2
2.声明Ajax 请求地址以及请求方式
// 2建立链接 请求方式 get请求 请求地址 异步 ajax_.open('get', './content.json', true)
- 1
- 2
3.发送请求
ajax_.send();
- 1
4.onreadystatechange接收返回值
ajax_.onreadystatechange = function() { // 请求状态码 if (ajax_.readyState == 4) { // 响应的状态 if (ajax_.status == 200) { console.log(ajax_.responseText); } else { console.log('获取连接失败'); } } } }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
总结
本人也是小白一枚，正在学js阶段，讲到了Ajax，对Ajax并没有什么深层的理解，只能将Ajax最基础的整理一下
文章来源: blog.csdn.net，作者：阎涛涛，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/m0_54572778/article/details/115030850