javascript - 不同类型的ajax实现

Question

我刚刚开始为我用 php 制作的聊天应用程序使用 ajax。 在在线研究 ajax 时，我在不同的实现了 ajax 的网站上发现了两种方法。 这两种ajax实现有什么区别？ 任何帮助将不胜感激:)

第一次实现-

    <script type"text/javascript">
        $(document).ready(function() {
        var dept = '<?php echo $deptId; ?>';
        var interval = setInterval(function() {
            $.ajax({
                url: 'scripts/php/Chat.php',
                data: {dept:dept},
                success: function(data) {
                $('#messages').html(data);
            }
        });
        }, 1000);
    });
    </script>

第二次实现-

<script language="javascript" type="text/javascript">
function ajaxFunction(){
var ajaxRequest;  // The variable that makes Ajax possible!
try{

  // Opera 8.0+, Firefox, Safari
  ajaxRequest = new XMLHttpRequest();
}catch (e){

  // Internet Explorer Browsers
  try{
     ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
  }catch (e) {

     try{
        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
     }catch (e){

        // Something went wrong
        alert("Your browser broke!");
        return false;
     }
  }
 }

// Create a function that will receive data
// sent from the server and will update
// div section in the same page.
ajaxRequest.onreadystatechange = function(){

  if(ajaxRequest.readyState == 4){
      var ajaxDisplay = document.getElementById('ajaxDiv');
      ajaxDisplay.innerHTML = ajaxRequest.responseText;
  }
}

// Now get the value from user and pass it to
// server script.
var age = document.getElementById('age').value;
var wpm = document.getElementById('wpm').value;
var sex = document.getElementById('sex').value;
var queryString = "?age=" + age ;

queryString +=  "&wpm=" + wpm + "&sex=" + sex;
ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
ajaxRequest.send(null); 
}

Answer 1

就功能而言，可以说它们之间没有区别。

也就是说，它们之间的第一个“区别”是第一种方法是使用 JQuery，因此要使用它，您需要将 JQuery Javascript 库包含在您的项目或需要 ajax 功能的页面中。然而，第二种方法使用“plain ole Javascript”。

同样，第一个 (JQuery) 方法为您处理许多“脏”细节，为您提供 ($.ajax)接口(interface)，只需要传入一些参数:

url : 您要调用的 URL

data:您希望传递到 URL 的数据(GET 或 POST)

success :ajax请求成功返回时执行的回调函数。

在此过程中，此方法从您那里抽象出内部实现。例如，它为您处理以下内容:

1. browser-sniffing/capabilities detection
2. readyStateChange (event) checks

以及其他一些平凡的细节。

此外，使用第二种方法，如果您“遵守” $.ajax 的接口(interface)规范，您可以放心，您的代码将在大多数情况下(如果不是全部)正常工作。称呼。但是，使用第二种方法，您需要进行大量测试和检查，以确保您的代码可以在所有浏览器和平台类型上运行。