不同类型的ajax实现

i have just started working on ajax for my chat application which i am making in php. While studying ajax online I cam across 2 ways in on different sites where ajax had been implemented. What is the difference between these 2 implementations of ajax? Any help will be greatly appreciated :)

First Implementation-

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

Second Implementation-

<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); 
}

Functionality-wise, it could be argued that there is no difference between them.

That said, the first "difference" between them is that the first method is using JQuery, and thus to use it, you need to have the JQuery Javascript library included in your project or the page where you need the ajax functionality. The second method, however, uses "plain ole Javascript".

Again, the first (JQuery) method, handles a lot of the "dirty" details for you, providing you with an ($.ajax) interface and requiring only that you pass in some parameters:

url : The URL you wish to call

data : The data (GET or POST) you wish to pass to the URL

success : The callback function that should be executed when the ajax request successfully returns.

In doing this, this method abstracts the internal implementation from you. For example, it handles for you the following:

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

and some other mundane details.

Besides, also, using the second method, you can rest-assured that your code will mostly work in the majority of scenarios (if not all), if you "honour" the interface specification of the $.ajax call. Using the second method, however, you'll need to do a lot of testing and checks to ensure that your code works across all browser and platform types.

Your first code use jQuery. JQuery is a rich js lib that helps you coding quickly. See http://api.jquery.com/ (and in your particular case : http://api.jquery.com/jQuery.ajax/

Your second code is only javascript without any help from other library. It uses the XMLHttpRequest wich allows ajax call. See https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

The use of jQuery is easier but some find it "overkill" :)