up:: 一个ajax比较拟真的范例
本篇博客，先讲述同步和异步的区别，然后分别演示了同步和异步的基本范例程序；在这个过程中可以体味同步和异步的区别，以便按需选用；；；具体同步和异步的深入理解，需要在实际应用中逐渐深化！
平常在浏览网页的时候，当打开一个新的网页时，经常遇到整个网页的基本架构（如页眉、页脚、网页顶部描述性文字、网页底部描述性文字等）已经加载出来了，但网页中间某些数据、图片等核心区块需要等一段时间后才会出来，这其中就大概率使用到了ajax异步处理的方式；（maybe）；
零：ajax同步和异步的简述
在ajax的第二步，发送ajax请求的时候，第三个参数，true：异步；false：同步；
// 2.发送Ajax请求
xmlhttp.open("GET","/ajax/news_list",true);
xmlhttp.send();什么是异步，什么是同步？
分析：xmlhttp.send();在发送请求的过程中是需要时间的，网络传输将请求发送到服务器，服务器处理再返回响应的过程肯定是需要一些时间的；
true异步：在上面发送的过程中，程序的其他部分继续向下执行；
false同步：在上面发送的过程中，程序的其他部分不继续向下执行，而是等到响应成功后再继续执行；
一：示例1：如果设置成false同步时：
在实际中，后台服务器响应需要一定的时间，为了使效果明显，方便肉眼观察，模拟后台实际消耗的时间，这儿休眠5秒钟：
效果：发现，等后台响应后，控制台输出了预设内容；但是，在浏览器界面没有显示出响应的结果，而是显示了一个白板；
so，一：为什么程序处于一直等待的状态；等待了差不多5秒后，才执行console.log(“请求发送完成”);？？？？？
二：为什么浏览器界面没有显示出响应的内容？
如果想在同步的情况下，继续在浏览器界面显示响应内容： 将xmlhttp.onreadystatechange = function(){}里面的内容复制带send()后面：即也就是说，同步的时候：xmlhttp.onreadystatechange = function(){}这个就会不起作用了；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="container"></div>
<script>
// 1.创建XmlHttpRequest对象
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.发送Ajax请求
xmlhttp.open("GET","/ajax/news_list",false);
xmlhttp.send();
console.log("请求发送完成");
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var t = xmlhttp.responseText; // 从后台拿过来的数据：这个JSON是个JSON字符串
var jsont = JSON.parse(t); // 需要将JSON字符串转成JSON对象；JavaScript可以认为内置了JSON对象
console.log(t);
console.log(jsont);
var html = "";
for(var i = 0;i< jsont.length;i++){
var news = jsont[i];
html = html+"<h1>"+news.title+"</h1>";
html = html + "<h2>"+news.date+" "+news.source+" "+news.content + "</h2>";
html = html + "<hr/>";
}
document.getElementById("container").innerHTML = html;
}
// 3.处理服务器响应
/*xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var t = xmlhttp.responseText; // 从后台拿过来的数据：这个JSON是个JSON字符串
var jsont = JSON.parse(t); // 需要将JSON字符串转成JSON对象；JavaScript可以认为内置了JSON对象
console.log(t);
console.log(jsont);
var html = "";
for(var i = 0;i< jsont.length;i++){
var news = jsont[i];
html = html+"<h1>"+news.title+"</h1>";
html = html + "<h2>"+news.date+" "+news.source+" "+news.content + "</h2>";
html = html + "<hr/>";
}
document.getElementById("container").innerHTML = html;
}
}*/
</script>
</body>
</html>效果：
二：示例2：设置成true异步时：（核心部分）
异步：在网络发送请求过程中控不进行代码阻塞，继续向下执行，异步采用onreadystatechange进行对响应状态的监控，程序的其他部分该执行还执行；
设置成异步的时候：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="container"></div>
<script>
// 1.创建XmlHttpRequest对象
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.发送Ajax请求
xmlhttp.open("GET","/ajax/news_list",true);
xmlhttp.send();
console.log("请求发送完成");
/*if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var t = xmlhttp.responseText; // 从后台拿过来的数据：这个JSON是个JSON字符串
var jsont = JSON.parse(t); // 需要将JSON字符串转成JSON对象；JavaScript可以认为内置了JSON对象
console.log(t);
console.log(jsont);
var html = "";
for(var i = 0;i< jsont.length;i++){
var news = jsont[i];
html = html+"<h1>"+news.title+"</h1>";
html = html + "<h2>"+news.date+" "+news.source+" "+news.content + "</h2>";
html = html + "<hr/>";
}
document.getElementById("container").innerHTML = html;
}*/
// 3.处理服务器响应
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var t = xmlhttp.responseText; // 从后台拿过来的数据：这个JSON是个JSON字符串
var jsont = JSON.parse(t); // 需要将JSON字符串转成JSON对象；JavaScript可以认为内置了JSON对象
console.log(t);
console.log(jsont);
var html = "";
for(var i = 0;i< jsont.length;i++){
var news = jsont[i];
html = html+"<h1>"+news.title+"</h1>";
html = html + "<h2>"+news.date+" "+news.source+" "+news.content + "</h2>";
html = html + "<hr/>";
}
document.getElementById("container").innerHTML = html;
}
}
</script>
</body>
</html>效果：可以看到，刷新界面后，控制台立即打印出了“请求发送成功”，然后等待后台响应；
临加一个小例子：
效果：“请求发送完成”和“哈哈哈”都立即显示； 说明：当设置成异步后，请求发送后、响应回来前，程序会继续执行，只是通过xmlhttp.onreadystatechange = function(){}来实时监控响应的状态，程序其他的部分该执行执；能懂这个过程？？？ok ，
注解：
（1）ajax绝大部分情况下使用异步方式处理； 但说不定某些场景适合使用同步的方式；
（2）同步是发送一个请求,需要等待返回,然后才能够发送下一个请求；异步是发送一个请求,不需要等待返回,随时可以再发送下一个请求；同步有个等待的过程；
（3）同步和异步的深入理解必须通过在实际应用中逐渐深化理解，到时再总结~~~
