自己如何创建ajax?创建ajax的步骤详解(附实例解析)

js教程评论1.3K views阅读模式

本篇文章主要讲述了关于如何自己创建一个ajax的案例,现在就让我们一起来看看这篇文章吧

学习ajax一段时间了,现在来总结一下ajax的构建与功能。

ajax的用处是向后台请求数据的,其特点是异步请求数据(无刷新读取数据),在ajax没有出现之前,如果填写一个项目比较多的表单对用户来说简直是一个噩梦,如果中间哪一个环节填错了,则在最终提交的时候出现报错,然后就是需要重新填写,经过几次填写过后用户就失去了填写的欲望了。然后在ajax出现后这一问题得到了很好地解决,每填一个项目则会通过服务器验证结果并返回结果,在一定程度上提高了效率,并给用户带来了更好的体验。(想看更多就到PHP中文网AJAX开发手册栏目中学习)

现在就来讲解使用ajax中所存在的一些问题:首先,在IE下面数据更新不及时(缓存引起的),用一个URL只读取一次,所以需要在每次刷新的时候更改URL,然而在域名的?后的参数并不影响页面的获取,而因为URL的不同浏览器会重新加载页面,这样就解决了页面的缓存的问题。可以传url+'?t='+new Date().getTime();或者用Math.random()也是可以的;其次接收的数据格式有问题,这是就需要统一编码;再次就是ajax读取任何东西,返回来的都是字符,这时就需要我们自己对数据进行解析。接下来就自己写一个ajax:

1.创建ajax对象 var oAjax=new XMLHttpRequest() ~高版本浏览器或new ActiveXObject('Microsoft.XMLHTTP')~IE

2.建立连接 oAjax.open(方式,地址,异步)

3.发送请求 oAjax.send();

4.接受 onreadystatechange读取状态改变时

oAjax.readyState 状态码

0. ajax对象刚被创建出来(new 了一个ajax对象)

1. 与服务器连接上(open方法刚执行)

2. 发送完成

3. 接收完成(文件头部)

4. 接收完成(身子),内容请求失败也会有4

其中http状态码:

oAjax.status 200<=n<300或n==304 表示发送成功

oAjax.responseText 返回数据

encodeURIComponent(str) 字符串作为URI 组件进行编

ajax:

//data 	后台要的数据
//options	=	url,data,type,timeout,success,error
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();//给data创建一个t 键
	var arr=[];
	for(var key in options.data){
		arr.push(key+'='+encodeURIComponent(options.data[key]));	
	}
	var str=arr.join('&');	
	if(window.XMLHttpRequest){//1
		var oAjax=new XMLHttpRequest();	
	}else{
		var oAjax=new ActiveXObject('Microsoft.XMLHTTP');	
	}	
	if(options.type=='get'){
		oAjax.open('get',options.url+'?'+str,true);//2	
		oAjax.send();//3
	}else{//post
		oAjax.open('post',options.url,true);
			
		//设定ajax的头信息
		oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');		
		oAjax.send(str);		
	}
	
	oAjax.onreadystatechange=function(){//4
		if(oAjax.readyState==4){
			if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
				clearInterval(timer);
				options.success && options.success(oAjax.responseText)
			}else{
				options.error && options.error(oAjax.status);
			}
		}
	};
	if(options.timeout){
		var timer=setTimeout(function(){
			alert('超时了');	
			oAjax.abort();	//终止加载	
		},options.timeout);
	}	
}

1.创建ajax函数,因为ajax中的各个参数不定,而且排列位置也不同,所以要用到json做数据,传入参数options,其中options为可选项,如果传了就用传了的数据,没有传的话就用默认的参数,其中有发送的方式type和超时时间设定以及data。

2.其中url需要在后面添加一些随机的变量,所以可以先给data添加一个键options.data.t=Math.random();然后对url进行编码,再对数据进行处理。

3.然后就判断浏览器,对于chrome以及ff都支持window.XMLHttpRequest,而对于IE浏览器只支持ActiveXObject('Microsoft.XMLHTTP'),然后判断其发送的类型,如果为get方式,则需要在url后面加上刚才设置的随机数,然后就可以发送数据了oAjax.send();然而对于post方式还需要设定ajax的头信息oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');然后再发送数据

4.对状态改变时进行判断oAjax.onreadystatechange当oAjax.readyState==4时表明接收完成此时再判断状态码oAjax.status>=200 && oAjax.status<300 || oAjax.status==304时表明成功了此时进行成功时的回调函数,否则就是失败了,此时返回状态码,告诉用户。

5.在这中间可以设置一个定时器,当在设定的时间内还没有获取成功则表明超时了,此时需要终止加载oAjax.abort(),并且告诉用户超时了,如果在设置的时间内加载成功了,则清除定时器。

此时ajax就封装完毕了,调用时就简单了

ajax({
		data:	{a:3,b:5},
		url:	'php/php_get.php',
		success:function(str){
			alert(str);	
		}
	});	

本篇文章到这就结束了(想看更多就到PHP中文网AJAX使用手册栏目中学习),有问题的可以在下方留言提问。

以上就是自己如何创建ajax?创建ajax的步骤详解(附实例解析)的详细内容,更多请关注php教程其它相关文章!

企鹅博客
  • 本文由 发表于 2019年8月4日 23:11:17
  • 转载请务必保留本文链接:https://www.qieseo.com/406368.html

发表评论