AJAX有什么用？

我们先来说一下前端开发的演变：
1.静态网页阶段
这个阶段的网页没有数据交互，所有的前端数据都由后端生成与维护，前端只负责纯粹的展示功能。
如果需要更新页面，则需要重新加载整个网页。
2.AJAX阶段
为了解决上述问题，在2004年诞生了ajax技术，让页面的局部刷新成为了可能从而改变了前端开发，使得前端不仅可以展示华丽的页面，还可以管理数据并与用户交互。

AJAX技术指的是脚本独立向服务器请求数据，拿到数据以后，进行处理并更新网页。
在这个过程中，后端只是负责提供数据，其他事务都由前端处理，实现了“获取，处理，展示数据”的三步完整业务逻辑。

AJAX的全称是Asynchronous Javascript and XML(异步的JavaScript和XML)，是一种用于创建动态网页的技术。
ajax是一种使用现有标准的新方法，通过与服务器进行少量的数据交换，ajax可以可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

AJAX可以提高系统性能，优化 用户界面。
很多框架以及代码库已将AJAX作为其必不可少的一个重要模块。

AJAX的工作原路：
在浏览器和服务器之间加了一个中间层：ajax引擎。
由Ajax引擎独立向服务器请求数据，前端获取到Ajax返回的数据后，可以使用新数据来更新页面，或进行其他操作，使用用户请求和服务器响应异步化，从而保证了在不刷新整个页面的情况下，更新局部页面的内容。

如上图所示，用户界面向ajax引擎发送JavaScript脚本代码，ajax向用户界面放回DOM+CSS，整个浏览器向服务器发送HTTP请求，服务器处理请求，并向ajax引擎返回XML/JSON/HTML数据。
实现获取，处理，展示数据的三个业务逻辑。

合理的利用ajax技术，可以创建出交互丰富的动态式页面。
较为典型的应用有：
1.按需求获取数据，最大限度地减少冗余请求以及响应对服务器造成的负担。
2.实时验证表单的某条数据，无需等到提交整个表单时在验证。
3.页面无刷新更新，更好的响应用户。

实例代码如下：

点击下面的按钮，将 Ajax 请求回来的数据更新在该文本内

发起 Ajax 请求

<script>
    document.getElementById("btn").onclick = ajaxRequest;

    function ajaxRequest () {
        var xhr = new XMLHttpRequest();

        xhr.open("GET", "https://www.w3cschool.cn/statics/demosource/ajax_info.txt", true);
        xhr.send();

        xhr.onreadystatechange = function(){
            if (xhr.readyState === 4 && xhr.status === 200) {
                document.getElementById("view").innerHTML = xhr.responseText;
            }                
        }
    }
</script>

当点击了button（发起ajax请求）时，出现第一段文字。

AJAX的优点：
1.最大的优点是页面无刷新更新，用户的体验非常好。
2.使用异步方式与服务器通信，具有更迅速的响应能力。
3.可以将一些服务器工作转移到客户端，利用客户端资源来处理，减轻服务器和带宽的压力，节约空间何为带宽。
4.技术标准化，并被浏览器广泛支持，不需要下载插件或小程序。
5.ajax可使因特网应用程序更小，更快，更友好。

ajax的缺点：
1.ajax不支持浏览器back返回按钮。
2.有安全问题，ajax暴露了与服务器交互的细节。
3.对搜索引擎不友好。
4.破坏了程序的异常机制。

协议，域名，端口指的是一个URL地址中的不同部分。
一个URL地址可以有以下几个主城 部分：
scheme://host:post/path?query#fragment
1.scheme:通信协议，一般为http，https。
2.host：域名。
3.post:端口号，此项为可选项，http协议默认的端口号为80，https协议默认的端口号为443；
path：路径，由“/”隔开的字符串。
query：查询参数，此项为可选项。
fragment：信息片段，用于指定网络资源中的某片断，此项为可选项。

假如有一个网址是https://www.w3cschool.cn:8080/search?w=ajax，那么

https是协议；
www.w3cschool.cn是域名；
8080是端口号；
/search是路径；
?w=ajax是 URL 地址带的参数；
缺少 fragment 信息片段；

什么是同源策略？
同源是一种安全协议，是客户端脚本（尤其是JavaScript）中装逼虹妖的安全度量标准，指一段脚本只能读取同一来源的窗口和文档的属性。
那么何为同源？
同源指的是URL地址中的协议（http，https），域名（host），端口（post）三者都相同。
例1：路径不同，同源

https://www.w3cschool.cn
https://www.w3cschool.cn/tutorial
https://www.w3cschool.cn/minicourse/play/ajaxcourse.html

例2：协议不同，不同源

http://www.w3cschool.cn
https://www.w3cschool.cn

例3：域名不同，不同源
https://pm.w3cschool.cn
https://www.w3cschool.cn

例4：端口不同，不同源
https://www.pm.w3cschool.cn
https://www.pm.w3cschool.cn:445

为什么要有同源策略？
我们在使用 Ajax 请求后端数据时，只能跟同源的后端接口进行数据交互，即：后端接口的 URL 与发起 Ajax 请求的页面 URL 之间，需要满足同源策略。
那么，浏览器为什么需要有“同源策略”？
为了数据的安全性，若没有同源策略的限制，那么黑客就可以在他的页面上任意请求你的后端数据，这将造成数据内容的盗取，泄露。

扩展知识：
实现跨域请求的方式：
虽然ajax请求需要满足同源策略。然而在一些场景中，你真的需要 Ajax 访问其它 “源” 的数据（称为跨域访问），这时需要后端服务器进行相应的设置。

如果服务器端支持 CORS，可以通过设置Access-Control-Allow-Origin来实现跨域。如果浏览器检测到相应的设置，就会允许 Ajax 进行跨域访问。

扩展：解决跨域问题的其它方式

JSONP 技术；
在服务端设置代理模块；
通过修改 window.name 实现跨域；
使用 HTML5 中新引进的 window.postMessage 方法来跨域传送数据；