小猪的生活

AJAX五步走,POST方法学习手记

2009年6月15日 | 分类: PHP | 标签: AJAX

本文原创，转载请注明出处，谢谢合作！
AJAX 关于这个技术的书和文章，我不知道看了多少，一直没有用过。
PigBlog主要功能里就只有发表评论了，想想就用AJAX的吧，开始操刀AJAX,下面是我用这个技术的时候的学习心得。

从整体上来说，就是在JS里程序然后，通过DOM操作获得数据，发送给后台的PHP文件，PHP文件处理，返回结果，JS再接收，再通过DOM操作显示数据。
思路就是这样，其中难点是JS文件的编写。这整个过程中，我用到的一些东西，XMLHttpRequest,XML,DOM.

第一步：建立XMLHttpRequest，怎么建立就不说了，网上多的方法，我只把我的代码发出来

JAVASCRIPT

//创建XMLHTTP
function CreateXMLHttp(){
var request=false;
try{
if(window.XMLHttpRequest){
request=new XMLHttpRequest();
/*
* 如果服务器的响应没有XML mime-type header，某些Mozilla浏览器可能无法正常工作。
* 为了解决这个问题，如果服务器响应的header不是text/xml，可以调用其它方法修改该header。
* From:http://leexuan.blogbus.com/logs/1935602.html
* */
if(request.overrideMimeType){
request.overrideMimeType(‘text/xml’);
}
}
else if(window.ActiveXObject){
var i=0;
var xmlarray=[
'Microsoft.XMLHTTP',
'MSXML.XMLHTTP',
'Msxml2.XMLHTTP.6.0',
'Msxml2.XMLHTTP.5.0',
'Msxml2.XMLHTTP.4.0',
'Msxml2.XMLHTTP.3.0',
'Msxml2.XMLHTTP'
];
var len=xmlarray.length;
for(i;i<len;++i){
try{
request=new ActiveXObject(xmlarray[i]);
// request.SetRequestHeader(’Content-Type’,'text/xml’);
request.SetRequestHeader(‘Content-Type’,‘UTF-8′);
break;
}
catch(e){
request=false;
}
}
}
else{
alert(‘你的浏览器不支持AJAX’);
}
}
catch(e){
request=false;
}
return request;
}

其中有些东西是参考别人的文章。
第二步：做一个评论的HTML页，这个就不在这里弄出来。
第三步：再写JS函数，把评论数据拿出来，发到服务器上的PHP的文件。
我用的POST方法，当时做的时候，总是有问题，可是在网上百度或是GOOGLE，大部分都是GET方法，而且转载的有多少就更不想说了。

JAVASCIPT

ajax.open(‘POST’,url,true);
ajax.setRequestHeader(‘Content-type’,‘application/x-www-form-urlencoded’);
ajax.send(querystr);

用POST方法，发送数据时，在send之前要加入setRequestHeader(‘Content-type’,‘application/x-www-form-urlencoded’), 其中大小写一定要注意，open方法的url自己指定要发送的PHP文件，send里的querystr，就像平时的GET方法传值一样拼接一下，中间的加的这一句就是让querystr以表单形式发送出去，这里就涉及到了编码问题。不加这一句，PHP文件通过$_POST是接收不到值的。
第四步：写PHP文件，接收并处理$_POST数据。这里也没什么难的，如果你写过PHP程序并用过$_POST方法传值，这一点问题也没有。只是数据输出的方式要注意。最开始接触AJAX的时候，只是看书，而且书上大多写的是如何创建XMLHttpRequest对象，很少讲到后台ASP/PHP怎么样处理并返回数据。
对于和我一样有这种意识的PHP新手，我会简单说明下，你一下就明白了。AJAX接收的PHP返回的数据，其实很简单比如

PHP

echo ‘Hi,This is the result!’;
这个就是PHP返回的数据。

心想怎么echo ，的确，JS端这时候用responseText就可以接收到这样的输出，一般我们见的多的就是echo输出是输出到浏览器，实际上就AJAX接收的数据就是这样的。如果你不懂，就不要问，因为这样做是可行的。
现在回归正题，我返回的是XML的数据，对这种格式用的不多，所以在我的程序里，也是很简单的应用，一般有两种方法，PHP调用XMLDocument，还有就是直接用echo输出构建好的XML格式的数据。我用的是后一种方法。其中，返回XML数据时，要在你的PHP文件头部加入

PHP

header(‘content-type:text/xml;charset:utf-8′);
header (“Cache-Control: no-cache,must-revalidate”);

如果不加入第一行，IE就接收不到，FF正常，我的测试。第二行，是强制禁止缓存，确保JS接收到的最新数据，理论，没有测试。

第五步：接收PHP返回的数据，并显示操作结果。因为返回的是XML的数据，var xmldoc=ajax.responseXML.documentElement;这样得到的就是一个XML文档对象，你可以像操作DOM一样操作他，得到想要的数据，你问怎么操作？你会用DOM吗？不会就先把DOM学会，因为这是基础。这时候有了数据，那我就要发表评论了，按照我的评论的格式，依次创建文本节点，元素节点，结元素节点添加属性。。。这些操作，不想写太多了，新手要是能做到这儿，证明下面的已经自己会做了。
在为元素节点添加属性时，IE和FF的不同做法

JAVASCRIPT