随笔- 455 文章- 16 评论- 791 阅读- 201万

原生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>

如果使用jQuery的话，就把js部分改成这个样子