AJAX是什么？

最近对于Ajax比较感兴趣，所以就学习了一番，学习的一些总结和想法呈现给大家，以供大家学习的时候参考。

AJAX概述

Ajax全称是Asynchronous JavaScript and XML，也就是异步的 JavaScript 和 XML。

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

AJAX XHR

XHR 即 XMLHttpRequest  用于在后台与服务器交换数据。

//创建XHR对象的方法
variable = new XMLHttpRequest();

由于IE5和IE6不支持XHR，我们创建XHR的方法改成：

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

//当xmlhttp处于 onreadystatechange 的状态时执行函数

//此函数为通用函数，只需要修改"#id"就可以用
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }//open()函数xmlhttp.open("GET","/ajax/test1.txt",true);//send()函数xmlhttp.send(); 
   
 点评：xmlhttp.open()函数有三个参数：method,url,async,规定请求的类型、URL 以及是否异步处理请求。 
  

• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）

          xmlhttp.send(string)函数：将请求发送到服务器。

             string：仅用于 POST 请求

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

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

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

点评：setRequestHeader( header, value)：向请求添加 HTTP 头。

• header: 规定头的名称
• value: 规定头的值

AJAX  服务器响应

通过XMLHttpRequest 对象的 responseText 或 responseXML 属性来获得服务器的返回数据

AJAX  onreadystatechange 事件

xhr对象有三个重要的属性：

1、onreadystatechange  存储函数，当xhr状态readyState发生改变时，便调用该函数。

2、readyState  存储xhr的状态，从0到4： 

0-请求未初始化

1-服务器连接已建立

2-请求已接收

3-请求处理中

4-请求已完成，且响应已就绪

3、Status   200: "OK";  404: 未找到页面

AJAX  实例

1、Google Suggest 搜索引擎推荐

 
     
 
     
请在下面的输入框中键入字母（A - Z）：
 
     
 姓氏：
 
     
 
     
建议：
 
 
     
 
     
 
    

显示结果：如下图;
 
     
 
     

 
     
点评：这个案例是在用户抬起键盘时向后台发送xhr，实现实时的查询功能。我们注意到（※）onkeyup属性绑定了一个函数，每次键盘抬起来的时候都执行这个函数，传入参数为此文本框的输入值this.value。xmlhttp.open("GET","/ajax/gethint.asp?q="+str,true);请求url中追加了this.value。
 
     
 
    

2、Ajax 请求数据库

 
     
 
     
	
 请选择一位客户：
 
     
	 
     
		Apple Computer, Inc.
 
     
		BAIDU, Inc
 
     
		Canon USA, Inc.
 
     
		Google, Inc.
 
     
		Nokia Corporation
 
     
		Sony Corporation of America
 
     
	
 
     
	
 
     
	
 
     
客户信息将在此处列出 ...
 
     
 
     
 
     
 
     
 
     
 
     
 显示：如下图 
    

点评：我们注意到程序用了 同样将this.value（选择的值）传参给服务器，来获取数据。xmlhttp.open("GET","/ajax/gethint.asp?q="+str,true);代码几乎相同。

学习告一段落……

后记：因为JSON这种轻量级的数据交换格式的出现，使得通过xml交换数据的用途越来越少，所以在这里我没有深入学习xml的知识，那么我之前写过几篇关于JSON的学习，还是可以参考的……