赵工的个人空间

Ajax允许一个Web页面向Web服务器提出请求，并接收来自Web服务器的响应，然后更新自己，而不必载入一个新的Web页面。
Ajax是Asynchronous JavaScript and XML的缩写，意思是异步JavaScript和XML，是一种技术的混合交互。简而言之，当前的Web浏览器允许使用JavaScript来向Web服务器发送一个请求，而Web服务器反过来把数据送回到Web浏览器。
Ajax背后的技术包括JavaScript、服务器端编程以及Web浏览器的协同工作。

1.XMLHttpRequest：

XMLHttpRequest对象是Ajax的核心，有时简称为XHR，是构建到当前Web浏览器中的一种功能。它允许JavaScript向Web服务器发送信息，并反过来从Web服务器接收信息，包括5个步骤，都可以使用JavaScript来完成：
①创建XMLHttpRequest对象的一个实例：
用JavaScript创建一个XMLHttpRequest对象的方法为：
var newXHR=new XMLHttpRequest();
Ajax有很多跨浏览器的问题，使用jQuery等JavaScript库更好。
②使用XHR的open()方法指定要发送的数据以及去向：
可以使用GET或POST方法发送数据，使用open()方法来指定数据发送到服务器的哪个页面。这个页面通常是服务器上的一个页面，使用一种服务器端脚本语言来从数据库获取数据或执行一些其他的编程任务，并且通过URL指向它。示例：
newXHR.open('GET','shop.php?productID=34');
为open()方法指定的URL必须和发出请求的页面在同一个Web站点上。为了安全起见，Web浏览器不允许对其他的域发出ajax请求。
③创建函数操作结果：
当Web服务器返回一个结果，都需要编写一个JavaScript函数来处理，这个函数叫回调函数，通常是程序的主要部分。通常情况下，这个函数通过删除元素、添加元素或者改变元素，来操作页面的内容。
④发送请求：
此前的所有步骤都只是准备，要真正向Web服务器发送请求，要使用XHR对象的send()方法。如果使用GET方法，就比较简单：
newXHR.send(null);
Null表示不发送任何附加数据，因为GET方法把数据放在URL中发送。如果使用POST方法，数据要和send()方法一起提供：
newXHR.send('q=javascript');
一旦发送了请求，JavaScript程序不需要停止，可以继续做其他事情，所以称为异步。
⑤接收响应：
在服务器处理了请求之后，会向Web浏览器送回一个响应。当Web服务器响应的时候，XHR对象同时接收到多段信息，包括请求的状态、文本响应以及可能的一个XML响应。
状态响应是一个数字，表示服务器如何响应请求。如果一切按照计划进行，将得到一个200或者是304状态；如果在处理页面的时候有一个错误，将会得到一个500的状态报告；如果请求的文件收到密码保护，将会得到一个403错误。
大多数情况下，会接收到一条文本响应，存储在XHR对象的responseText属性中，这个响应可能是一段HTML、一条简单的文本消息或者是一组复杂的JSON数据。如果服务器用一个XML文件来响应，会存储到XHR对象的responseXML属性中。服务器页面返回文本、HTML或JSON数据的情况更为常见。
不管服务器返回何种数据，都可以供回调函数用来更新Web页面。一旦回调函数完成，整个Ajax周期也就结束了。

2.Ajax的jQuery方式：

浏览器之间有很多不同，以致必须为Ajax编写额外的代码适应各种浏览器。jQuery库提供了几个函数很好地简化了整个过程，实际对服务器的程序响应都仅仅在一个步骤中发生。

1)load()函数：

