JavaScript:

var xmlhttp;
xmlhttp = GetXmlHttpObject();
if(xmlhttp == null){
  alert("浏览器不支持 AJAX!");
  return;
}
xmlhttp.onreadystatechange = stateChanged;
xmlhttp.open("GET", "http://www.google.com", true);
xmlhttp.send(null);

function stateChanged(){
  if(xmlhttp.readyState == 4){
    alert('AJAX 请求成功返回!');
  }
}
function GetXmlHttpObject(){
  // IE7+, Firefox, Chrome, Opera, Safari
  if(window.XMLHttpRequest){
    return new XMLHttpRequest();
  }

  //IE5, IE6
  if(window.ActiveXObject){
    return new ActiveXObject("Microsoft.XMLHTTP");
  }
  return null;
}

jQuery:

$.ajax({
  url: 'http://www.google.com',
  success:function(data){
    alert(data);
  }
});

可见, jQuery 为我们封装了 AJAX 操作, 并在其中考虑了不同浏览器的兼容性, 使得发起一个 AJAX 请求的操作变得无比简单.

AJAX 发起的请求和页面提交的请求在服务器看来没有任何区别.

实际使用中如以上例子的简单请求并不常用, 下面给出一个稍复杂, 更具实用性的例子, 来自 The Perfect jQuery AJAX Request:

$.ajax({
  type: 'POST',
  url: 'http://kyleschaeffer.com/feed/',
  data: {
    postVar1: 'theValue1',
    postVar2: 'theValue2'
  },
  beforeSend:function(){
    // 开始请求, 显示 "Loading" 图片
    $('#ajax-panel').html('<div class="loading"><img src="/images/loading.gif" alt="加载中..." /></div>');
  },
  success:function(data){
    // 请求成功返回, 隐藏 "Loading" 图片, 填入返回数据
    $('#ajax-panel').empty();
    $(data).find('item').each(function(i){
      $('#ajax-panel').append('<h4>' + $(this).find('title').text() + '</h4><p>' + $(this).find('link').text() + '</p>');
    });
  },
  error:function(){
    // 请求失败
    $('#ajax-panel').html('<p class="error">获取数据失败, 请刷新重试</p>');
  }
});

Reference

The Perfect jQuery AJAX Request

原生 JS 代码和用 jQuery 实现效果各有什么优劣势？ - 知乎