아약스를 직접 만드는 방법은 무엇입니까? Ajax 생성 단계에 대한 자세한 설명(예제 분석 포함)

이번 글에서는 ajax케이스를 직접 만드는 방법에 대해 주로 다루었습니다. 이제 이 글을 함께 살펴보도록 하겠습니다.

저는 한동안 ajax를 배워왔는데, 이제 ajax의 구성과 기능을 정리해 보겠습니다.

ajax의 목적은 비동기적으로 데이터를 요청하는 것입니다(새로 고침 없이 데이터 읽기). .단계 중 하나라도 잘못 작성하면 최종 제출 중에 오류가 표시되고 양식을 여러 번 작성하면 사용자가 작성 의욕을 잃게 됩니다. 밖으로. 그러다가 Ajax가 등장한 이후에는 이 문제가 잘 해결되어 항목이 채워질 때마다 서버를 통해 결과가 확인되어 반환되므로 효율성이 어느 정도 향상되고 사용자에게 더 나은 경험을 제공합니다. (자세한 내용을 보려면 PHP 중국어 웹사이트AJAX 개발 매뉴얼 열을 참조하세요.)

이제 ajax 사용 시 몇 가지 문제점을 설명하겠습니다. 첫째, IE에서는 데이터가 제때에 업데이트되지 않습니다. 캐시), URL은 한 번만 읽혀지므로 새로 고칠 때마다 URL을 변경해야 하는데 도메인 이름에는? 다음 매개변수는 페이지 검색에 영향을 미치지 않지만, 다른 URL을 가진 브라우저는 페이지를 다시 로드하여 페이지 캐시 문제를 해결합니다. url+'?t='+new Date().getTime();을 사용할 수 있습니다. 둘째, 수신된 데이터 형식에 문제가 있습니다. 셋째, ajax는 읽습니다. 모든 사물은 문자와 함께 반환됩니다. 이때 데이터를 직접 구문 분석해야 합니다. 다음으로 Ajax를 직접 작성하세요.

1. ajax 개체 만들기 var oAjax=new XMLHttpRequest() ~상위 버전 브라우저 또는 새 ActiveXObject('Microsoft.XMLHTTP')~IE

2. 연결 OAJAX.OPEN (메소드, 주소, 비동기)

3은 Oajax.send ()를 읽습니다. ReadyState 상태 코드

0. ajax 객체가 방금 생성되었습니다(새로운 ajax 객체)

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(&#39;超时了&#39;);	
			oAjax.abort();	//终止加载	
		},options.timeout);
	}	
}

1. ajax의 매개변수가 불확실하고 배열 위치도 다르기 때문에 ajax 함수를 생성하므로 json을 데이터로 사용하고, 매개변수 옵션이 전달됩니다. 여기서 옵션은 선택사항입니다. 전달된 경우 전달된 데이터가 사용됩니다. 그렇지 않은 경우 전송 방법 유형, 시간 초과 설정 및 데이터를 포함하는 기본 매개변수가 사용됩니다.

2.URL은 끝에 임의의 변수를 추가해야 하므로 먼저 데이터에 키 options.data.t=Math.random()을 추가한 다음 URL을 인코딩하고 데이터를 처리합니다.

3. 그런 다음 브라우저가 chrome과 ff 모두 window.XMLHttpRequest를 지원하는지 확인하고, IE 브라우저는 ActiveXObject만 지원합니다('Microsoft. 메소드, 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 생성 단계에 대한 자세한 설명(예제 분석 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!