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)