AJAX学习笔记

从下面这个简单的AJAX实例中，一步一步来分析代码每一部分的作用及功能，并对相关的名词进行了解释。

一个简单的AJAX实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
    var xmlhttp;
    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("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
    xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>
</html>

1.创建一个XMLHttpRequest对象

XMLHttpRequest是什么？

XMLHttpRequest是AJAX技术的核心，用于在后台与服务器交换数据。XHR对象为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器取得更多信息。
我们可以通过使用XHR对象获取新数据，再通过DOM将新数据插入到页面中。

`XMLHttpRequest`适用的版本

所有现代浏览器均支持XMLHttpRequest对象（IE5和IE6使用ActiveXObject）。

创建XHR

var xmlhttp;
if(window.XMLHttpRequest){  //兼容大部分浏览器
    xmlhttp = new XMLHttpRequest();
}else{  //兼容IE5，IE6
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

2-1.向服务器发送请求

在使用XMLHttpRequest对象时，要调用的第一个方法是open()

xmlhttp.open("GET" , "ajax_info.txt" , true);
xmlhttp.send(null);

调用open()方法并不会真正的发送请求，而只是启动一个请求以备发送。要发送特定的请求，必须调用send()方法。
Send()方法接受一个参数，即要作为请求主体发送的数据。如果不需要请求主体发送数据，则必须传入null，因为这个参数对有些浏览器来说是必须的。

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。

string：仅用于 POST 请求

GET和POST的选择
与POST相比，GET更简单更快，并且在大部分情况下都能用。
然而在以下情况中，请使用POST请求。
1.无法使用缓存文件（更新服务器上的文件或数据库）
2.向服务器发送大量数据（POST没有数据量限制）
3.发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

3-1.服务器响应

在收到响应后，响应的数据会自动填充XHR对象的以下几个属性。
- responseText：作为响应主体被返回的文本。
- responseXML：如果来自服务器的响应是XML，则需要作为XML对象进行解析，此属性中将保存包含着响应数据的DOM文档。
- status：响应的HTTP状态的说明
- statusText：HTTP状态的说明
responseText
responseText 属性返回字符串形式的响应，因此您可以这样使用：

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

responseXML 属性
假设我们要获取book.xml文件中的artist内容：

var xmlDoc=xmlhttp.responseXML;
var txt="";
var x=xmlDoc.getElementsByTagName("ARTIST");
for (var i=0;i<x.length;i++)
  {
      txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  }
document.getElementById("myDiv").innerHTML=txt;

3-2.onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发onreadystatechange 事件。
下面是XMLHttpRequest 对象的三个重要的属性：

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

在接收到响应后，第一步是检查status属性，以确定响应已经成功返回。一般来说，可以将HTTP状态代码为200作为成功的标志。
但当我们需要发送异步请求时，还得检测XHR对象的readyState属性，才能让JavaScript继续执行而不必等待响应。
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

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

与服务器进行交互

以上介绍的都是以url为txt文件的情况，当我们需要与服务器交互，通过相应的参数获取相关信息时，可以通过以下方式来编写。

当服务器为ASP/PHP编写时，我们用以下这个例子来解释如何与服务器之间通信。

function showHint(str)
{
  var xmlhttp;
  if (str.length==0)
  { 
    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/gethint.php?q="+str,true);
  xmlhttp.send();
}

当输入框为空时(str.length==0)，输入框没有内容，无任何信息可以返回，该函数清空 txtHint 占位符的内容，并退出函数。
如果输入框不为空，showHint() 函数执行以下任务：
- 创建 XMLHttpRequest 对象
- 当服务器响应就绪时执行函数
- 把请求发送到服务器上的文件
- 请注意我们向 URL 添加了一个参数 q （带有输入框的内容）
发送的url为/try/ajax/gethint.php?q="+str，q是与服务器端交互的参数，服务器端可以通过获取q的值，来得到输入框中输入的内容，然后向客户端返回检索结果到responseText中。