Ajax入门学习

AJAX是一种在无需重新加载整个页面情况下，能够更新部分网页的技术

什么是AJAX

• AJAX = 异步JavaScript + XML
• AJAX 是一种用于创建快速动态网页的技术。
• 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。-- 这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
• 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
• 有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

创建XMLHttpRequest对象

XMLHttpResquest是AJAX的基础

XMLHttpRequest对象

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

创建XMLHttpRequest对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

• 现代浏览器创建XMLHttpResquest对象的语法：var xmlhttp = new XMLHttpResquest;
• 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：var xml = new ActiveXObject("Mircosoft.XMLHTTP);

向服务器发送请求

XMLHttpRequest 对象用于和服务器交换数据

向服务器发送请求

如果需要向服务器发送请求，需要使用XMLHttpRequest对象的open()和send()方法

xmlhttp.open("method","url","async");
xmlhttp.send();

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

POST与GET比较

get更简单更快，并且大部分情况下都可以使用
然而，在以下情况下，请使用POST请求：

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

服务器响应

服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性

属性	描述
responseText	获得字符串形式的响应数据
responseXML	获得XML形式的响应数据

responseText属性

如果来自服务器的响应并非 XML，请使用 responseText 属性。
使用方式：document.getElementById("").innerHtml = xmlhttp.responseText;

responseXML属性

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析。
使用方式：

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

onreadystatechange事件

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

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

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

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