Ajax 学习 - 基础学习
《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)