jQuery的.load()函数，把一个HTML文件载入到页面上的一个特定元素中。例如，假设Web页面有一个区域用于新闻标题的一个简短列表，当页面载入的时候显示5条新的新闻主题。直接把选择的新闻报道载入到页面中的新闻标题框中，每次访问者单击一个不同的新闻类型，Web浏览器都从服务器请求一个新的HTML文件，然后把该HTML放置到标题中，而不用离开当前页面。
要使用.load()函数，首先要用一个jQuery选择器来表示页面上请求的HTML放置到的元素，然后调用.load()函数并传递想要访问的页面URL。例如，一个id为headlines的div，需要把文件todayNews.html中的HTML载入到该div中：
$('#headlines').load('todayNews.html');
代码运行时，Web浏览器从Web服务器请求todayNews.html文件，当文件下载后，浏览器使用新文件的内容来替换id为headlines的div中当前的内容。这个HTML文件可能是一个完整的页面，或者一段HTML。只能从同一站点载入HTML文件。
当HTML载入到文档时，HTML中的任何文件路径不会重写，如果其中有一个链接或包含图像，这些URL要和使用load()的页面相关才能起作用。为了避免问题，可以只用根相对目录的链接，或者确保载入的文件和使用load()函数的页面位于同一目录下。
Load()函数甚至允许指定想要把下载HTML文件的哪一个部分添加到页面中。例如，如果上述示例中，只想把todayNews.html文件中id为news的一个div中的内容插入到当前页面中，可以使用：
$('#headlines').load('todayNews.html #news');
上述代码，Web浏览器下载页面todayNews.html，但只提取id为news的div标记中的内容。

2)get()和post()函数：

jQuery的get()和post()函数提供了简单的工具来向Web服务器发送数据或从Web服务器获取数据。这两个函数的基本结构为：
$.get(url,data,callback);
$.post(url,data,callback);
这两个函数不添加选择器，都接收3个参数。Url是包含了处理数据的服务器端脚本的路径的一个字符串，；data参数是一个字符串或者一个JavaScript对象直接量，包含了要发送给服务器的数据；callback是处理服务器返回信息的回调函数。
GET方法适合不会影响到服务器上的一个数据库或文件的状态的那些请求，例如查询价格或产品列表；而POST适合发送那些将会改变服务器上的信息的数据，例如删除一个文件、更新一条记录等。GET方法对可以发送的数据量有一个内置的限制，一般几百个字符，不同的浏览器有所不同。

3)格式化发送给服务器的数据：

Ajax大多数情况下都要向服务器发送信息，需要以get()和post()函数所理解的某种方式来格式化所请求的数据。一般可以使用“键=值"对组成的字符串方式发送数据：
$.get('rateMovie.php','rating=5');
$.post('rateMovie.php','rating=5');
jQuery的get()和post()函数并不要求必须定义数据或回调函数，只需要提供服务器端页面的URL。一般情况下，总是提供数据。
如果需要给服务器发送多个“键=值"对，可以在没对之间插入一个&符号。示例：
$.post('rateMovie.php','rating=5&user=Bob');
要注意有些字符插入到查询字符串中时具有特殊含义，想要使用特殊的符号作为“键=值"对中的名字或值的一部分，需要转义或者对其编码。例如，空格以%20表示，&用%26表示，=用%3D表示。JavaScript提供了encodeURIComponent()方法来转义字符串：
var queryString='favFood'+encodeURIComponent('Mac % Cheese');
$.post('foodChoice.php',queryString);
对于简短而简单的数据，使用对象直接量来存储“键:值"对。基本结构为：
{name1:'value1',name2:'value2'}
可以直接给get()和post()函数传递一个对象直接量。示例：
$.post('rateMovie.php',{rating:5});
可以首先将其存储在一个变量中并将该变量传递给get()和post()函数。示例：
var data={rating:5,user:'Bob'};
$.post('rateMovie.php',data);
要为整个表单的所有“键=值"对创建查询字符串或对象直接量很繁琐，jQuery提供了serialize()函数来创建。要使用它，首先创建包含了一个表单的jQuery查询，然后添加serialize()函数。示例：
var formData=$('#login').serialize();
var formData创建了一个变量，$('#login')创建了包含表单的一个jQuery选择，serialize()收集了字段名和每个字段中当前的值并创建了一个单个的查询字符串。
要将这种方法和get()和post()函数结合起来使用，只要把序列化的结果传递给函数作为URL之后的第二个参数。示例：
$.get('login.php',formData,loginResults)
这段代码使用GET方法把访问者输入到表单中的内容发送给了login.php文件。

4)处理来自服务器的数据：

