AJAX概述
Asynchronous Javascript And XML：异步的JS和XML；
异步同步：
Google在2001年，首次提出了AJAX的概念，用于“GoogleSuggest”效果中，实现无刷新无提交的页面内容局部更新。包含HTML、CSS、JS、DOM、HTTP、XML等技术——纯客户端技术。实现目标：
(1)无刷新的页面局部更新
(2)动态网页静态化，彻底剥离前端和后台技术
浏览器可以发起的请求类型：
（1）同步请求：地址栏输入URL、超链接、JS跳转、表单提交…
（2）异步请求：使用XMLHttpRequest对象发起的请求
请求与响应：
AJAX应用
AJAX应用的核心对象：XMLHttpRequest
支持：Ch//FF//Sa//IE9+
不支持：IE8-：ActiveXObject(‘Microsoft.XMLHTTP’);
作用：用于向服务器发起HTTP请求消息，并接收服务器返回的HTTP响应消息，解析响应消息内容，呈现在HTMLDOM树上。
构建对象(支持可以直接new)
var http=null;
if(window.XMLHttpRequest){//Ch FF Sa IE9+
http=new XMLHttpRequest();
}else{//IE8-
http=new ActiveXObject(‘Microsoft.XMLHTTP’);
}使用AJAX的步骤
(1)创建XHR对象
var xhr = new XMLHttpRequest();
(2)监听XHR状态改变事件
xhr.onreadystatechange = function(){}
(3)使用XHR连接到Web服务器
xhr.open(method, uri, isAysn);
(4)使用XHR对象发起异步的HTTP请求消息
xhr.send(null/data);
XHR对象的常用属性和方法
提示：XHR对象的作用：发起异步HTTP请求，并接收响应消息——整个过程程序员是不可见的，调试错误只能靠监视请求和响应消息。
XHR对象的成员属性：
readyState: 表示XHR的当前状态，即请求-响应过程进行到哪一步，可取值有5个，只能依次递增不能回退，自动改变不能手工赋值：
0 - UNSENT 请求消息尚未发送
1 - OPENED 已打开到服务器的连接
2 - HEADERS_RECEIVED XHR已接收到响应消息起始行和头部
3 - LOADING XHR正在响应消息的主体
4 - DONE XHR已经接收完成响应消息
status: 响应消息状态码，只有xhr.readyState变为2后才有值
statusText: 响应消息中原因短句，只有xhr.readyState变为2后才有值
responseText: 响应消息的主体内容，当xhr.readyState变为3开始有值，变为4值稳定下来
XHR对象的成员事件：
onreadystatechange：xhr.readyState属性值的每次改变都会触发该事件
XHR对象的成员方法：
open(method, uri, isAsyn): 打开到服务器的连接
send( body/null ): 发送请求消息
setRequestHeader(name, value): 设置请求消息头部
getResponseHeader(name): 获取响应消息头部
getAllResponseHeaders(): 获取响应消息中的所有头部
AJAX请求
1.使用XHR对象发起GET请求
//1 创建一个XHR对象 new...
var xhr = new XMLHttpRequest();
//2 监听XHR的状态改变 on...
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status===200){
console.log('响应完成且成功');
}else{
console.log('响应完成但存在问题');
}
}
}
//3 打开到Web服务器的连接 open...
xhr.open('GET','1_check_uname.php?uname='+n, true);
//4 发送请求消息
xhr.send(null);
2.使用XHR对象发起POST请求
//1 创建一个XHR对象 new...
var xhr = new XMLHttpRequest();
//2 监听XHR的状态改变 on...
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status===200){
console.log('响应完成且成功');
}else{
console.log('响应完成但存在问题');
}
}
}
//3 打开到Web服务器的连接 open...
xhr.open('POST','1_check_uname.php', true);
//3.5 修改请求头部
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//4 发送请求消息 send...
xhr.send('k1=v1&k2=v2&...');
Content-Type，内容类型，一般是指网页中存在的Content-Type，用于定义网络文件的类型和网页的编码，决定文件接收方将以什么形式、什么编码读取这个文件，这就是经常看到一些Asp网页点击的结果却是下载到的一个文件或一张图片的原因。
HTTP协议规定请求消息的Content-Type可能取值为：
(1)text/plain —— PHP服务器拒绝接收
(2)application/x-www-form-urlencoded —— 请求数据编码后
(3)multiplart/form-data —— 文件上传
HTTP协议规定响应消息的Content-Type可以取值为任意合法的MIME类型。但AJAX应用中，响应内容类型一般为：
(1)text/plain
(2)text/html —— HTML片段
(3)application/javascript —— JS片段
(4)application/xml —— XML片段
(5)application/json —— JSON片段
3.使用XHR接收响应消息——text/plain
服务器端发送响应消息：以PHP为例
header('Content-Type: text/plain');
echo '一段文本';
客户端接收响应消息：
xhr.responseText; //响应主体：一段文本
4.使用XHR接收响应消息——text/html
服务器端发送响应消息：以PHP为例
header('Content-Type: text/html');
echo '<li>丁丁</li><li>当当</li>';
客户端接收响应消息：
parent.innerHTML = xhr.responseText; //响应主体：一段HTML片段
5.使用XHR接收响应消息——application/javascript
服务器端发送响应消息：以PHP为例
header('Content-Type: application/javascript');
echo 'var span=document.createElement("span");
span.innerHTML="ABC";
document.body.appendChild(span);';
客户端接收响应消息：
eval( xhr.responseText ); //响应主体：一段JS片段
客户端XHR对象接收到字符串型响应消息，必须调用eval()加以执行。
6.使用XHR接收响应消息——application/xml
行业标准的字符串数据格式
服务器端发送响应消息：以PHP为例
header('Content-Type: application/xml');
echo '<?xml ?><prodcutList>....</productList>';
客户端接收响应消息：
xhr.responseXML; //响应主体：字符串，会被浏览器解析为一棵XML DOM树。
XML： eXtensible Markup Language，可扩展的标记语言。对于前端来讲，XML就是一种特殊的字符串格式，用于描述批量的复合型数据。
XML语法要求：
(1)标签名、属性、子标签都可以任意指定。
(2)整个XML字符串有且只有一个根标签。
(3)标签名有开始必需有结束；区分大小写。
(4)标签可以有属性，值必需用单引号或双引号括起来。
(5)标签可以嵌套，不能交叉
HTML、XML的关系—— 没有任何关系~！
HTML和XML的区别:
(1)HTML的标签都已经预定义好；XML的标签都是任意指定的；
(2)HTML专用于描述网页的内容；XML专用于描述数据；
(3)HTML语法不严格；XML语言严格！
7.使用XHR接收响应消息——application/json
行业标准的字符串数据格式，最常用最重要的请求方式！！
服务器端发送响应消息：以PHP为例
header('Content-Type: application/xml');
$list=[{...},{...},{...}];
echo json_encode($list);
客户端接收响应消息：
var obj = JSON.parse(xhr.responseText)//响应主体：JSON字符串
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，用于描述批量的复合数据。 易于人阅读和编写。同时也易于机器解析和生成。 在Web项目中的应用：在Web服务器和浏览器之间传递数据
JSON字符串的语法：http://json.org/json-zh.html
JSON字符串示例：
JSON字符串1： '[10, 30, 50]'
JSON字符串2： '[101, "西游记", 15.5, "2015-5-5"]'
JSON字符串3： '{"bid":101, "name":"西游记","price":15.5}'
JSON字符串4： '[{},{},{}]'
JSON格式和XML格式的区别：JSON更加的简单，处理速度更快，更适合于WEB应用！
PHP语言把数组转换为JSON字符串： $str = json_encode($arr)
PHP语言把JSON字符串转换为数组： $arr = json_decode($str)
JS语言把对象转换为JSON字符串： var str = JSON.stringify(obj)
JS语言把JSON字符串转换为对象： var obj = JSON.parse(str)