第六章（jQuery 与 Ajax 的应用）（6.1~6.4）
6.1.1 Ajax 的优势
1 不需要插件支持（只需要用户允许 javascript 在浏览器上执行即可）
2 优秀的用户体验（不刷新整个页面前提下更新数据）
3 提高 WEB 程序的性能（只通过 XMLHttpRequest 对象向服务器提交希望提交的数据，即按需发送）
4 减轻服务器和带宽的负担（其工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化，在客户端创建 Ajax 引擎，把传统方式下的一些服务器担负的工作转移到客户端，便于客户端资源来处理，减轻服务器和带宽的负担）
6.1.2 Ajax 的不足
1 浏览器对 XMLHttpRequest 对象的支持度不足
2 破坏浏览器“前进”/“后退” 按钮的正常性能
3 对搜索引擎的支持不足
4 开发和调试工具的缺乏
6.2 Ajax 的 XMLHttpRequest 对象
6.3 安装WEB环境
1 下载安装 XAMMP （https://www.apachefriends.org/download.html）
2 在Dreamweaver 中配置 WEB 服务器用于本地测试
① 打开XAMMP程序
打开 Apache 服务，如果发现 80 端口被占用。点击 config 下的第一个目录文本 修改80 端口为 8080
② 利用 Dreamweaver 新建站点
配置服务器
服务器文件夹为本地站点文件夹
以上站点和服务器配置完毕。将文件放入 ajaxdemo 文件夹，打开 http://localhost:8080/ajaxdemo/ 即可看到文件夹中的文件详情。
6.4 编写第一个 Ajax 例子
通过传统的 JavaScript 实现的 Ajax 例子（单击按钮，从服务器端取回一个字符串，并显示在页面上）
在 配置好的 WEB 服务器文件夹中 放入示例html 和 php 文件。
PHP 文件内容：
<?php echo "Hello Ajax!"; ?>
HTML 为：
<body> <input type="button" value="提交" onclick="Ajax();" /> <div id="resText"></div> </body>
<button> 按钮用来触发 Ajax , id 为“resText” 的元素用来显示从服务器返回的 HTML 文本。
接下来完成 Ajax() 函数：
① 定义一个函数，通过该函数来异步获取信息
<script>
function Ajax(){
//.....
}
</script>
② 声明一个空对象用来装入 XMLHttpRequest 对象
var xmlHttpReq = null;
③ 给 XMLHttpRequest 对象赋值
if(window.ActiveXobject){ xmlHttpReq = new Active Xobject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ xmlHttpReq = new XMLHttpRequest(); } }
IE 5.6 是以 ActiveXObject 的方式引入 XMLHttpRequest 对象的，而其他浏览器的 XMLHttpRequest 对象是windowd的子集
④ 实例化成功后，使用 open() 方法初始化 XMLHttpRequest 对象，指定 HTTP 方法和要使用的服务器 URL
⑤ 因为要做异步调用，所以需要注册一个 XMLHttpRequest 对象将调用的回调事件处理器当它的 readyState值改变时调用，当readyState 值被改变时，会激发一个 readystatechange 事件，可以使用 onreadystatechange 属性来注册该回调事件处理器
⑥ 使用 send() 方法发送该请求，因为这个请求使用的是 HTTP 的 GET 方式，所以可以在不指定参数或使用 null 参数的情况下调用 send() 方法
if(xmlHttpReq != null){ //如果对象实例化成功 xmlHttpReq.open("GET","test.php",true); //调用open()方法并采用异步方式 xmlHttpReq.onreadystatechange=RequestCallBack; //设置回调函数 xmlHttpReq.send(null); //因为使用get方式提交，所以可以使用null参调用 }
⑦ 当请求状态改变时，XMLHttpRequest 对象调用 onreadystatechange 属性注册的事件处理器。因此，在处理该响应之前，事件处理器应该先检查 readyState 的值和 HTTP 状态，当请求完成加载（readyState 值为 4）并且响应已经成功（HTTP 状态值为 200）时，就可以调用一个 JS 函数来处理该响应内容
function RequestCallBack(){//一旦readyState值改变，将会调用这个函数 if(xmlHttpReq.readyState == 4){ if(xmlHttpReq.status == 200){ //将xmlHttpReq.responseText的值赋给ID为 resText 的元素 document.getElementById("resText").innerHTML = xmlHttpReq.responseText; } } }
完整代码
function Ajax(){ var xmlHttpReq = null; //声明一个空对象用来装入XMLHttpRequest if (window.ActiveXObject){//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的 xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest){//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象 xmlHttpReq = new XMLHttpRequest();//实例化一个XMLHttpRequest } if(xmlHttpReq != null){ //如果对象实例化成功 xmlHttpReq.open("GET","test.php",true); //调用open()方法并采用异步方式 xmlHttpReq.onreadystatechange=RequestCallBack; //设置回调函数 xmlHttpReq.send(null); //因为使用get方式提交，所以可以使用null参调用 } function RequestCallBack(){//一旦readyState值改变，将会调用这个函数 if(xmlHttpReq.readyState == 4){ if(xmlHttpReq.status == 200){ //将xmlHttpReq.responseText的值赋给ID为 resText 的元素 document.getElementById("resText").innerHTML = xmlHttpReq.responseText; } } } }
点击提交按钮会出现 test.php 中预设的字符串
♣ jQuery 提供了一些日常开发中需要的快捷操作，例如：load / ajax / get 和 post 等等....jQ 让开发 Ajax 变得极其简单，不需要理会那些繁琐的 XMLHttpRequest 对象。
