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]
<div id='mydiv'>Loading...</div>
<script src='sack.js'></script>
<script>
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出去的内容,可以有特殊字符&=等");
</script>
[/code]

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

 

function sack(file) {

/*************************
/    小屋
/  //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<arr1.length;i++) {
			this.URLString += (first)?"":"&";
			this.URLString += arr1[i] + "=" + this.encode(arr2[i]);
		}
	};

	this.send = function(content) {
		if (!content) content = "";
		if (!this.xmlhttp || this.failed ) {
			this.onError();
			return;
		}
		var self = this;
		if (this.method == "GET" || this.method == "GET&POST") {
			this.xmlhttp.open(this.method,this.file+"?"+this.URLString,this.late);
		} else if (this.method == "POST") {
			this.xmlhttp.open(this.method,this.file,this.late);
			try {
				this.xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			} catch(e) {}
		}
		else this.onError();

		this.xmlhttp.onreadystatechange = function() {
			switch (self.xmlhttp.readyState) {
				case 1:
					self.onLoading();
					break;
				case 2:
					self.onLoaded();
					break;
				case 3:
					self.onInteractive();
					break;
				case 4:
					self.response = self.xmlhttp.responseText;
					self.responseXML = self.xmlhttp.responseXML;
					if (self.xmlhttp.status == "200") {
						self.onCompletion();
					} else {
						self.onError();
					}
					self.URLString = "";
					break;
			}
		};
		
		if (this.method == "POST") {
			this.xmlhttp.send(this.URLString);
		} else if (this.method == "GET") {
			this.xmlhttp.send(null);
		} else if (this.method == "GET&POST") {
			this.xmlhttp.send(content);
		}
	};

	this.reset();
	this.createAJAX();
}

本文永久地址:https://sjolzy.cn/php-and-ajax-application.html

--EOF--

随机文章

添加新评论