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)