初识Ajax

---

一、什么是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')

2.声明Ajax 请求地址以及请求方式

    // 2建立链接   请求方式 get请求   请求地址  异步
       ajax_.open('get', './content.json', true)

3.发送请求

      ajax_.send();

4.onreadystatechange接收返回值

 ajax_.onreadystatechange = function() {
                    //  请求状态码
                    if (ajax_.readyState == 4) {
                        // 响应的状态
                        if (ajax_.status == 200) {
                            console.log(ajax_.responseText);
                        } else {
                            console.log('获取连接失败');
                        }
                    }
                }
            }

---

总结

本人也是小白一枚，正在学js阶段，讲到了Ajax，对Ajax并没有什么深层的理解，只能将Ajax最基础的整理一下