Java系列课程第三十九天 （jQueryHTML与插件）

Day39 AJax

1.Ajax介绍
(1)、老版的请求
代web程序最初的目的就是将信息（数据）放到公共服务器上，让所有的网络用户都可以通过浏览器访问。

我们一般都是通过以下方式让浏览器发送服务器请求，获得服务器数据
1、地址栏输入地址
2、特定元素的href 或者src属性
3、表单提交
弊端：这些方案我们很难通过代码的方式进行编程，而且每次请求都会刷新网页。
(2)什么是Ajax
1、AJAX( Asynchronous JavaScript and XML)异步的 JavaScript 和 XML。
2、AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
3、AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
4、AJAX 可以使网页实现异步更新
5、AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
(3)、ajax 同步和异步区别？
我们在使用 ajax 一般都会使用异步处理。
异步处理呢就是我们通过事件触发到 ajax，请求服务器，在这个期间无论服务器有没有响应，客户端的其他代码一样可以运行。
同步处理：我们通过实践触发 ajax，请求服务器，在这个期间等待服务器处理请求， 在这个期间客户端不能做任何处理。当 ajax 执行完毕才会继续执行其他代码。
同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕同步需要等待返回结果才能继续，异步不必等待，一般需要监听异步的结果
同步是在一条直线上的队列，异步不在一个队列上 各走各的
jquery 的 async:false,这个属性
默认是true：异步，false：同步。举例：
同步就是你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，直到我告诉你听到了，才一起去吃饭。
异步就是你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到忙完才去吃饭。
(4)、AJAX的原理

2.Ajax实例
为了帮助您理解 AJAX 的工作原理，我们创建了一个小型的 AJAX 应用程序:
var xmlhttp;
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}else{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState4 && xmlhttp.status200){
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,"/try/ajax/ajax_info.txt",true);
xmlhttp.send();
3.Ajax语法
(1)、XHR创建对象
1、XMLHttpRequest 是 AJAX 的基础。
2、所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
3、XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
(2)、向服务器发送请求
1、如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 sen