我的另类AJAX技巧

如果你还没有任何基础,请参见

AJAX我相信不用我多说，大家都知道是什么东西吧。我接触AJAX也不算太久，都是边学边写东西。其中遇到了很多问题，也总结了很多经验。我不是高手，所以我不敢说我的东西是最好的，如果你有更好的，欢迎一起讨论。
首先我觉得AJAX新手不应一以来就用什么（比如prototype.js等，即使那样写程序会容易一些）。原因是了解xmlhttp的基本原理，对以后的开发会有很大的帮助。而且我始终觉得对于Javascript这种脚本语言来说，执行效率是非常重要的，因此我十分反感为了实现一个小功能，动不动就包含什么框架。因为那些框架为了自身的功能和兼容性，都包含了很多使用频率比较低的东西，更有些框架为了方便用户调用，甚至不惜牺牲程序的执行效率。
好了，不说废话了，开始说正题吧。
1.创建xmlhttp对象时的问题。
创建xmlhttp对象在不同的浏览器中有不同的，在IE里好像只能用ActiveXObject创建，然而在Firefox等其他浏览器里就不行了，但可以用XMLHttpRequest()函数创建，这样的不统一给程序员写程序带来了很大的难度，所以我认为在学习JS的过程中记录下这些不同的地方很有必要，不然一个很有前途的程序很容易就会成为 "IE only" 的！！
下面是一个兼容的xmlhttp对象创建函数。以后就可以直接用这个函数创建xmlhttp对象，而不用担心兼容性问题了

CODE:

function createAJAX()
{
var xmlhttp;
try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e1)
{
try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e2) { xmlhttp = null; }
}
if (!xmlhttp)
{
if (typeof XMLHttpRequest != "undefined") { xmlhttp = new XMLHttpRequest(); }
else return false;
}
return xmlhttp;
}

2.AJAX的数据传输方式。
正如你知道的，AJAX支持以POST何GET方式传送数据。但你知道怎样正确使用他们吗？
GET：
GET是最常用的数据传输方式，就是将变量名和值直接跟在URL后面就可以了，同时这个也是最简单的方法。
比如: 调用的URL为 ajax.php?id=1，这样在ajax.php中的$_GET数组里就有 $_GET["id"] = 1; 如果有多个变量，则用"&"分开。
POST：
POST相对于GET来说要用得比较少一点，而且POST的用法比GET要麻烦一点。
首先，POST也跟GET一样，要先把变量名和值用"="和"&"符号连成一个字符串。 然后用 xmlhttp的 send 方法传送。而且要在send之前设置header。

CODE:

var ajax = createAJAX(); //就是前面那个创建xmlhttp对象的函数
ajax.open("POST","ajax.php",true);
ajax.onreadystatechange = function1; //配置状态处理函数名，不能在后面加上"()"！！
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //这句必须要，而且一定要放在send以前
ajax.send("变量1=值1&变量2=值2");

用这种方法传送出去的值就和用表单的post方式传出的值一样。

还有一个非常重要的，不管用POST还是GET，都应特别注意"&","+"和"%"等特殊字符的问题。如果变量的值里面含有这些字符，那么后果不堪设想。一个很好地解决办法就是使用encodeURIComponent这个全局函数来将所有的值都处理一遍（注意只是处理值），将特殊字符转换成%XX的形式（和php里的urlencode貌似是一个功能）。但这个函数在IE5里不能用！

用POST方法传送数据的时候，xmlhttp.send()传出的所有东西在php里都可以在一个名叫"php://input"的特殊文件里读取到。比如上面的那个，在ajax.php里用 file_get_contents("php://input") 就可以得到 "变量1=值1&变量2=值2"。　这是一个非常好的功能！这样我们就可以不用再使用"变量名=值"的方式了！也不用担心特殊字符！ 将这个方法和GET结合起来就可以做一个AJAX的文章自动保存的程序。

CODE:

var ajax = createAJAX();
ajax.open("POST","ajax.php?filename=a.txt",true);
ajax.onreadystatechange = function1;
//ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //如果不需要将send出的字符串解析成POST变量数据，那么这句就可以不用了
ajax.send("这里可以传送文件正文！！！！！");

这样从ajax.php的$_GET数组中可以获得文件名，用 file_get_contents("php://input") 就可以获得文件正文，而且不用担心任何的特殊字符，同时也不用处理数据，减轻客户端压力。
我做了一个样例，看这里

我看过很多ajax框架，但没有发现支持用这种方式传输数据的。另外我发现一个非常好用的ajax框架 tw-sack.js，但也有许多不尽人意的地方。于是我修改了一下，增加了一些功能。下面说说它的功能和用法：

特点:
体积小,方便调用, 增加 GET&POST 方法,就是上面说的那种

CODE:

实体化：
var ajax = new sack("URL"); // URL为ajax调用地址

属性:( =默认值)
method = "GET"; //"GET"和"POST"或"GET&POST"
encodeURL = true; //是否处理参数值
late = true; //是否为异步方式
函数配置:
onLoading = 空函数; //当loading的时候触发
onLoaded = 空函数; //当下载完的时候触发
onInteractive = 空函数; //当交互的时候触发
onCompletion = 空函数; //当全部完成的时候触发
onError = 空函数; //当发生错误的时候触发
方法:
setVar 设置变量和值,可以以两种方式：setVar("varName","varValue"); 和 setVar( { "name1":"value1","name2":"value2"} );
send 发送,可以当method = "GET&POST" 的时候可以接受一个字符串作为 POST 的内容
当完成的时候才可用的属性(在onCompletion里可以使用):
response //返回的字符串
responseXML //返回的xml

具体样例:
ajax.htm:

CODE:

Loading...

ajax.php:

CODE:

<?
$br = "
---------------------------
";
print_r($_GET);
echo $br;
print_r($_POST);
echo $br;
echo file_get_contents("php://input");
echo $br;
?>

在这里可以看到:

sack.js下载地址: