原生ajax 与 jQuery 的实现对比
最近遇到一个需要用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.
