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

1.function Ajax()
2.{
3. var len=arguments.length;
4. var type,url,postdata,fn;
5. if(len<2)
6. {
7. alert('没有2个一下参数的 重载,至少必须指定请求类型(type)和url地址!');
8. return;
9. }
10. type=arguments[0];
11. url=arguments[1];
12. if(len>2)
13. {
14. var args=arguments[2];
15. if(typeof(args)=="string")
16. {
17. postdata=args;
18. }
19. }
20. var xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
21. xhr.open(type,url,true);
22. xhr.setRequestHeader ("Content-Type","application/x-www-form-urlencoded");
23. fn = arguments[len-1];
24. xhr.onreadystatechange = function (){
25. if (xhr.readyState==4)
26. {
27. if(xhr.status==200)
28. {
29. if(typeof(fn)=="function")
30. fn (xhr.responseText);
31. }
32. else
33. {
34. alert("你所请求的页面有异常");
35. }
36. }
37. };
38. xhr.send(postdata);
39. }
40.
41. function Test()
42. {
43. Ajax("get","/WebRoot/servlet/TestAjax");
44. Ajax ("get","/WebRoot/servlet/TestAjax",function (date){
45. alert ("Get Date:\n"+date);
46. });
47. Ajax ("post","/WebRoot/servlet/TestAjax");
48. Ajax ("post","/WebRoot/servlet/TestAjax",function (date){
49. alert("Post Date:\n"+date);
50. });
51. Ajax ("post","/WebRoot/servlet/TestAjax","username=jonllen&pwd=12345 6",function (date){
52. alert("Post Date:\n"+date);
53. });
54. }

成都创新互联是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发，网站制作，网站设计，网站模板，微信公众号开发，软件开发，微信小程序，10多年建站对会所设计等多个行业，拥有多年设计经验。

就只有一个函数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编码格式发送的，确保服务器端和客户端编码一致，这样就不 会出现中文乱码问题。

当前文章：一个比较方便通用的自定义Ajax函数
标题路径：https://www.cdcxhl.com/article24/ppeice.html

成都网站建设公司_创新互联，为您提供虚拟主机、网站收录、定制网站、网站策划、搜索引擎优化、响应式网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联