初识Ajax之Ajax的原理和封装（一）
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);
}
}
}
}
