封装基本的Ajax请求

浏览数：34 / 时间：2015年06月09日

一、说明

Ajax请求能够对页面进行局部的更新，而不用重新刷新当前浏览的整个页面，使用户体验更好。

实现Ajax请求的方法可以通过JavaScript代码向服务器发出请求信息，客户端浏览器接收到返

回的Ajax数据，对页面进行局部的刷新。在这个实现过程中，XMLHttpRequest对象是Ajax 的核心。

虽然jQuery已经将Ajax请求封装得很好了，我们可以非常方便的使用jQuery库提供的方法($.get(),

$.post(),$.ajax()等) 实现Ajax请求，但是本着学习的目的，要做到知其然，并且知其所以然，有必要

自己去通过JS代码实现一下基本的Ajax请求的，并且封装其操作。我要将的封装Ajax请求其实就是围绕着

XMLHttpRequst对象属性和方法进行实现的。

二、Ajax请求的实现过程

a.创建XMLHttpRequest对象xmlrequest;

b.打开请求xmlrequest.open(...);

c.设置状态改变时调用的JavaScript函数;

状态readyState属性代码如下：

0：代表未初始化的状态。创建了一个XMLHttpRequest对象，但尚未初始化

1：代表连接状态。已经调用了open方法，并且已经准备好发送请求

2：代表发送状态。已经调用了send方法发出请求，但尚未得到响应

3：代表正在接收状态。已经接收了HTTP响应的头信息，正在接收响应正文内容

4：代表已加载状态。此时响应内容已完全被接收 d.发送请求xmlrequest.send().

三、Ajax实现代码

//封装的ajax请求

参数：
method:请求方法，一般为："POST" 或 "GET"
url:请求的URL路径
onsuccess:该参数为一个方法，该方法在请求成功之后执行

function ajax(method,url, onsuccess) {
    var xmlrequest = window.XMLHttpRequest ?         //创建对象
                         new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP‘);
    xmlrequest.open(method, url, true);              //打开请求
    xmlrequest.onreadystatechange = function () {    //设置状态改变时调用的方法
        if (xmlrequest.readyState == 4) {
            if (xmlrequest.status == 200) {
                onsuccess(xmlrequest.responseText);//请求成功，onsuccess方法一般是
            }	                                   //要实现页面的局部刷新功能
            else {
                alert("请求发生错误：" + xmlrequest.status);
            }
        }
    };
    xmlrequest.send();       //发送请求
}

这样一个基本的ajax请求代码的封装的就完成了，为了更方便的使用这个封装好的方法，我们可以将这个方法写到一个

ajax.js文件中，这样当要使用这个方法的使用，只需要添加：

<script src="js/ajax.js" /*src为js文件所在的路径*/ type="text/javascript" language="javascript"></script>

就可以调用ajax()方法了，例如：

ajax("POST","/Home/Index",function (resText){

alert("Ajax请求数据："+resText);

});

附：未完待续......

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

封装基本的Ajax请求