如何封装自己的Ajax模块

发表于   |   分类于   |  

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面，增加了大量的http请求，最早的网站注册过程，真心不想经历第二遍…

AJAX的工作原理：

大家都知道用jQuery很方便，有jQuery.ajax方法，还有一大推封装好的$.get，$.post等，那里面到底发生了什么，自己能不能写一个模块呢？
答案自然是肯定的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
//ajax封装函数
//data 提交的数据
//options= {url,data,type,timeout,succFn,failFn} json格式
function ajax(options){
	options=options||{};
	options.data=options.data||{};
	options.type=options.type||'get';
	options.timeout=options.timeout||0;

	//整理data数据
	options.data.t=Math.random();
	var arr=[];
	for(var key in options.data){
		arr.push(key+'='+encodeURIComponent(options.data[key]));
	}
	var str=arr.join('&');

	//初始化ajax对象
	if(window.XMLHttpRequest){
		var oAjax=new XMLHttpRequest();
	}else{
		var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
	}

	//根据type发送数据
	if(options.type=='get'){
		oAjax.open('get',options.url+'?'+str,true);//true表示异步
		oAjax.send();
	}else{
		oAjax.open('post',options.url,true);
		oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		oAjax.send(str);
	}

	oAjax.onreadystatechange=function(){
		if(oAjax.readyState==4){
			if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
				options.succFn && options.succFn(oAjax.responseText); 
			}else{
				options.failFn && options.failFn(oAjax.status);
			}
		}
	}

	if(options.timeout){
		var timer=setTimeout(function(){
			options.succFn('超时/timeout');
			oAjax.abort();
		},options.timeout);
	}
};