jQuery Ajax

jQuery Ajax Features
GET and POST supported
Load JSON,XML,HTML or even scripts 


<!-- 与Ajax相关的 XMLHTTP -->
var xmlHttp = null;
if (window.XMLHttpRequest) {
    // IE7, Mozilla, Safari等浏览器，Use native object.
    xmlHttp = new XMLHttpRequest();
} else {
    if (window.ActiveXObject) {
        // ...其他浏览器，use the ActiveX control for IE5.x and IE6.
        xmlHttp = new ActiveXObject('MSXML2.XMLHTTP.3.0');
    }
}


<!--jQuery Ajax Functions -->
$(selector).load():Loads HTML data from the server
$.get() and $.post():Get raw data from the server
$.getJSON():Get/Post and return JSON
$.ajax():Provides core functionality


<!-- Loading HTML Content from the Server -->
<!-- $(selector).load(url,data,callback) -->
$(document).ready(function(){
    $('#MyButton').click(function(){
        $('#MyDiv').load('../HelpDetails.html #SubTOC');
    });
});
<!-- 过滤页面信息 -->
$('#MyDiv').load('HelpDetails.html #MainToc');


<!-- passed data to the server -->
$('#MyDiv').load('../GetCustomers.aspx', {PageSize: 25});


<!-- 返回callback -->
$('#MyDiv').load('NotFound.html', 
    function (response, status, xhr) {
        if (status == "error") {
	    alert('Error:' + xhr.statusText);
	}
    }
);


<!-- 内核 -->
function (url, params, callback) {
  if (typeof url !== "string") {
    return this._load(url);
    //Don't do a request if no elements are being requested
  } else if (!this.length) {
    return this;
  }


  var off = url.indexof(" ");
  if (off >= 0) {
    var selector = url.slice(off, url.length);
    url = url.slice(0, off);
  }


  //Default to a GET request
  var type = "GET";
  //If the second parameter was provided
  if (params) {
      //If it's a function
      if (jQuery.isFunction(params)) {
          //We assume that it's the callback
          callback = params;
          params = null;


          // Otherwise, build a param string
      } else if (typeof params === "object") {
          params = jQuery.param(params, jQuery.ajaxSettings.traditional);
          type = "POST"
      }
  }


  // Request the remote document
  jQuery.ajex({
    url: url,
    type: type,  //GET,POST
    data: params,
    context: this,
    complete: function (res, srarus) {
        //etc
    }
  });
}

Using get()

<!-- $.get(url, date, callback, datatype) -->
// example one:
$.get('../HelpDetails.html', function (data) {
    $('#MyDiv').html(data);
});
// example two:
$.get('../CustomerJson.aspx', {id: 5 }, function (data) {
    alert(data.FirstName);
}, 'json');


<!-- 内核 -->
function (url, data, callback, datatype) {
  //shift arguments if data argument was omited
  if (jQuery.isFunction(data)) {
    type = type || callback;
    callback = data;
    data = null;
  }


  return jQuery.ajax({
    type: "GET",
    url: url,
    data: data,
    success: callback,
    dataType: type  //json,html,xml etc
  });
}

Using getJSON()

<!-- $.getJSON(url, data, callback) -->
$.getJSON('../CustomerJson.aspx', {id: 1 }, function (data) {
    alert(data.FirstName + '' + data.LastName);
    // response.contentType = "application/json";
});

Using post()

<!-- $.post(url, data, callback, datatype) -->
$.post('../GetCustomers.aspx', {PageSize: 15 }, function (data) {
    $('#MyDiv').html(data.FirstName);
}, 'json');


<!-- to Call a WCF Service -->
$.post('../CustomerService.svc/GetCustomers', null, function (data) {
    var cust = data.d[0];
    alert(cust.FirstName + '' + cust.LastName);
}, 'json');

The ajax() Function  （configured by assigning values to JSON properties）

<!--
Configure using JSON properties:
    1. contentType
    2. data
    3. dataType
    4. error
    5. success
    6. type (GET or POST)
-->
$.ajax({
    url: '../CustomerService.svc/InsertCustomer',
    data: customer,
    datatype: 'json',
    success: function (data, status, xhr) {
        alert("Insert status: " + data.d.Status + '\n' +
                data.d.Message);
    },
    error: frunction (xhr, status, error) {
        alert('Error occurred: ' + status);
    }
    // complete(XMLHttpRequest, textStatus) ..etc
    // api.jquery.com/jQuery.ajax/
});


// example two:
$('#MyButton').click(function () {
    var customer = 'cust=' +
        JSON.stringify({   // src="./json2.js"
            FirstName: $('#FirstNameTB').val(),
            LastName: $('#LastNameTB').val()
        });
    $.ajax({
        url: '../CustomerService.svc/InsertCustomer',
        data: customer,
        dataType: 'json',
        success: function (data, status, xhr) {
            $('#MyDiv').html('Insert status: ' + data.d.Status);
        },
        error: function (xhr, status, error) {
            alert('Error occurred: ' +status);
        }
    });
});
<!--  request headers: GET /CustomerService.svc/InsertCustomer?cust={"FirstName":"John","LastName":"Doe"} HTTP/1.1  -->

http://www.cnblogs.com/A_ming/archive/2010/04/13/1711395.html