初识Ajax
什么是AJAX，为什么要使用Ajax?
AJAX是异步的JavaScript和XML，是一种用于创建快速动态网页的技术，使用AJAX可以更新部分网页内容，是非常方便使用的在 Ajax应用中信息是通过XML数据或者字符串在浏览器和服务器之间传递的（json字符串居多）在浏览器端通过XMLHttpRequest对象的responseXMl属性，得到服务器端响应的XML数据。
- AJAX优点：
- 最大的一点是页面无刷新，用户的体验非常好。
- 使用异步方式与服务器通信，具有更加迅速的响应能力。
- 可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
- 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
- AJAX缺点：
- ajax不支持浏览器back按钮。
- 安全问题 AJAX暴露了与服务器交互的细节。
- 对搜索引擎的支持比较弱。
- 破坏了程序的异常机制。
- 不容易调试。
AJAX应用和传统Web应用有什么不同？
传统的web前端与后端的交互中，浏览器直接访问Tomcat的Servlet来获取数据。Servlet通过转发把数据发送给浏览器。
当我们使用AJAX之后，浏览器是先把请求发送到XMLHttpRequest异步对象之中，异步对象对请求进行封装，然后再与发送给服务器。服务器并不是以转发的方式响应，而是以流的方式把数据返回给浏览器
XMLHttpRequest异步对象会不停监听服务器状态的变化，得到服务器返回的数据，就写到浏览器上【因为不是转发的方式，所以是无刷新就能够获取服务器端的数据】
ajax 的执行过程
创建XMLHttpRequest对象,也就是创建一个异步调用对象
创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
设置响应HTTP请求状态变化的函数
发送HTTP请求
获取异步调用返回的数据
使用JavaScript和DOM实现局部刷新
// 1.创建 ajax请求 依赖一个对象xhr对象
var xhr;
if (window.XMLHttpRequest){// IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
}
else{// IE6, IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//服务器响应：如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
console.log(xhr)
console.log("状态码:" + xhr.readyState) //0 1 2 3 4
console.log("响应码:" + xhr.status)
console.log("响应的内容:" + xhr.responseText) //响应的文本
// 2.监听 监听xhr对象的状态变化 onreadystatechange
//onreadystatechange 事件：当请求被发送到服务器时，我们需要执行一些基于响应的任务。 每当 readyState 改变时，就会触发 onreadystatechange 事件。
xhr.onreadystatechange = function(){
// console.log("状态码:" + xhr.readyState)
// // 4 表示完成
// console.log("响应码:" + xhr.status)
// console.log("响应的内容:" + xhr.responseText)
if(xhr.readyState == 4){ //表示ajax的请求已经发送完成，但是不知道成功还是失败
if(xhr.status == 200){ //前提条件是完成，此时是成功的状态
console.log(xhr.responseText)
}
}
}
// 3.创建请求消息 建立连接
//xhr.open(method,url,async):规定请求的类型、URL 以及是否异步处理请求。
//method：请求的类型；GET 或 POST
//url：文件在服务器上的位置
//sync：true（异步）或 false（同步）
//同步和异步的区别
//同步：提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事
//当前只能做一件事，其他事情必须等当前的事情完成，才能继续后面的事情。
//异步:请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕
//同时可以做多件事情
xhr.open("GET","02.php",true)
// 状态有 0 -> 1
// 4.发送请求消息要发送特定的请求，需要调用send()方法。
//它接受一个参数:请求主体发送的数据。
//如果不需要通过请求主体发送数据，则必须传入null，不能留空。
//请求主体：HTTP上行请求，有头部、主体。
//一般来说，GET请求是只有头部，没有主体
//而ＰＯＳＴ请求有请求主体。
//一但调用send()方法，HTTP上行请求就将发出。
xhr.send( null )