Web---Ajax（异步的JavaScript和Xml）

学习前不妨看一下隐藏帧技术，Ajax原理其实就是采用隐藏帧技术隐藏帧技术入门

AJAX

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

AJAX应用

• 运用XHTML+CSS来表达资讯；

• 运用JavaScript操作DOM（Document Object Model）来执行动态效果；

• 运用XML和XSLT操作资料;

• 运用XMLHttpRequest或新的Fetch API与网页服务器进行异步资料交换；

• 注意：AJAX与Flash、Silverlight和Java Applet等RIA技术是有区分的。

AJAX核心

XMLHttpRequest 对象

• 所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
• XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建 XMLHttpRequest 对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象；老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象。

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

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

AJAX - 向服务器发送请求请求

GET 还是 POST？

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

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

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

自定义一个Ajax函数对象，带有get()和post()方法

//定义一个Ajax 函数
function Ajax() {
	//定义一个get方法
	this.get=function(url,success,failure) {
		//获取 XMLHttpRequest对象
		var xhr = null;
		//兼容常见浏览器
		if( XMLHttpRequest ){ //高版本IE、火狐、谷歌 等
			xhr = new XMLHttpRequest();
		}else{ //低版本IE 等
			xhr = new ActiveXObject("Microsoft.XMLHttp");
		}
		//设置请求方式
		xhr.open("GET",url,true);
		
		//设置回调函数
		xhr.onreadystatechange=function(){
			if(xhr.readyState == 4){ //接收完成
				if( xhr.status == 200 ){ //成功响应
					success(xhr.responseText); //回调成功方法
				}else{
					failure(xhr.status) //回调失败方法
				}
				
			}
		}
		//开始请求
		xhr.send(); //GET不需要请求体，参数在url中
	}
	
	//定义个post方法
	this.post=function(url,data,success,failure){
		//获取 XMLHttpRequest对象
		var xhr = null;
		//兼容常见浏览器
		if( XMLHttpRequest ){ //高版本IE、火狐、谷歌 等
			xhr = new XMLHttpRequest();
		}else{ //低版本IE 等
			xhr = new ActiveXObject("Microsoft.XMLHttp");
		}
		//设置请求方式
		xhr.open("POST",url,true);
		//设置回调函数
		xhr.onreadystatechange=function(){
			if(xhr.readyState == 4){ //接收完成
				if( xhr.status == 200 ){ //成功响应
					success(xhr.responseText); //回调成功方法
				}else{
					failure(xhr.status) //回调失败方法
				}
				
			}
		}
		//设置请求头---post 必须设置请求头
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		//发送请求
		xhr.send(data); //post 需要请求体
	}
	
}

完整代码链接