AJAX基础

没事的时候总喜欢泡技术社区,记得在2005年的时候社区里突然冒出个AJAX的新名词,开始还以为又出来什么新语言了.是不是又要掀起技术革命，感叹程序员的命真的是苦啊，一项技术还没有学好，新的技术又随之出现，于是时常会想起老了以后学不动了怎么办？开始见到AJAX并没有引起我对它的注意，后来经过时间不是很长好像这东西发展还真的挺快的。各论坛讨论的呼声越来越大，很多人把它说的神乎其神，在众多人高呼WEB2.0时代到来之时，AJAX也似乎有取代传统WEB开发的趋势，于是不得不在闲下来的时候对AJAX进行必要得了解。

        很早就知道AJAX其实就是html + javascript + xml + dom + Dhtml 说白了就是对老技术得灵活运用，偏偏老技术还没有学精谈何灵活运用呢，为了使技术能够得到提高也为了能够灵活运用AJAX跟随技术潮流，计划在闲着的时候学习一下ajax。

        有空的时候将学习的笔记发布并整理成BLOG文章,希望得到大家的帮助!共同提高!

Ajax 应用程序所用到的基本技术
1.html
    组成web页面所用到的基本元素
2.javascript
    javascript代码是AJAX应用程序核心的代码，帮助ajax程序改进与服务器通讯以实现不一样的用户体验
3.Dynamic HTML
    用于动态更新web页面
4.DOM（文档对象模型）
    用于通过javascrip代码处理HTML或服务器返回的XML

javascript与服务器端通信的最核心的对象
xmlHttp对象:传送XML格式数据的超文本传输协议
实际上XMLHTTP传输的数据可以是XML格式数据，也可以是字符串，流，或者一个无符号整数数组。还可以是URL的参数,它下达的结果可以是XML格式数据，也可以是字符串，流，或者一个无符号整数数组。

调用步骤
1、创建XMLHTTP对象
2、打开与服务端的连接，同时定义指令发送方式，服务网页(URL)和请求权限等。  
3、发送指令。 
4、等待并接收服务端返回的处理结果。 
5、释放XMLHTTP对象

方法
open(数据传送方式(GET/POST/HEAD),服务器URL,是否异步执行,[用户名],[口令])
如：
open("GET","http://www.sohu.com",true)

send(content)
可以是XML格式数据，也可以是字符串，流，或者一个无符号整数数组。也可以省略，让指令通过Open方法的URL参数代入。
如：send(null);

setRequestHeader(HTTP 头,HTTP 头值)
如：xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

abort()取消当前 HTTP 请求

getAllResponseHeaders ()
从响应信息中检索所有的HTTP 头字段

getResponseHeader(HTTP 头)
从响应信息正文中获得一个 HTTP 标头值

属性
onreadystatechange：用以状态改变后所要作的处理的事件句柄。
readyState 异步操作的状态：未初始化(0)，正在加载(1)，已加载(2)，交互(3)，已完成(4)
responseBody：返回为无符号整数数组。
responseStream：返回为IStream流。
responseText ：返回字符串。
responseXML：返回为XML格式数据。
status：服务器返回的HTTP状态码
statusText ：服务器HTTP响应行状态

说明
1.同步和异步
        同步状态下发送http请求后，只有当客户端接收到来自服务端的全部应答数据或协议栈超时返回！反之异步状态下，直接返回。在异步方式下数据包一旦发送完毕就结束send进程客户端执行其他的操作,而在同步方式下客户端要等到服务器返回确认消息后才结束send进程。实际运用中我们根据实际情况使用同步或异步，注意了如果设为同步状态可能因为服务器返回数据量大或响应慢而导致不必要的长时间等待！

2.POST和GET
        用"POST"方式发送数据.可以大到4MB "GET"只能256KB

创建一个XMLHTTP对象
Microsoft Internet Explorer浏览器使用MSXML解析器处理XML，MSXML实际上有两种不同的版本xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
对于非 Microsoft 浏览器(Mozilla、Firefox、Safari、Opera):
xmlHttp = new XMLHttpRequest();

function getXmlHttp()
{
 var xmlHttp = null; 
 
 if ( window.XMLHttpRequest)
 {
  xmlHttp = new XMLHttpRequest();
  if (xmlHttp.overrideMimeType)
   xmlHttp.overrideMimeType("text/xml");
 }
 else if ( window.ActiveXObject)
 {
  try
  {
   xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch(e)
  {
   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
 }

 
 if ( !xmlHttp)
 {
  window.alert("XmlHttp not be Supported!");  
 }
 
 return xmlHttp; 
}

下面的代码说明了如何从创建到初始化XMLHTTP到发送数据的过程，并指定处理返回数据的事件句柄

var xmlHttp = null;
  
function callServer(url)
{
 xmlHttp = getXmlHttp();
 xmlHttp.onReadyStateChange = setPage;
 xmlHttp.open("GET",url,true);
 xmlHttp.send();   
 document.getElementById("loading").innerHTML = "正在加载...";
}

得到返回数据并更新页面
function setPage()
{   
 switch(xmlHttp.readyState)
 {
  case 0:
   document.getElementById("loading").innerHTML = "正在初始化...";
   break;
  case 1:
   document.getElementById("loading").innerHTML = "正在加载...";
   break;
  case 2:
   document.getElementById("loading").innerHTML = "已加载完成...";
   break;
  case 3:
   document.getElementById("loading").innerHTML = "正在接收数据...";
   break;
  case 4:
   document.getElementById("loading").innerHTML = "已完成!";
   break;
 }     
  
 if ( xmlHttp.readyState == 4)
 {
  if ( xmlHttp.status == 200)
  { 
   document.getElementById("content").innerText = xmlHttp.responseText;
  }
  xmlHttp.abort();    
 } 
}

HTML ：

<input name="url" id="url" type="text" value="http://www.sohu.com"><input type="button" onclick="callServer(document.getElementById('url').value)" value="get data">&nbsp;<BR>
<div id="loading" style="color:red; font-size:12px;"></div>            
<span id="content"></span>