一个比较方便通用的自定义Ajax函数

开发 前端
这里介绍的一个自定义Ajax函数,是作者自己摸索出来的。在JQuery调用中可能会出现undefinde的错误,希望大家能热烈讨论下。

function Ajax()  
{  
    var len=arguments.length;  
    var type,url,postdata,fn;  
    if(len<2)  
    {  
   alert('没有2个一下参数的重载,至少必须指定请求类型(type)和url地址!');  
   return;  
    }  
    type=arguments[0];  
    url=arguments[1];  
    if(len>2)  
    {  
   var args=arguments[2];  
   if(typeof(args)=="string")  
   {  
  postdata=args;  
   }  
    }  
    var xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();  
    xhr.open(type,url,true);  
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
    fn = arguments[len-1];  
    xhr.onreadystatechange = function (){  
   if(xhr.readyState==4)  
   {  
 if(xhr.status==200)  
 {  
 if(typeof(fn)=="function")  
fn(xhr.responseText);  
 }  
 else 
 {  
   alert("你所请求的页面有异常");  
 }  
   }  
    };  
    xhr.send(postdata);  
 }  
 
 function Test()  
 {  
    Ajax("get","/WebRoot/servlet/TestAjax");  
    Ajax("get","/WebRoot/servlet/TestAjax",function (date){  
   alert("Get Date:\n"+date);  
    });  
    Ajax("post","/WebRoot/servlet/TestAjax");  
    Ajax("post","/WebRoot/servlet/TestAjax",function (date){  
   alert("Post Date:\n"+date);  
    });  
    Ajax("post","/WebRoot/servlet/TestAjax","username=jonllen&pwd=123456",function (date){  
   alert("Post Date:\n"+date);  
    });  
 } 

function Ajax()
{
    var len=arguments.length;
    var type,url,postdata,fn;
    if(len<2)
    {
   alert('没有2个一下参数的重载,至少必须指定请求类型(type)和url地址!');
   return;
    }
    type=arguments[0];
    url=arguments[1];
    if(len>2)
    {
   var args=arguments[2];
   if(typeof(args)=="string")
   {
  postdata=args;
   }
    }
    var xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
    xhr.open(type,url,true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    fn = arguments[len-1];
    xhr.onreadystatechange = function (){
   if(xhr.readyState==4)
   {
 if(xhr.status==200)
 {
 if(typeof(fn)=="function")
fn(xhr.responseText);
 }
 else
 {
   alert("你所请求的页面有异常");
 }
   }
    };
    xhr.send(postdata);
 }

 function Test()
 {
    Ajax("get","/WebRoot/servlet/TestAjax");
    Ajax("get","/WebRoot/servlet/TestAjax",function (date){
   alert("Get Date:\n"+date);
    });
    Ajax("post","/WebRoot/servlet/TestAjax");
    Ajax("post","/WebRoot/servlet/TestAjax",function (date){
   alert("Post Date:\n"+date);
    });
    Ajax("post","/WebRoot/servlet/TestAjax","username=jonllen&pwd=123456",function (date){
   alert("Post Date:\n"+date);
    });
 }

就只有一个函数Ajax,调用的例子是Test(),由于JavaScript的函数申明不需要固定参数,能实现动态获取传递,利用这点我们能实现类似与C#或Java里面的重载,并且我们能根据传入参数的类型和数量进行特别的判断,而执行不同的操作。上述Ajax函数里就用到判断当***一个传入的参数是函数类型的时候我们就认为是这个是Ajax回调函数,如果是字符串类型的话就认为是postData,这样我们就能实现动态传递可选参数,也就是说你可以加上function(data){alert(date);}就会自动在Ajax加载返回的回调该函数,如果没有就不调用。

在JQuery里面,我们大多会用到对象的prototype属性,并也可实现可选参数默认构造函数来实例对象,形如:

var Ajax = {    
    url : location.href,  
    type : "post",  
    send : function ()  
    {  
   alert (this.type);  
    }  
};  
Ajax.send();  
alert( Ajax.url ); 

var Ajax = {
 url : location.href,
 type : "post",
 send : function ()
 {
  alert (this.type);
 }
};
Ajax.send();
alert( Ajax.url );    于是,JQuery便能这样调用Ajax:

Java代码

$.ajax({   
  type: "GET",  
  url: "test.js",  
  dataType: "script" 
});  

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});

不过我对整个JQuery框架的源码还有一些疑问,当我想自己来实现像JQuery这样来调用的Ajax请求函数的时候遇到了一些问题,我想在对象构造函数里面再加上一层构造函数缺省值,却获得不了构造函数参数的值,调用不报什么错误,就是获取到的值都是undefinde,可能是我还未了解JavaScrit里面一些更深奥的东西吧。。。^_^

上面我写的Ajax函数也能动态判断指定参数的功能,实现很简单就是根据传入的arguments数量和类型来判断的,所以我们在调用的时候能像在Test里面有多种参数调用的方式,方便实用。当我们不需要用到整个JQuery框架或只要用Ajax的时候就嵌入这一段函数就有了,更重要的是自己写的不会造成跟其他的产生冲突。

以上我写的Ajax的函数在IE6、FF2.0、Chrome内测试都正常,请求的服务器端是Servlet,都能正常的返回结果。注意:当post过去有中文的时候postData数据***先单个针对中文进行encodeURI(postData)URL编码,Ajax请求post的时候都是以UTF-8编码格式发送的,确保服务器端和客户端编码一致,这样就不会出现中文乱码问题。

【编辑推荐】

  1. 使用Java开发Google APP Engine初试
  2. 横向技术分析C#、C++和Java优劣
  3. Java开发者需要注意的十条法则
责任编辑:彭凡 来源: javaeye
相关推荐

2021-01-06 05:25:56

项目Springboot应用

2012-11-19 11:07:42

IBMdw

2022-06-06 09:28:36

ReactHook

2010-10-25 16:05:07

oracle自定义函数

2021-03-09 15:23:45

鸿蒙HarmonyOS应用开发

2020-09-18 10:12:24

KotlinTCP网络协议

2010-09-14 16:47:23

SQL自定义函数

2009-09-03 10:08:27

JavaScript自

2009-02-10 12:55:39

自定义控件AJAX.NET

2010-05-11 13:16:21

Unix awk

2017-06-20 12:48:55

React Nativ自定义模块Note.js

2010-09-14 16:59:39

SQL自定义函数

2021-06-16 17:46:55

函数指针结构

2023-10-31 09:10:39

2018-03-16 08:41:16

Oracle存储函数

2011-05-17 13:32:04

oracle

2015-03-26 11:51:22

2010-09-06 15:41:34

SQL函数存储过程

2015-02-12 15:33:43

微信SDK

2021-07-15 16:41:21

Swift查询函数
点赞
收藏

51CTO技术栈公众号