AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

• AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
• AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
• AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。

XMLHttpRequest 是 AJAX 的基础。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

为了应对所有的现代浏览器，包括 IE5 和 IE6，如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject 。

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
open(method,url,async) ：规定请求的类型、URL 以及是否异步处理请求。

• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）
• send(string)：将请求发送到服务器。string：仅用于 POST 请求

在以下情况中，请使用 POST 请求：
1.无法使用缓存文件（更新服务器上的文件或数据库）
2.向服务器发送大量数据（POST 没有数据量限制）
3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

为了避免这种得到缓存的结果，请向 URL 添加一个唯一的 ID：

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

open() 方法的 url 参数是服务器上文件的地址，该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。

XMLHttpRequest 对象如果用于 AJAX ，其 open() 方法的 async 参数必须设置为 true。当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数。

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。responseText 获得字符串形式的响应数据。如下：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML 获得 XML 形式的响应数据。作为了解即可。

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

onreadystatechange存储函数（函数名），当 readyState 属性改变时，会调用该函数。readyState：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status： 200: "OK" 404: 未找到页面

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

注意： onreadystatechange事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

服务器常用的状态码及其对应的含义如下：

200：服务器响应正常。
304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。
400：无法找到请求的资源。
401：访问资源的权限不够。( basic 认证)
403：没有权限访问资源。
404：需要访问的资源不存在。
405：需要访问的资源被禁止。
407：访问的资源需要代理身份验证。
414：请求的URL太长。
500：服务器内部错误。
502——服务器暂时不可用，有时是为了防止发生系统过载
503——服务器过载或暂停维修

完整例子：

<script>
function showCustomer(str)
{
  var xmlhttp;    
  if (str=="")
  {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);
  xmlhttp.send();
}
</script>

AJAX在jQuery中的应用：
jQuery在全局对象jQuery（也就是$）绑定了ajax()函数，可以处理AJAX请求。ajax(url, settings)函数需要接收一个URL和一个可选的settings对象，常用的选项如下：

• async：是否异步执行AJAX请求，默认为true，千万不要指定为false；
  method：发送的Method，缺省为'GET'，可指定为'POST'、'PUT'等；
• contentType：发送POST请求的格式，默认值为'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定为text/plain、application/json；
• data：发送的数据，可以是字符串、数组或object。如果是GET请求，data将被转换成--query附加到URL上，如果是POST请求，根据contentType把data序列化成合适的格式；
• headers：发送的额外的HTTP头，必须是一个object；
• dataType：接收的数据格式，可以指定为'html'、'xml'、'json'、'text'等，缺省情况下根据响应的Content-Type猜测。

对常用的AJAX操作，jQuery提供了一些辅助方法。get()方法，可以这么写：

var jqxhr = $.get('/path/to/resource', {
    name: 'Bob Lee',
    check: 1
});

第二个参数如果是object，jQuery自动把它变成query string然后加到URL后面，实际的URL是：/path/to/resource?name=Bob%20Lee&check=1

post()传入的第二个参数默认被序列化为application/x-www-form-urlencoded：

var jqxhr = $.post('/path/to/resource', {
    name: 'Bob Lee',
    check: 1
});

实际构造的数据name=Bob%20Lee&check=1作为POST的body被发送。

由于JSON用得越来越普遍，所以jQuery也提供了getJSON()方法来快速通过GET获取一个JSON对象：

var jqxhr = $.getJSON('/path/to/resource', {
    name: 'Bob Lee',
    check: 1
}).done(function (data) {
    // data已经被解析为JSON对象了
});

案例:

$(function(){
    $('#send').click(function(){
         $.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json",
             success: function(data){
                         $('#resText').empty();   //清空resText里面的所有内容
                         var html = ''; 
                         $.each(data, function(commentIndex, comment){
                               html += '<div class="comment"><h6>' + comment['username']
                                         + ':</h6><p class="para"' + comment['content']
                                         + '</p></div>';
                         });
                         $('#resText').html(html);
                      }
         });
    });
});