HeadFirst Jquery 学习笔记之jQuery and Ajax

Ajax

1.请求数据来实现局部刷新update small pieces of the page with the information from the server，without having to reload the page.

2.提供了表单之外提交请求的另外一种途径。表单提交请求返回的是整个HTML页面，Ajax提交请求返回的是部分数据。

3.不用刷新页面或者其他操作，背后静默执行。可以实现数据的自动刷新。

A：Asynchronous异步

Ajax提交请求之后，依然可以操作页面其他部分的表单或者按钮，不用等待请求返回，在背后默默执行。

J：JavaScript

嵌入HTML文档的脚本语言，与DOM交互。DOM是HTML的骨架。

X：XML  eXtensible Markup Language

格式化数据便于传输。HTML格式化数据便于展示。

 

通过AJAX获取数据

$.ajax({
  url: "my_page.html"
  success: function(data){
  }
});

参数data为从AJAX请求返回的数据。

 

解析XML数据 Parsing XML data

 利用jQuery提供的find方法和each方法实现element的遍历

 

function getXMLRacers(){
  $.ajax({
   url: "finishers.xml",
   cache: false,
   dataType: "xml",
   success:  function(xml){
    
    $('#finishers_m').empty();
    $('#finishers_f').empty();
    $('#finishers_all').empty();
    
    $(xml).find("runner").each(function() {
     var info = '<li>Name: ' + $(this).find("fname").text() + ' ' + $(this).find("lname").text() + '. Time: ' + $(this).find("time").text() + '</li>';
     if( $(this).find("gender").text() == "m" ){
      $('#finishers_m').append( info );
     }else if ( $(this).find("gender").text() == "f" ){
      $('#finishers_f').append( info );
     }else{  }
     $('#finishers_all').append( info );
    });
    
    getTimeAjax();
   }
  });
 }