ajax php应用,php与ajax的应用 教程

1.创建xmlhttp对象时的问题。

创建xmlhttp对象在不同的浏览器中有不同的方法，在IE里好像只能用ActiveXObject创建，然而在Firefox等其他浏览器里就不行 了:(，但可以用XMLHttpRequest()函数创建，这样的不统一给程序员写程序带来了很大的难度，所以我认为在学习JS的过程中记录下这些不同 的地方很有必要，不然一个很有前途的程序很容易就会成为 "IE only" 的！！

下面是一个兼容的xmlhttp对象创建函数。以后就可以直接用这个函数创建xmlhttp对象，而不用担心兼容性问题了:D

[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;

}

[/code]

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");

[/code]

用这种方法传送出去的值就和用表单的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("这里可以传送文件正文！！！！！");

[/code]

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

[code]

sack.js文件说明：(代码附在最底下)

实体化对象：

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

[/code]

具体样例:

ajax.htm:

[code]

Loading...

var ajax = new sack("ajax.php");

ajax.method = "GET&POST";

ajax.setVar(

{

"action":"read",

"my":"posttdfsfdsfafasd"

});

ajax.onCompletion = function ()

{

document.getElementById('mydiv').innerHTML = ajax.response;

}

ajax.send("这里是POST出去的内容，可以有特殊字符&=等");

[/code]

ajax.php:

[code]

$br = "
---------------------------
";

print_r($_GET);

echo $br;

print_r($_POST);

echo $br;

echo file_get_contents("php://input");

echo $br;

?>

[/code]

function sack(file) {

/*************************

/ 小屋

/ http://sjolzy.cn/post-182.html

/ www.sjolzy.cn

/ By sjolzy

*************************/

this.xmlhttp = null;

this.resetData = function() {

this.method = "GET";

this.URLString = "";

this.encodeURL = true;

this.file = file;

this.late = true;

this.failed = false;

};

this.resetFunctions = function() {

this.onLoading = function() { };

this.onLoaded = function() { };

this.onInteractive = function() { };

this.onCompletion = function() { };

this.onError = function() { };

this.encode = (encodeURIComponent && this.encodeURL)?function(s) {

return encodeURIComponent(s);

}:function(s){return s;}

};

this.reset = function() {

this.resetFunctions();

this.resetData();

};

this.createAJAX = function(){

try {

this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

}catch (e1){

try {

this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e2) {

this.xmlhttp = null;

}

}

if (! this.xmlhttp) {

if (typeof XMLHttpRequest != "undefined") {

this.xmlhttp = new XMLHttpRequest();

} else {

this.failed = true;

}

}

};

this.setVar = function(name, value) {

var arr1 = [], arr2 = [];

if (typeof name == "object" && !value) {

for(var i in name) {

arr1[arr1.length] = i;

arr2[arr2.length] = name[i];

}

}

else {

arr1[0] = name;

arr2[0] = value;

}

var first = (this.URLString.length == 0);

for(var i=0;i

this.URLString += (first)?"":"&";

this.URLString += arr1[i] + "=" + this.encode(arr2[i]);

}

};