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

   }

  });

 }