네이티브 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>
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!