《AJax - Async Javascript and xml - 异步的JavaScript和XML》
一、基础认识
AJax技术的目的：实现页面无刷新数据动态更改
优点:
+ 不需要插件支持
+ 提供WEB程序的功能
+ 优秀的用户体验
+ 减轻服务器带宽的负担
缺点：
+ 破坏浏览器的前进与后退
+ 搜索引擎SEO的支持性不好
二、代码示例
学习后编写的一个很基础的Ajax函数，帮助自己更好的掌握Ajax
/** method => Ajax请求所采用的方法，GET或POST * URL => 所要请求页面的URL* paras=> 发送时附加的参数* callback => 完成请求或页面数据准备完毕时执行的方法
*/function Ajax(method,url,paras,callback){function getXMLHttpReq(){var XMLHttpReq = null;if(window.XMLHttpRequest){ XMLHttpReq = new XMLHttpRequest();}else if(window.ActiveXObject){XMLHttpReq = new ActiveXObject('Microsoft.XMLHTTP');}return XMLHttpReq;}xhr = getXMLHttpReq();if(method ==='POST'){xhr.open('POST',url,true); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');if(paras!=''){xhr.send(paras);}else{xhr.send(null);}}else{if(paras!=''){url = encodeURI(url+'?'+paras); }xhr.open('GET',url,true);xhr.send(null);}xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){callback();}}
}//调用方法function Ajax1(){Ajax('GET','test.php','',function(){document.getElementById('responseText').innerHTML = xhr.responseText;}) }
· 代码说明：
ActiveXObject // 利用ActiveX插件可以与微软的其它组件进行交换，包括这里我需要的微软自带的HTTP请求方法。new ActiveXObjcet('Microsoft.XMLHTTP') // IE5/6支持的HTTP请求方法 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//如果Ajax请求是通过POST方式，那么为了方便后台通过键值对的形式获取数据，可以指定数据的发送以表单的形式。 open('GET','index.php?a=1&b=2',true) //GET方式，通过在URL附加参数进行数据的传输。
XMLHttpReq.send(pars) //POST方式的数据发送 url = encodeURI(url+'?'+pars);
//为了解决IE6/7在GET方式下传输中文参数出现乱码的情况，会在参数传输之前利用JS进行URL编码。
echo urldecode($_GET['a'])
// 客户端进行编码，服务端进行解码
· 重点讲解：
1. readyState && status
readyState表示HTTP请求的运行状态，不论请求的数据是否找到，都会经历以下的过程：
0 ---- 请求未初始化
1 ---- 与服务器建立连接
2 ---- 请求已经接收
3 ---- 请求正在处理
status 则表示了HTTP所请求数据的状态[常见的反馈码]：
200 ---- 数据请求完成，已经可以使用。
404 ---- 页面未找到。
2. open()
功能：初始化请求的参数。
格式：open('请求数据的方式','所要请求的页面URL','是否异步');
格式说明：
· 请求数据的方式：GET | POST
· 是否异步:true(异步) | false(同步)
* 如果存在setRequestHeader()方法，一定要把open()方法放在它之前的一行。
3. send()
功能：发送请求。
格式：send(paras)
代码示例：
send(null)//在GET方式下用这种方式，因为参数会附加在URL后进行传输。 send('fname=神&lname=经病') //在POST方式，用这种方式传输参数，但要记得使用setRequestHeader()方法
4. 同步与异步
xmlHttpReq对象的open()方法第三个参数可以设置同步或异步的方式。
true - 表示为异步，它不会等待服务器的执行完成。
false - 表示同步，它会等待服务器执行完成，否则便会挂起程序，一直等待，一般不推荐是用同步的方式，不过对于一些小程序还是可以使用的。
5. setRequestHeader()
该方法可以设置请求的头部信息，常用以post方式向一个动态网页文件提交数据时使用。这
是因为PHP中的$_POST['key']方法，需要用到键值对的格式，因此必须声明请求的类型为: setRequestHeader('Content-Type','application/x-www-form-urlencoded') 以表单提交数据的方式来发送数据到服务器。
6. 使用时间戳或随机数来确保无缓存的请求数据
//时间戳 open('GET','index.php?t='+ new Date()*1,true)//随机数 open('GET','index.php?m='+ Math.random(),true)
