首页 > 代码库 > 封装基本的Ajax请求

封装基本的Ajax请求

一、说明  

   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="http://www.mamicode.com/js/ajax.js" /*src为js文件所在的路径*/ type="text/javascript" language="javascript"></script>

就可以调用ajax()方法了,例如:

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

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

});

 

附:未完待续......

 

封装基本的Ajax请求