简单了解AJAX，AJAX封装与应用
1.什么是AJAX?
AJAX，是对Asynchronous JavaScript + XML的简写，AJAX可以向服务器请求额外的数据而无需卸载页面，从而带来更好的用户体验。
2.Ajax技术的核心是：XMLHttpRequest(简称XHR)
XHR为向服务器发送请求和解析服务器响应提供了流畅的接口，能够以异步的方式从服务器取得更多的信息，即可以不必刷新页面也能取得数据。
可以使用XHR对象取得新数据，然后通过DOM将新数据插入到页面中。
创建各浏览器兼容的XMLHttpRequest对象
function createXHR(){
if(typeof XMLHttpRequest != "undefined" ){
return new XMLHttpRequest();
}
else if(typeof ActiveXObject != "undefined"){
if (typeof arguments.callee.activeXString != "string"){
var versions =["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len;
for( i=0; i<versions.lenght; i++){
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString=versions[i];
break;
}catch(e){
//跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}
else{
throw new Error("No XHR object avablied！");
}
}3.了解XHR对象：readyState属性
含义：这个属性表示请求/响应过程的当前活动阶段。
可取值：
0 ，未初始化，没有调用open()方法。
1 ，启动，调用了open()方法，但还未调用send()方法。
2 ，发送，调用了send()方法,但未接受到响应。
3 ，接收，接收到部分响应数据。
4 ，完成，已经接收到全部的数据，而且已经可以在客户端使用了。
服务器接收响应之后，有关请求的数据属性：
responseText ，作为响应主题本返回的文本。
reponseXML ,如果响应的内容类型是“text/html”或“application/xml”，这个属性将保存包含着响应数据的XML DOM文档。
status ，响应的HTTP状态。
statusText ，HTTP状态的书名。
4.同步/异步事件的使用：
//使用异步事件
var xhr = createXHR(); //创建XHR对象
xhr.open("get","c.txt",false); //准备发送请求 Ps：将false改成true就是同步事件
xhr.send(null); //发送请求
alert(xhr.status); //结果：200
alert(xhr.statusText); //结果：OK
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText); //结果：hello,this is Cynthia (是文件c.txt里面的内容)
}
else{
alert("Request is failed : "+xhr.status);
}
xhr.abort(); //取消异步事件5.使用Ajax
ajax.js文件代码：
function ajax(url,fnSucc,fnFail){
//1.创建AJAX
if(window.XMLHttpRequest){
var oAjax=new XMLHttpRequest();
}else{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//2. 连接服务器
oAjax.open('GET',url,true);
//3.发送请求
oAjax.send();
//4.接受返回
oAjax.onreadystatechange=function(){
if(oAjax.readyState == 4){
if(oAjax.status == 200) {
fnSucc(oAjax.responseText);
}else{
if(fnFail){
fnFail(oAjax.status);
}
}
}
};
}（1）请求并显示静态.txt文件
a.txt文本文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax example</title>
<script type="text/javascript" src="./ajax.js"></script>
</head>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = function(){
ajax('a.txt?t='+new Date().getTime(),function(str){
alert(str);
},function(s){
alert("失败："+s);
});
};
};
</script>
<body>
<input id="btn1" type="button" value="读取">
</body>
</html>（2）请求JS或Json文件（动态数据）
b.txt文本文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>read user name</title>
<script type="text/javascript" src="./ajax.js"></script>
</head>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn2');
var oUl = document.getElementById('ul1');
oBtn.onclick = function(){
ajax('./b.txt?t='+new Date().getTime(),function(str){
var arr = eval(str);
for(var i=0; i<arr.length; i++){
var oLi = document.createElement('li');
oLi.innerHTML='user：'+arr[i].user+' password: '+arr[i].password;
oUl.appendChild(oLi);
}
},function(s){
alert(s+"失败！");
});
};
};
</script>
<body>
<input id="btn2" type="button" value="读取">
<ul id="ul1"></ul>
</body>
</html>6.操作HTTP头部信息
每个http请求和响应都有响应的头部信息。
（1）响应头信息：服务器返回的信息，客户端可以获取，但是不可以修改。
（2）请求头信息：客户端发送的信息，客户端可以设置，但是不可以修改。
例如执行异步事件时，控制台HTTP头部的信息如下：
默认情况下，在发送XHR请求时，头信息一般有：
Accept ，浏览器能够处理的内容类型。
Accept-Charset ，浏览器能够显示的字符集。
Accept-Encoding ，浏览器能够处理的压缩编码。
Accept-Language ，浏览器当前设置的语言。
Connection ，当前页面设置的任何Cookie。
Host ，发出请求的页面所在的域。
Referer ，发出请求的页面的url。
User-Agent ，浏览器的用户代理字符串。
获取/设置HTTP头部信息：
var xhr = createXHR();//创建XHR对象
xhr.onreadystatechange=function (){
if(xhr.readyState==4){
if(xhr.status==200){
alert(xhr.getResponseHeader('Content-Type')); //获取单个http头部信息,j结果：text/plain
alert(xhr.getAllResponseHeaders()); //获取http的全部头部信息 ,结果：下图
}
else{
alert("Sorry,获取信息失败，错误代码为： "+xhr.status+"， 错误信息： "+xhr.statusText);
}
}
};
xhr.open('get',"c.txt",false);
xhr.setRequestHeader('MyHeader','Cynthia'); //设置http头部信息
xhr.send(null);获取http的全部头部信息:
设置后的显示：
7.GET请求
最常用于向服务器查询某些信息，必要时。可以将查询字符串参数追加到URL的末尾，以便将信息发送给服务器。
注意的是，GET请求返回的数据格式是UTF-8的，要注意编码问题。
c.txt文本文件内容：
//GET请求
var xhr = createXHR();
var url = "c.txt?rand="+Math.random()+'&name=Cynthia&age=21';
url = addURLParam(url,"name","Cynthia");
url = addURLParam(url,"age",21);
xhr.onreadystatechange=function (){
if(xhr.readyState==4){
if(xhr.status==200){
alert(xhr.responseText);
}
else{
alert("Sorry,获取信息失败，错误代码为： "+xhr.status+"， 错误信息： "+xhr.statusText);
}
}
};
xhr.open('get',url,true);
xhr.send(null);
function addURLParam(url,name,value){ //解决编码问题
url += (url.indexOf("?") == -1 ? "?" : "&");
url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
return url;
}8.POST请求
通常用于向服务器发送应该被保存的数据。
//POST请求
var xhr = createXHR();
var url = "c.txt?rand="+Math.random();
xhr.onreadystatechange=function (){
if(xhr.readyState==4){
if(xhr.status==200){
alert(xhr.responseText);
}
else{
alert("Sorry,获取信息失败，错误代码为： "+xhr.status+"， 错误信息： "+xhr.statusText);
}
}
};
xhr.open('post',url,true);
xhr.setRequestHeader("Content-Type","application/x-wwww-form-urlencoded");
xhr.send('name=Cynthia&age=21');9.GET请求和POST请求的区别：
（1）在Web程序上，GET请求一般是URL提交请求，POST请求一般是Web表单提交。
（2）与GET相比，POST请求消耗的资源更多。
10.综合应用：封装并调用AJAX
//创建各浏览器兼容的XMLHttpRequest对象
function createXHR(){
if(typeof XMLHttpRequest != "undefined" ){
return new XMLHttpRequest();
}
else if(typeof ActiveXObject != "undefined"){
if (typeof arguments.callee.activeXString != "string"){
var versions = [
"MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp" ],len;
for( var i=0; versions.length; i++){
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString=versions[i];
break;
}catch(e){
//跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}
else{
throw new Error("No XHR object avablied！");
}
}
//解决乱码问题
function paramas(data){
var arr = [];
for(var i in arr){
arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
}
return arr.join('&');
}
//封装ajax
function ajax(obj){
var xhr = createXHR();
obj.url = obj.url + '?rand' + Math.random();
obj.data = paramas(obj.data);
if(obj.method === 'get'){
obj.url += obj.url.indexOf('?') == -1 ? '?' + obj.data : '&' + obj.data;
}
if(obj.async === true){
xhr.onreadystatechange = function(){
if (xhr.readyState == 4) {
callBack();
}
}
}
xhr.open(obj.method, obj.url,obj.async);
if (obj.method === 'post') {
xhr.setRequestHeader("Content-Type","application/x-wwww-form-urlencoded");
xhr.send(obj.data);
}else{
xhr.send(null);
}
if(obj.async === false){
callBack();
}
function callBack(){
if (xhr.status == 200) {
obj.success(xhr.responseText);
}else{
alert("Sorry,获取信息失败，错误代码为： "+xhr.status+"， 错误信息： "+xhr.statusText);
}
}
}
//调用ajax
ajax({
method:'get', //可任意更改为get或post
url:'c.txt',
data:{
'name':'Cynthia',
'age':21
},
success:function(text){
alert(text);
},
async:false //可任意更改为true（同步）或false（异步）
});备注：本文的所有代码都是在wamp本地服务程序上运行的。
wamp下载地址：链接：http://pan.baidu.com/s/1cIjmzW 密码：d44z
将wamp安装好之后，将本文的所有代码放在www这个文件夹下，在浏览器地址栏输入：localhost即可看见所有的文件。
本文所有用到的html文件及js文件，下载地址为：
https://github.com/Xganying/Ajax
参考：本文部分参考《JavaScript高级程序设计》第三版
283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
