一、ajax定义
Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
Ajax 的核心是 js 对象：XMLHttpRequest。
二、同步和异步
同步和异步的概念(这跟字面意思完全相反)
-
同步：必须等待前面的任务完成，才能继续后面的任务（一个一个做，不能同时做多个）。
-
异步：不受当前任务的影响（同时做多个事情）。
拿排队举例：
-
同步：在银行排队时，只有等到你了，才能够去处理业务。
-
异步：在排队的时候，可以听听音乐，可以看看书。
异步更新网站
我们以前访问一个网站时，当浏览器加载完HTML、CSS、JS以后，网站的内容就固定了。如果想让网站内容发生更改，就必须刷新页面才能够看到更新的内容。
可如果用到异步更新，情况就大为改观了。比如，我们在访问新浪微博时，看到一大半了，点击底部的加载更多，会自动帮我们加载更多的微博，同时页面并没有刷新。
三、发送 Ajax 请求的五个步骤
（一）创建Ajax对象，也就是XMLHttpRequest对象；
（二）设置请求类型、请求地址和是否异步；
（三）发送请求和请求参数；
（四）监听请求状态变化，我们需要写一些逻辑来处理不同状态下要做的事情；
（五）接收返回的数据。
四、请求类型
- GET，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Ajax 发送 get 请求</h1>
<input type="button" value="发送get_ajax请求" id='btnAjax'>
<script type="text/javascript">
// 绑定点击事件
document.querySelector('#btnAjax').onclick = function () {
// 发送ajax 请求 需要 五步
// （1）创建异步对象
var ajaxObj = new XMLHttpRequest();
// （2）设置请求的参数。包括：请求的方法、请求的url。
ajaxObj.open('get', '02-ajax.php');
// （3）发送请求
ajaxObj.send();
//（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
//如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
ajaxObj.onreadystatechange = function () {
// 为了保证 数据 完整返回，我们一般会判断 两个值
if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
// 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
// 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
console.log('数据返回成功');
// 数据是保存在 异步对象的 属性中
console.log(ajaxObj.responseText);
// 修改页面的显示
document.querySelector('h1').innerHTML = ajaxObj.responseText;
}
}
}
</script>
</body>
</html>
02-ajax.php：echo 'smyhvae'; 效果如下：
- POST，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Ajax 发送 get 请求</h1>
<input type="button" value="发送put_ajax请求" id='btnAjax'>
<script type="text/javascript">
// 异步对象
var xhr = new XMLHttpRequest();
// 设置属性
xhr.open('post', '02.post.php');
// 如果想要使用post提交数据,必须添加此行
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 将数据通过send方法传递
xhr.send('name=fox&age=18');
// 发送并接受返回值
xhr.onreadystatechange = function () {
// 这步为判断服务器是否正确响应
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
</script>
</body>
</html>
五、Ajax对象的几个重要方法和属性：
（一）.open(method, url, async);
method:请求的类型，有GET和POST两种
url:文件在服务器上的位置
async:是否选择异步，true为异步，false为同步
（二）.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
当选择POST类型时需要使用此方法添加HTTP头，然后在send方法中添加想要发送的数据
（三）.send(string);
当选择POST类型时添加参数；
（四）readyState属性、status属性；
（五）onreadystatechange事件；
注册onreadystatechange事件以后，只要ajax对象的readyState属性发生改变，就会调用onreadystatechange对应的函数。
（六）.responseText和.responseXML分别为字符串形式的数据和XML形式的数据。
六、实例代码
（一）原生Javascript的ajax写法
1需要做一下兼容
1 <script> 2 //定义一个变量来存储ajax对象 3 var xhr=null; 4 if(window.XMLHttpRequest){ 5 xhr=new XMLHttpRequest; 6 } else{ 7 xhr=new ActiveXObject("Microsoft.XMLHTTP"); 8 } 9 xhr.open("GET", "url", true); 10 xhr.send();//括号内可以添加字符串，只是在POST请求时使用。 11 xhr.onreadystateChange=function(){ 12 if(xhr.readystate===4 && xhr.status===200){ 13 console.log(xhr.responseText); 14 } 15 } 16 </script>
七、jquery的几个ajax方法
（一）.load()方法：从服务器加载数据，并把返回的数据放入被选元素中。
语法：$(selector).load(URL,data,callback);
（二）.get()和.post()方法：通过 HTTP GET 或 POST 请求从服务器请求数据。
- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
语法：$.get('url',[data], callback);$.post('url',data, callback)
（三）.ajax()方法：
语法：$.ajax({
url:'url',
method:'GET/POST',
data:{},
success: function(res){
}
})
八、Ajax的典型应用场景
（一）、用户登录
（二）、搜索框提示
（三）、翻页
（四）、分类树或者树形结构
（五）、自动更新的页面