Ajax向服务器发送一些数据，服务器返回数据，然后可以使用这些数据来更新页面。
当Web浏览器使用XMLHttpRequest对象向服务器发送完一个请求，保持对来自服务器的响应和监听。当服务器响应的时候，一个回调函数会处理服务器的响应，几个参数会传递给该函数供其使用，服务器返回的数据作为第一个参数传递。
服务器端的脚本可以返回一个数值、一个单词、一段文本或者是一个完整的Web页面。在服务器发送很多信息的情况下，通常使用XML或JSON形式返回数据。
回调函数的第二个参数是表示响应状态的一个字符串，大多数时候这个状态是“成功的"，意味着服务器已经成功地处理了请求并返回了数据。然而，有时候一个请求不会成功，回调函数接收一个“错误"状态信息。
回调函数以某种方式处理信息，并且大多数时候会以某种方式更新Web页面。
以下是一个可以点击并给电影评级的链接的jQuery代码：
$('#message a').click(function(){
   var href=$(this).attr('href');
   var querystring=href.slice(href.indexOf('?')+1);
   $get.('rate.php',querystring,processResponse);
   return false;  //stop the link
});
先选择包含在id为message的标记中的每个链接，然后对每一个链接的click事件应用一个函数。其中提取了链接的href属性，使用slice()方法来提取字符串的一部分，从而得到？后面的部分。Ajax请求使用GET方法发送给服务器文件rate.php，结果将返回给回调函数processResponse。最后是阻止常规的链接行为，防止Web浏览器退出当前的页面并载入链接的页面。
而回调函数processResponse的代码为：
function processResponse(data){
   var newHTML;
   newHTML='<h2>Your vote is counted</h2>';
   newHTML+='<p>The average rating for this movie is ';
   newHTML+=data+'.<p>';
   $('#message').html(newHTML);
}
这个函数接收参数data，这是Web服务器返回的信息，data可能是纯文本、HTML、XML或JSON。函数中创建了一个变量，用来保存将要在页面中显示的HTML，然后在变量中填充一些HTML标记等，然后在id为message的元素中显示。
回调函数也可以使用匿名函数。上述代码可以改写为：
$get.('rate.php',querystring,function(data){
   var newHTML;
   newHTML='<h2>Your vote is counted</h2>';
   newHTML+='<p>The average rating for this movie is ';
   newHTML+=data+'.<p>';
   $('#message').html(newHTML);
});  //end get

5)处理错误：

当使用Ajax和一个Web服务器会话的时候，事情可能会出错。如果发生这种情况，get()和post()函数将会失效，不会让访问者知情。要对错误给出响应，直接在get()和post()函数的末尾加一个.error()函数。基本结构为：
$.get(url,data,successFunction).error(errorFunction);
前面的代码可以改写为：
$get.('rate.php',querystring,processResponse).error(errorResponse);
然后，创建一个名为errorResponse的错误响应函数：
function errorResponse() {
   var errorMsg="Your vote could nor be processed right now.";
   errorMsg+="Please try again later.";
   $('#message').html(errorMsg);
}
一个比较完整的Ajax代码示例：
$(document).ready(function(){
   $('#login'.submit(function(){
      var formData=$(this).serialize();
      $.post('login.php',formData,prosessData);
      function processData(data){
         if (data=='pass') {
            $('#formwrapper').html('<p>You have successfully logged on!</p>');
         } else {
            if (!$('#fail').length){
               $('#formwrapper').prepend('<p id="fail">Incorrect login information.
                                       Please try again</p>');
             }
         }
      }  //end processData
      return false;
   });  //end submit
});  //end ready

3.JSON：

发送来自服务器的数据的另一种常用格式是JSON（JavaScript Object Notation），是交换数据的一种方法。JSON只是一个JavaScript对象直接量，或是“键:值"对的一个集合。示例：
{firstname:'Frank',lastname:'Smith',phone:'503-555-1212'}
其中{表示JSON对象的开始，}表示其结束，之间是成组的“键:值"对。每组键值对用逗号隔开，但最后一组的末尾不能放逗号，否则会产生错误。也可以把“键:值"对中的键也放入引号中，如果键中有空格或其其他非文字数字的字符就必须使用引号。
当Web服务器响应一个Ajax请求，可能返回格式化为JSON的一个字符串。jQuery提供了一个特殊函数getJSON()，基本结构为：
$.getJSON(url,data,callback);
传递给该函数的3个参数和get()和post()函数的参数相同，不同之处在于此函数将处理来自服务器的响应并将其转换为一个可用的JSON对象。
PHP中有一个内置函数，可以从一个PHP数组来创建一个JSON对象。因此，Ajax应用程序可以接收一个PHP数组并且快速将其转换为一个JSON对象，以返回给Web浏览器中等待的JavaScript代码。示例：
$.getJSON('contacts.php','contact=123',processContacts);
这行代码向contact.php发送一个查询字符串contact=123。假设contact.php使用该信息在一个数据库中找到一个单个的联系人，并且获得联系人的信息，结果送回调函数。回调函数有一个参数data，其中包含了来自服务器的JSON对象。

1)访问JSON数据：

有两种方式访问一个JSON对象中的数据，点语法或数组表示法。点语法是表示对象属性的一种方法，在对象名以及想要访问的属性之间添加一个点号。例如，变量定义：
var bday={person:'Raoul',date:'10/27/1980'};
如果想要获取对象中的person值，可以使用点语法：
bday.person
要获取生日日期：
bday.date
这同样适用于Web服务器返回的一个JSON对象。假设服务器返回了一个JSON对象data：
var data={firstname:'Frank',lastname:'Smith',phone:'503-555-1212'}
在回调函数中可以访问firstName或lastName的值：
data.firstName
data.lastName
回调函数的代码为：
function processContacts(data) {
   var infoHTML='<p>Contact: '+data.firstName;
   infoHTML+=' '+data.lastName+'<br />';
   infoHTML+=' Phone: '+data.phone+'</p>';
   $('#info').html(infoHTML);
}

2)复杂的JSON对象：

