初识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);
            }
        }
        
    }
}

推荐阅读更多精彩内容