1、ajax干嘛的，用在何处
我们所访问的页面都是从对应的服务器中获取来的，但是有的时候页面的内容很多，不可能每一次都将所有的内容都重新加载，这样效率就太低了！比如我们登录的网上的一个窗体的时候，改变的只是一个登录框，根据输入的内容，服务器给你相应的页面，而当前浏览器的页面没有任何的变化，只是当前页面中对应的部分 数据 进行了变化。这项技术就是ajax！它向服务器发送异步请求，从服务器获得数据！
如果听着上面的复述很抽象，那么就看下下面的两个图吧
传统方式浏览器与服务器交互，每次都是新的页面
ajax方式，可以不更新页面，直接返回数据
通过上边的距离，总结一句话：传统方式是服务器返回给浏览器一个新的界面，ajax方式返回的是数据
2、ajax原理
如果说其原理，有一个关键的因素就是XmlHttpRequest对象，ajax通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据。然后用js来操作dom来更新页面。接下来主要分析XmlhttpRequest对象！
（1）XmlhttpRequest属性
readyState:
HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。
| 状态 | 名称 |
|---|---|
| 0 | Uninitialized 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。 |
| 1 | Open open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。 |
| 2 | Sent Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。 |
| 3 | Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。 |
| 4 | Loaded HTTP 响应已经完全接收。 |
status
由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 “Not Found” 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常
responseText
请求体：如果 readyState 小于 3，这个属性就是一个空字符串。当 readyState 为 3，这个属性返回目前已经接收的响应部分。如果 readyState 为 4，这个属性保存了完整的响应体。
onreadyStateChange
onreadyStateChange事件是在readyState属性发生改变时触发的，类似于回调函数（在特定的事件或条件发生时由另外的一方调用）！
（2）XmlhttpRequest方法
open()
初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。
语法：open(method, url, async, username, password)（其中 username, password是可选的 async是布尔值，如果是false代表同步，如果是true那就是异步）
基本的属性和方法介绍完了，就不单独介绍方法了，直接上核心代码
//创建XMLHttpRequest对象的方法：
function createXhr() {
var xhr;
//判断浏览器是否支持xmlhttpRequest
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
function btn_click() {
//1、创建/获取xhr
var xhr = createXhr();
//2创建请求 ，
xhr.open("get", "http://127.0.0.1:8089/06-ajax-exercise.php", true);
//3、设置回调函数：onreadystatechange
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var resText = xhr.responseText; //这个就是php中具体的值
$("show").innerHTML = resText;
}
}
//发送请求
xhr.send(null);
}
接下来是服务器的php代码：
<?php
echo"欢迎光临";
?>
代码展示完了，我们现在要描述的具体的操作就是我们在我们的浏览器上点击按钮，然后从服务器上获取服务器的内容：
具体效果如下图：
一开始只有在浏览器上有一个按钮，然后当我点击的时候将服务器中的欢迎光临的内容获取下来！
后记：
由于上述代码需要配置服务器环境，所以如果想配置服务器环境请看本人的上篇博客！https://blog.csdn.net/jerry11112/article/details/86670297
如果本篇博客有任何问题，欢迎指正