可以把JSON对象作为JSON对象中的值，即JSON嵌套，从而创建复杂的信息集合。
比如，向contacts.php服务器发送请求以返回多个联系人的信息：
$.getJSON('contacts.php','limit=2',processContacts);
服务器返回两个联系人的信息：
var data={contact1:{firstname:'Frank',lastname:'Smith',phone:'503-555-1212'},
contact2:{firstname:'Frank',lastname:'Smith',phone:'503-555-1212'}}
要返回第一个联系人的名字：
data.contact1.firstName
jQuery提供了一个函数遍历JSON对象中的每个项目。基本结构为：
$.each(JSON, function(name,value){
});
给.each()函数传递JSON对象以及一个匿名函数，这个匿名函数接收JSON对象中的每个项目的键和值。示例：
$.getJSON('contacts.php','limit=2',processContacts);
function processContacts(data) {
   var infoHTML="";
   $.each(data,function(contact,contactInfo) {
      infoHTML+='<p>Contact: '+contactInfo.firstName;
      infoHTML+=' '+contactInfo.lastName+'<br />';
      infoHTML+='Phone: '+contactInfo.phone+'</p>';
   });  //end of each()
   $('#info').html(infoHTML);
}
Each()函数接收JSON对象作为其第一个参数，接收一个匿名函数作为其第二个参数

3)XML处理：

可扩展标记语言XML是一种数据结构，用于存储和交换数据。XML中的所有标记都是自定义的，遵守W3C规范。XML成为应用之间最为广泛的数据交换方法。PHP有多个类和函数可用于处理XML文档，jQuery可用于解析客户端上的XML。
$(xml).find('store').each(function() {
   //code
});

4.服务器端PHP的处理：

1)确认是ajax请求：

if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&  $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
   echo "Request successful.";
} else {
   echo "This is not a ajax request";
}
浏览器在发送到服务器的每个请求中都会发送HTTP头部，ajax请求的头部会加入X- Requested-With，值为XMLHttpRequest。超级全局变量_SERVER包含随请求发送的头部。

5.ajax()函数：

jQuery使得Ajax的使用更加简单。jQuery提供了几个函数处理来自服务器的数据以及将数据发送到服务器，包括.load()、.post()、.get()。jQuery还包括一个特定的Ajax函数，命名为.ajax()。

