네이티브 Ajax를 작성하는 방법

네이티브 Ajax 작성 방법: 먼저 XMLHttpRequest 객체를 만든 다음 onreadystatechange에 콜백 함수를 작성한 다음 요청 정보를 보냅니다.

Ajax(Asynchronous JavaScript and XML의 약자)는 데이터를 비동기적으로 요청하는 웹 개발 기술로 사용자 경험을 향상시키는 데 유용합니다. 페이지 성능이 도움이 됩니다.

간단히 말하면 Ajax는 비동기 요청을 통해 배경 데이터를 로드하고 페이지를 새로 고칠 필요 없이 웹 페이지에 렌더링합니다. 일반적인 애플리케이션 시나리오에는 로그인 여부에 대한 양식 확인이 포함됩니다. 성공적인 입력, Baidu 검색 드롭다운 상자 프롬프트 및 빠른 추적 번호 쿼리 등

Ajax에 대해 포괄적으로 이해하고 싶다면 JsTutorial으로 이동하여 포괄적으로 이해할 수 있습니다.

이제 Ajax는 다양한 최적화를 거쳐 매우 편리해졌습니다. 예를 들어 Jquery를 사용하려면 한 줄만 있으면 Ajax를 사용할 수 있습니다.

그럼 네이티브 Ajax는 어떤 모습일까요?

한번 살펴보겠습니다.

 <script>
	function ajax(url){
		//创建XMLHttpRequest对象,新版本的浏览器可以直接创建XMLHttpRequest对象,IE5或IE6没有
		//XMLHttpRequest对象，而是用的ActiveXObject对象
	       var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")
	       xhr.open("get",url,true);
	       xhr.send();//发送请求
	       xhr.onreadysattechange = () =>{
	           if(xhr.readystate == 4){//返回存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
	               if(xhr.status == 200){//返回状态码
	                   var data = xhr.responseTEXT;
	                   return data;
	               }
	           }
	       }    
	   }
</script>

readystate:

XMLHttpRequest의 상태를 저장합니다. 0에서 4로 변경됩니다.

0: 요청이 초기화되지 않음

1: 서버 연결 설정됨

2: 요청 수신됨

3: 요청 처리 중

4: 요청이 완료되었고 응답이 준비되었습니다

status:

200: "확인"

#🎜 🎜 #404: 페이지를 찾을 수 없음

405: 잘못된 요청 방법

500: 내부 서버 오류

403: 요청 금지

#🎜 🎜#

Ajax에는 두 가지 요청 방법이 있습니다:

get 요청 방법

<script>
	function ajax() {
		//创建核心对象
		xhr = null;
		if (window.XMLHttpRequest) {// 新版本的浏览器可以直接创建XMLHttpRequest对象
			xhr = new XMLHttpRequest();
		} else if (window.ActiveXObject) {// IE5或IE6没有XMLHttpRequest对象
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//编写回调函数
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {
				alert(xhr.responseText)
			}
		}
		//open设置请求方式和请求路径
		xhr.open("get", "/Ajax/ajax?userId=10");//一个url还传递了数据，后面还可以写是否同步
		//send 发送
		xhr.send();
	}
</script>

#🎜🎜 #post 요청 방법

<script>
	function ajax() {
		//创建核心对象
		xhr = null;
		if (window.XMLHttpRequest) {// 新版本的浏览器可以直接创建XMLHttpRequest对象.
			xhr = new XMLHttpRequest();
		} else if (window.ActiveXObject) {// IE5或IE6没有XMLHttpRequest对象
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//编写回调函数
		xhr.onreadystatechange = function() {	
			if (xhr.readyState == 4 && xhr.status == 200) {
				alert(xhr.responseText)//警告框，显示返回的Text
			}
		}
		//open设置请求方式和请求路径
		xhr.open("post", "/Ajax/ajax2");//一个servlet，后面还可以写是否同步
		//设置请求头
		xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
		//send 发送
		xhr.send("userId=10");
	}
</script>

위 내용은 네이티브 Ajax를 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!