Ajax： Asynchronous JavaScript and XML （中文翻译：异步JavaScript和XML）
即：用javascript异步形式去操作xml，完成数据交互。

一、第一个Ajax程序

话不多说，先附上一段代码，是请求1.txt里的内容
请求内容

<script>
window.onload = function(){
	oBtn = document.getElementById('btn');

	oBtn.onclick = function(){
		var xhr = new XMLHttpRequest();
		xhr.open('get', '1.txt',true);
		xhr.send();
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4){
				alert(xhr.responseText);
			}
		}
	}
}
</script>
</head>

<body>
	<input type="button" value="按钮" id="btn" />
</body>

结果如下：

注意：
-1.我用的是appserv，和wamp大致一样
-2.给网页命名的时候最好不要出现汉字
-3.访问时直接localhost+自己的文件目录，省略www
下面来讲解一下每一步的操作，我将重点的步骤，注释在代码旁边，请自行理解

oBtn.onclick = function(){
		var xhr = new XMLHttpRequest();  //打开浏览器
		xhr.open('get', '1.txt',true);  //在地址栏输入地址
		xhr.send();                     //提交并发送请求
		xhr.onreadystatechange = function(){//等待服务器返回内容
			if(xhr.readyState == 4){
				alert(xhr.responseText);
			}
		}
	}

二、Ajax流程 - 对象的创建和兼容处理

从上边的代码可以看出，第一步是打开浏览器
打开浏览器我们需要做的重要一步是创建Ajax对象----XMLHttpRequest;( chrome和 firefox 和ie7，8都可以)
注意: ie6以下是

new ActiveXObject(‘Microsoft.XMLHTTP’)

所以为了适应所有浏览器，我们可以将打开浏览器这一步做兼容性处理

1.if-else方法

var xhr = null;
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
} else {
  xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

2.try-catch方法

A.try-catch方法讲解

代码在try中尝试执行这个块中的内容,如果有错误，则会执行catch{}，并且传入错误信息参数
例：

alert(a);
alert('到这里了');
</script>

这段代码会出错，因为没有定义a，我们可以看看错误信息：

但是利用try-catch之后

try {
	alert(a);
} catch (e) {
	alert(1);   //1
}

alert('到这里了');  //到这里了

浏览器会依次弹出 1 和到这里了
注意: e为错误信息

try {
	alert(a);
} catch (e) {
	alert(e);
}

结果：
错误信息

B.try-catch方法兼容处理

try {
	xhr = new XMLHttpRequest();
} catch (e) {
	xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

三、Ajax流程 - open方法和表单

1.open方法

open方法有三个参数：
参一：打开方式
参二：地址
参三：是否异步
-异步:非阻塞前面的代码不会影响后面代码的执行 true
-同步:阻塞前面的代码会影响后面代码的执行 false
在实际过程中我们选取异步，避免堵塞

2.表单

类似的，表单也有三个参数：
表单：数据的提交
参一： action : 数据提交的地址，默认是当前页面
参二： method : 数据提交的方式，默认是get方式
-1.get
把数据名称和数据值用=连接，如果有多个的话，那么他会把多个数据组合用&进行连接，然后把数据放到url?后面传到指定页面
-2.post
参三： enctype : 提交的数据格式，默认为application/x-www-form-urlencoded

注意：

后端数据的接收

$ GET

通过URL传递给该脚本的变量的数组

$ POST

通过HTTP POST方法(表单)传递给该脚本的变量的数组
要求：
-前后台键名和传输方式必须一致
-数据传输方式
-数据获取方式

A.get方法请求

<body>
    <form action="1.get.php">
    	<input type="text" name="username" />
        <input type="text" name="age" />
        <input type="submit" value="提交" />
    </form>
</body>

新建一个文件，名字为1.get.php
以下是php内容：

<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);

$username = $_GET['username'];
$age = $_GET['age'];

echo "你的名字：{$username}，年龄：{$age}";

当输入leo 34 后：

输出为：

B.post方法请求

post方法时，需要注明method为post，并且修改php内的语法

<body>
    <form action="1.post.php" method="post">
    	<input type="text" name="username" />
        <input type="text" name="age" />
        <input type="submit" value="提交" />
    </form>
</body>

修改1.post.php内的语法：

<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);

$username = $_POST['username'];
$age = $_POST['age'];

echo "你的名字：{$username}，年龄：{$age}";

内容和上面一致。

C.REQUEST获取get或者post

无论get或者post都可以利用REQUEST来获取

<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);

$username = $_REQUEST['username'];
$age = $_REQUEST['age'];

echo "你的名字：{$username}，年龄：{$age}";

内容和上面一致。

四、Ajax流程 - 数据的获取

请求状态监控

- onreadystatechange事件

1.readyState属性：请求状态
- 0 (初始化)还没有调用open()方法
-1(载入)已调用send()方法，正在发送请求
-2 (载入完成) send()方法完成，已收到全部响应内容
-3 (解析)正在解析响应内容
-4 (完成)响应内容解析完成，可以在客户端调用了status属性:服务器(请求资源)的状态返回的内容
2. responseText：返回以文本形式存放的内容
3.responseXML ：返回XML形式的内容
4.status : 服务器状态，http状态码（404）

因此我们可以将请求成功进行细致化：

xhr.onreadystatechange = function() {
			
			if ( xhr.readyState == 4 ) {
				if ( xhr.status == 200 ) { 
 //请求已成功，请求所希望的响应头或数据体将随此响应返回。出现此状态码是表示正常状态。
					alert( xhr.responseText );
				} else {
					alert('出错了,Err：' + xhr.status);
				}
			}
			
		}

五、应用中get和post的区别处理

1.get方式

a.会出现缓存，所以要在url？后面加一个时间戳或者随机数

xhr.open(‘get’,‘2.get.php?username=leo&age=30&’ + new Date().getTime(),true);

b.出现乱码

编码encodeURI

xhr.open(‘get’,‘2.get.php?username=’+encodeURI(‘刘伟’)+’&age=30&’ + new Date().getTime(),true);

2.post方式

类似于form，有三个参数

xhr.open(‘post’,‘2.post.php’,true);

post方式，数据放在send()里面作为参数传递
但是在这之前需要利用setRequestHeader声明发送的数据类型,即：

xhr.open('post','2.post.php',true);
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send('username=刘伟&age=30');

注意：
1.post没有缓存问题
2.无需编码

六、附上Ajax的封装

function ajax(method, url, data, success) {
	var xhr = null;
	try {
		xhr = new XMLHttpRequest();
	} catch (e) {
		xhr = new ActiveXObject('Microsoft.XMLHTTP');
	}
	
	if (method == 'get' && data) {
		url += '?' + data;
	}
	
	xhr.open(method,url,true);
	if (method == 'get') {
		xhr.send();
	} else {
		xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
		xhr.send(data);
	}
	
	xhr.onreadystatechange = function() {
		
		if ( xhr.readyState == 4 ) {
			if ( xhr.status == 200 ) {
				success && success(xhr.responseText);
			} else {
				alert('出错了,Err：' + xhr.status);
			}
		}
		
	}
}

初识Ajax之Ajax的原理和封装