最近遇到一个需要用ajax来解决的问题，于是写了个简单的ajax，没有使用xml 和 JSON来格式化数据的传输。
先看一下PHP的部分，其实这部分是最无关紧要的，根本上用什么语言都可以实现：
<?php
if($_REQUEST[\'data\']){
$data = $_REQUEST[\'data\'];
file_put_contents(\'ajax.txt\',$data . "\n\r",FILE_APPEND);
echo \'已经写入\' . $data;
}
//这个文件我没有写 ? > 大家知道为什么吗？
然后是，“原生”的 ajax
<html><head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>zhangyufeng - ajax </title>
</head>
<body>
<script language="javascript" type="text/javascript">
_count_info = 0;
function ajax_callback(ajax_text , ajax_status){
var info = document.getElementById(\'show_data\');
info.innerHTML = info.innerHTML + \'<br/>\' + ajax_text;
var num = document.getElementById(\'num\');
_count_info ++;
num.innerHTML = _count_info;
}
function ajax_get(){
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != \'undefined\') {
xmlHttp = new XMLHttpRequest();
}
var ee = document.getElementById(\'content\');
var data = \'data=\' + ee.value;
xmlHttp.open("POST","ajax.php",true);
xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-Length",data.length);
xmlHttp.onreadystatechange = function()
{
if (xmlHttp.readyState == 4)
{
ajax_callback(xmlHttp.responseText, xmlHttp.status);
delete(xmlHttp);
}
}
xmlHttp.send(data);
}
</script>
<h1>ZhangYufeng ----------- </h1></br>
---------------------------------------------------------------------------</br>
---------------------------------------------------------------------------</br>
---------------------------------------------------------------------------</br>
已经成功写入<div id=\'num\' style=\'color:red;\'>0</div>次
<div id=\'show_data\'>
</div>
---------------------------------------------------------------------------</br>
---------------------------------------------------------------------------</br>
---------------------------------------------------------------------------</br>
<input type=\'text\' name=\'content\' id=\'content\' /></br>
<input type=\'button\' name=\'sub\' id=\'sub\' value=\'提交\' onclick=\'ajax_get()\'/>
</body>
</html>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>zhangyufeng - ajax </title>
</head>
<body>
<script language="javascript" type="text/javascript">
_count_info = 0;
function ajax_callback(ajax_text , ajax_status){
var info = document.getElementById(\'show_data\');
info.innerHTML = info.innerHTML + \'<br/>\' + ajax_text;
var num = document.getElementById(\'num\');
_count_info ++;
num.innerHTML = _count_info;
}
function ajax_get(){
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != \'undefined\') {
xmlHttp = new XMLHttpRequest();
}
var ee = document.getElementById(\'content\');
var data = \'data=\' + ee.value;
xmlHttp.open("POST","ajax.php",true);
xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-Length",data.length);
xmlHttp.onreadystatechange = function()
{
if (xmlHttp.readyState == 4)
{
ajax_callback(xmlHttp.responseText, xmlHttp.status);
delete(xmlHttp);
}
}
xmlHttp.send(data);
}
</script>
<h1>ZhangYufeng ----------- </h1></br>
---------------------------------------------------------------------------</br>
---------------------------------------------------------------------------</br>
---------------------------------------------------------------------------</br>
已经成功写入<div id=\'num\' style=\'color:red;\'>0</div>次
<div id=\'show_data\'>
</div>
---------------------------------------------------------------------------</br>
---------------------------------------------------------------------------</br>
---------------------------------------------------------------------------</br>
<input type=\'text\' name=\'content\' id=\'content\' /></br>
<input type=\'button\' name=\'sub\' id=\'sub\' value=\'提交\' onclick=\'ajax_get()\'/>
</body>
</html>
如果使用jQuery的话，就把js部分改成这个样子
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
_count_info = 0;
$("#sub").click(function(){
$.post(\'ajax.php\',\'data=\' + $("#content").val(),
function(ajax_text , ajax_status){
$("#show_data").html( $("#show_data").html() + \'<br/>\' + ajax_text);
_count_info ++;
$("#num").html( _count_info);
}, \'text\');
});
});
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
_count_info = 0;
$("#sub").click(function(){
$.post(\'ajax.php\',\'data=\' + $("#content").val(),
function(ajax_text , ajax_status){
$("#show_data").html( $("#show_data").html() + \'<br/>\' + ajax_text);
_count_info ++;
$("#num").html( _count_info);
}, \'text\');
});
});
</script>
呵呵，用10行就实现了。但是其实原理还是和原生的js是一样的，只不过进行了封装，使用代码看起来更优雅了。
只要对原生的ajax有了理解，相信jquery会让你开发更快，效率更高，但我个人觉得，还是应该先对js有了一定的了解之后再使用jquery.