HotHeart写的Ajax类使用实例

关于XmlHttpRequest类的使用说明

 

1.  Ajax类功能描述:

实现xmlhttprequest对象的定义,参数的设置,请求的发送,返回值的处理.对于调用的过程是参数化的,使用者只要了解参数调用的规则就可以了.

 

2.  类说明:

  参数:

      method  -  请求方法，字符串，POST或者GET，默认为POST

　　　url      -  请求URL，字符串，默认为空

　　　async -  是否异步，true为异步，false为同步，默认为true

　　　content  -  请求的内容，如果请求方法为POST需要设定此属性，默认为空

callback  - 回调函数，即返回响应内容时调用的函数，默认为直接返回，回调函数有一个参数为XMLHttpRequest对象，即定义回调函数时要这样：function mycallback(xmlobj)

  方法:

      方法：send()     -  发送请求，无参数

3.        使用说明

分三个部分

Ø        ajax.js为独立的类文件

Ø        调用的页面写相应的提交或调用的函数,用来进行对ajax对象属性的设置和方法的调用,并通用返回的状态码进行处理.

Ø        服务器端代码 对传递的数据进行处理,处理完毕后返回状态码

3.  调用关键点:

1)       实例化xmlhttp对象: var xmlhttp=new AJAXRequest;

2)       决定发送请求的类型是用Get还是Post xmlhttp.method = "POST/GET",如果是用post请求,请设置一下xmlhttp. Content传递参数属性 xmlhttp.Content=( "key=value")

3)       设置xmlhttp.url属性指定处理请求的地址xmlhttp.url =  "Default.asp"

4)       回调函数处理:使用xmlobj.requestText属性获得服务器端返回的值,在这里也可调用相关的函数.

Ø        xmlhttp.callback=function(xmlobj) {

Ø        document.write(unescape(xmlobj.responseText));}

5)       发送请求xmlhttp.send(null) 如果是使用post请求的话,则xmlhttp.send()即可

6)       对于参数的输入传递使用,服务端输出的内容使用secape进行编码,返回获取时使用unescape函数进行解码即可.以下是调用的实例过程.

 

4.        简单的使用实例

Demo.html 调用代码:代码演示了简单的发送请求的过程

 1<script type="text/javascript" src="ajaxrequest.js"></script>
 2<script type="text/javascript">
 3var xmlhttp=new AJAXRequest;    // 创建AJAX对象
 4xmlhttp.method="get";   
 5// xmlhttp.method="POST";        
 6//xmlhttp.content=("type=12")
 7xmlhttp.url="default.asp"  // URL为default.asp
 8// 设置回调函数，输出响应内容
 9xmlhttp.callback=function(xmlobj) {
10     document.write(unescape(xmlobj.responseText));}
11xmlhttp.send(null);    // 发送请求,如果是post方法,使用xmlhttp.send();
12</script>
13

default.asp 处理请求,并返回结果:页面来点简单的内容来响应客户端的请求

 1<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
 2<%
 3    dim stype
 4    stype = request.form("type")
 5    if stype = "" then
 6    response.write "这是服务器端产生的代码"
 7    else
 8        response.write escape("这是服务器端返回的数据-" & stype)
 9    end if
10%>
11

Ajax.js类源码

 1function AJAXRequest() {
 2    var xmlObj = false;
 3    var CBfunc,ObjSelf;
 4    ObjSelf=this;
 5    try { xmlObj=new XMLHttpRequest; }
 6    catch(e) {
 7        try { xmlObj=new ActiveXObject("MSXML2.XMLHTTP"); }
 8        catch(e2) {
 9            try { xmlObj=new ActiveXObject("Microsoft.XMLHTTP"); }
10            catch(e3) { xmlObj=false; }
11        }
12    }
13    if (!xmlObj) return false;
14    this.method="POST";
15    this.url;
16    this.async=true;
17    this.content="";
18    this.callback=function(cbobj) {return;}
19    this.send=function() {
20        if(!this.method||!this.url||!this.async) return false;
21        xmlObj.open(this.method,this.url,this.async)
22        if(this.method=="POST") xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
23        xmlObj.onreadystatechange=function() {
24            if(xmlObj.readyState==4) {
25                if(xmlObj.status==200) {
26                    ObjSelf.callback(xmlObj);
27                }
28            }
29        }
30        if(this.method=="POST") xmlObj.send(this.content);
31        else xmlObj.send(null);    }
32}
33

调用起来不是很复杂,这里有使用post,get方法传递的例子,可惜我不知道如何上传别人可以看的附件,如果要的话,请把邮箱给我
此文感谢:HotHeart给以的ajax源码支持.