一，传统的网络应用
采用的(请求对应页面的模式)同步响应模式 -----即：一次HTTP请求对应一个新的页面，每次请求都会丢弃当前页面来重新加载新页面！
案例1：仔细观察一个form表单的提交，你就会发现，一旦用户点击“submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了，如果不幸由于网络太慢或者其他原因，就会得到一个404页面。
弊端(特点)：由于每次请求都需要等待服务器响应，然后才能重新加载新页面。不管客户端是post还是get的提交方式，每次请求都会丢弃当前页面，等待服务器生成新的页面。在等待期间，旧的页面已经丢弃，而新的页面尚未完全加载，整个浏览器处于一种空白的状态，用户什么也做不了，只能等待，换句话说这是一种不连续的体验，用户体验不好！
特点：频繁的页面刷新让客户处于一种不连续的状态，也使服务器的负担加重(响应大量的数据---某些内容不需要重新加载)
解决办法：让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。
案例2：实时的股票行情显示系统，每隔一段时间需要实时刷新当前的股票行情！
要求：页面当前的大部分内容如图片，动画等无须改变，需要改变的仅仅的英文当前股票的价格！
二，引出Ajax
（1）简单概述
全名异步JavaScript和XML，即异步 JavaScript和XML，Ajax 不是 JavaScript的规范（不是一种新的技术），它是现有的JS，CSS，DOM等技术的组合。
Ajax的核心：异步请求，浏览器无须频繁的重新加载新（整个）页面，服务器的响应不再的英文整个页面的内容，而只的英文必须更新的部分数据。
异步请求模式：浏览器通过JS代码（客户端脚本）服务器向发送请求，然后JS代码负责解析服务器的响应数据，根据需要把样式加到数据中，在然后现有的 |网页中显示出来！
异步的理解：用户发送请求后，无须等待后台的响应，请求在后台发送，不会阻塞当前用户的活动，即用户无需等待第一次请求获得完全响应，即可发送第二次请求(可以多次以异步方式向服务器发送请求！)，由于Ajax的请求是异步执行的，也就是说通过回调函数获得响应。
请求在后台发送的理解：在浏览器和服务器之间添加了Ajax中间层，允许浏览器异步发送请求(允许通过客户端脚本来发送HTTP请求)，允许动态的加载服务器响应。此时用户的请求不是直接向服务器提交，而是利用了XMLHttpRequest异步的向服务器发送，从而避免了丢弃当前的页面！
优点：无须频繁的重新加载整个页面，减轻了服务器和带宽的负担！
带宽：累计的网络流量！
（2）Ajax的本质
理念：按需取数据！
异步发送请求+JavaScript+动态装载服务器的数据到浏览器中！
各部分的任务：使用JavaScript对象XMLHttpRequest向服务器发送请求(GET、POST)；使用JavaScript函数监听服务器的响应，再使用XMLHttpRequest对象解析服务器响应的数据；服务器响完成之后，JavaScript通过DOM动态的更新HTML(JSP)页面。
（3）Ajax的核心技术：XMLHttpRequest
说明：异步发送请求的对象，允许Web页面的内部使用XMLHttpRequest发送请求，无须通过当前Web页面发送请求，允许直接传输数据给服务器，并允许直接从服务器读取数据。
补充：以前是XML作为通信双方的数据交换载体，现在是JSON！
简单理解：所谓的异步就是不通过页面的url发送请求(而是内部的异步请求)地址栏的内容不变，就不会重新加载新的页面！
用户体验：自始至终，用户的动作无须中断(等待)，所感受的是一种连续的体验！
（4）Ajax的编程脚本：JavaScript
JavaScript完成的任务：
1、创建XMLHttpRequest对象
2、通过XMLHttprequest向服务器发送请求
3、创建回调函数，监视服务器的响应状态，即：在服务器响应完成之后，回调函数启动！
4、页面的更新---回调函数通过DOM动态的更新HTML(JSP)页面。
三、简单的应用
（1）级联菜单的应用场景
1、传统的方式(Ajax出现之前)
级联菜单特点：级联菜单右边菜单的菜单项会随着左边菜单的改变而改变
客户端只能通过提交表单或者采用在地址栏输入URL的方式发送HTTP请求，必然伴随着页面被重新加载。这种条件下，当用户选择一个第一个下拉列表框的某个选项时，程序无法及时向服务器发送请求，导致页面被重新加载。
做法：页面一开始就加载第二个列表框中所有可能出现的选项，通常的做法就是一次性的将第二个下拉列表框中所有的数据全部读取出来并写入数组，然后根据用户操作，通过JS的事件编程控制显示对应的列表项。
实质：将数据存储在JS的数组中！
代码---详见
思考：如果一个列表框包含200个国家，而每个国家又包含100个城市，那么就需要加载20200个选项值，但是浏览者本身属于中国，不会选择其它国家的城市，那么该页面加载的199个国家的城市就白白浪费了！如果是多级菜单，每一级又有上百个子菜单，资源的浪费会以几何级数的增长！
弊端：第一次加载的时候将读取大量的冗余数据，增加服务器的负载，也浪费网络带宽(传输大量的数据)，以及客户机的内存(浏览器的JS中定义大数组保存数据)
2、Ajax方案
说明：页面无须一次加载所有的子菜单，可以在加载的时候只显示最左边的菜单，当用户点击左边选择国家的下拉菜单后，异步的服务器发送请求，从服务器获取该菜单的子菜单，当用户点击第二级菜单的时候，再次异步向服务器发送请求，获取该菜单的子菜单，以此类推。
特点：通过这种方式，可避免一次加载全部菜单项，从而提供更好的性能
---------------------------------------------------------
四、整个流程的初涉
//(1)创建一个XMLHttpRequest对象
var AjaxHttpRequest;//异步请求对象
function createXMLHttpRequest{
//说明：不同的浏览器创建此对象的方式不一样，要兼容
if(window.XMLHttpRequest){
//DOM2规范遵循的浏览器---IE7+, Firefox, Chrome, Opera, Safari
AjaxHttpRequest=new XMLHttpRequest();
}else{
//IE6、IE5(基本不用！)
AjaxHttpRequest= new ActiveXObject("Microsoft.XMLHTTP");
}
}
//(2)使用XMLHttpRequest对象发送请求
//说明：发送请求之前，先与服务器(后台)的url建立连接，通过open方法打开与请求URL的连接！
function sendXMLHttpRequest(url,paramater){
//(1)完成对象的初始化
createXMLHttpRequest();
//(2)发送请求前。必须与服务器建立连接
//open三个参数说明：
//1--提交请求的方式(字符串)
//2--发送请求的目标url(处理请求的后台)
//3--是否异步请求---true表示是异步请求,默认值
var url="#";//可以携带参数
AjaxHttpRequest.open("POST",url,true);
//请求头的设置：https://blog.csdn.net/qlcql/article/details/51206972
//采用合适的格式转发请求参数(这里是表单数据的发送)，也可以不指定字符编码(异步默认是utf-8)
AjaxHttpRequest.setRequestHeader(xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");
//(3)指定AjaxHttpRequest状态改变时的事件处理函数(设置处理响应的回调函数)
AjaxHttpRequest.onreadystatechange=processResponse;//时时刻刻在监听服务器的响应
//(4)发送请求--键值对的形式,也可以不发送任何数据
AjaxHttpRequest.send(null)
}
//(3)处理返回信息的函数
function processResponse(){
//思考：何时返回呢？
//说明：HttpRequest对象读取服务器的状态----readyState
//(0--请求对象未初始化、1--开始发送不请求、2--请求发送完成、3--读取服务器的响应、4--读取服务器响应结束)
//说明：即使服务器响应已经完成(readyState=4),但服务器是否响应正确(状态码表示),如果响应不正确如何处理、
if(XMLHttpRequest.readyState==4){
//表明：读取服务器响应完成
if(XMLHttpRequest.status==200){
//即使服务器响应完成,响应信息也可能是错的,判断服务器是否响应正确,做下一步的逻辑处理(更新数据)
//获取服务器的响应：显示服务器的响应文本！
document.getElementById("").value=AjaxHttpRequest.responseText;//或responseXML
}else{
//服务器响应不正确,进行处理--弹框错误提示(用户体验)
alert("您请求的页面有异常")
}
}
}