使用.ajax()函数可以设置几个参数，包括调用哪个HTTP方法、超时以及错误处理。基本语法为：
$.ajax({
   parameter:value
});
可以向该函数传递若干parameter:value对，不过通常情况下会指定方法、URL和一个回调函数，常见还有指定返回类型、是否缓存响应，被传递到服务器的数据以及错误发生时怎么处理。示例：
$.ajax({
   url:"testajax.aspx",
   success:function(date) {
     alert(“Successful load");  
  }
});
处理。示例：
$.ajax({
   url:'process.php',
   method:'post',
   data:$('form:first').serialize(),
   dataType:'html',
   success:function(reponse) {
     $('#information').hide();  
     $('#response').html(response);  
  }
});
.ajaxSetup()函数允许为Ajax相关参数设置默认值，比如缓存、方法以及错误处理等。
jQuery还包括一个.getJSON()函数，具体处理来自服务器的JSON编码的数据，相当于调用具有额外参数dataType:'json'的.ajax()函数。示例：
对于包含几个州的JSON编码：
[“Wisconsin","California","Cororado","Illinois","Minnesota"]
假设在本地服务器调用json.php文件时返回JSON编码的数据，下述代码使用.ajax()函数获取数据，并在成功时调用一个showStates函数：
$.ajax({
   type:"GET",
   url:"json.php",
   dataType:"json",
   success:showStates
});
完整的代码如下：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN
   http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Ajax Test</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="states"></div>
<script type="text/javascript">
$(document).ready(function(){
   $.ajax({
      type:"GET",
      url:"json.php",
      dataType:"json",
      success:showStates
   });
   function showStates(data,states){
      $.each(data,function(item){;
         $(“#states").append(“div"+data[item]+"</div>");
      });
   }
});
</script>
</body></html>
ajax()还有一个cache选项，禁止浏览器缓存。当再次调用请求时，强制向服务器发送请求，而不是从缓存读取数据：
$.ajax({
   url:'someurl.php';
   cache:false;
   success:function(data) {
      //code
   }
});
当使用cache选项且设为false时，jQuery会向URL附加一个下划线键和一个随机数值，这使浏览器认为每个URL都是唯一的，不会缓存该请求。浏览器仅缓存GET请求，而不缓存POST请求，每个POST请求都是一个新请求。
有时需要加载很多js脚本，但多个文件会使加载时间增加。这时可以不用一次加载所有js脚本，在需要的时候再加载，使用.getScript()方法可以实现。示例：
$.getScript('new.js',function());
包括两个参数，一个是要加载的文件名，一个是成功加载后的回调函数。
也可以使用ajax方法来加载js脚本：
$.ajax( {
   url:'new.js',
   dataType:'script',
   success:function() {
      alert('Script loaded');
      addEvents();
   }
});
注意，其中使用数据类型dataType为script。

6.Ajax错误和超时：

.ajax()函数可以优雅地处理错误和超时，在其中使用error参数指定一个错误处理程序。Error参数的值通常是一个回调函数。示例：
$.ajax({
   type:"GET",
   url:"json.php",
   dataType:"json",
   success:successFunction,
   error:errorFunction
});
用于错误处理的回调函数接收三个参数，XMLHttpRequest对象、表示所遇错误的字符串、当例外发生时的exception对象。因此，一个错误处理程序应该接受这三个参数并接着处理结果。示例：
Function errorFunction (xhr,statusMessage,exceptionObj) {
   alert(“An error was encountered"+statusMessage);
}
有必要为一个Ajax请求设置一个超时，可以通过默认的$.ajaxSetup设置一个通用的Ajax超时值，也可以使用timeout参数为任何单独的调用指定一个超时值。示例：
$.ajax({
   type:"GET",
   url:"json.php",
   dataType:"json",
   success:successFunction,
   error:errorFunction,
   Timeout:5000
});
该超时是以ms为单位。
XMLHttpRequest对象有一个abort()方法，用于取消当前的ajax请求。
还有一个ajaxError()方法，可用于附加到HTML元素上，在ajax请求中每次出现错误时执行：
$('#result').ajaxError(function() {
   $(this).html('<span>An error occured.</span>');
});

7.发送数据到服务器：

在Ajax调用中不仅需要接收来自服务器的数据，也需要发送数据到服务器并接收一个响应。可以对.ajax()函数使用data参数以实现这个目的。
可以将数据格式化为以&分隔的key=value对（比如key1=value1&key2=value2）或者映射对{key1:value1,key2:value2}。示例：
$.ajax({
   type:"POST",
   url:"statefull.php",
   dataType:"json",
   success:successFunction,
   error:errorFunction,
   data:"state=WI"
});

8.其他重要选项：

·async选项：默认设置true，当Ajax事务被发送、接收和处理时通知脚本是否应该等待（阻止浏览器中的进一步输入）。当设置为true时，Ajax事务被异步处理，所以不会阻止。
·cache选项：多少情况下默认为true，控制jQuery是否缓存Ajax事务。当被接收的数据不经常改变时，这个很有用，因为缓存加速了交易。不过当应用程序正在使用服务器上已经发生改变的旧缓存数据时，缓存能够导致问题。