AJAX 사용법을 가르치는 4단계

AJAX는 "Asynchronous Javascript And XML"(Asynchronous JavaScript and XML)을 의미하며 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술을 나타냅니다.

AJAX = 비동기 JavaScript 및 XML(표준 범용 마크업 언어의 하위 집합).

AJAX는 빠르고 동적인 웹 페이지를 만드는 기술입니다.

AJAX는 전체 웹페이지를 다시 로드하지 않고도 웹페이지의 일부를 업데이트할 수 있는 기술입니다. [1]

AJAX는 백그라운드에서 서버와 소량의 데이터를 교환함으로써 웹 페이지의 비동기 업데이트를 가능하게 할 수 있습니다. 이는 전체 페이지를 다시 로드하지 않고도 웹페이지의 일부를 업데이트할 수 있음을 의미합니다.

AJAX를 사용하지 않는 기존 웹페이지에서는 콘텐츠를 업데이트해야 하는 경우 전체 웹페이지를 다시 로드해야 합니다.

이 글은 주로 AJAX 사용과 관련된 지식을 소개합니다.

AJAX는 비동기 전송이며 부분 새로 고침은 매우 편리하고 다양한 용도로 사용됩니다!

먼저 AJAX를 사용하는 4단계가 있습니다.

1. AJAX 개체 만들기

var xmlHttp = new XMLHttpRequest();var xmlHttp = new XMLHttpRequest();

2.建立连接 （‘提交方式'，‘Url地址'）

xmlHttp.open('get','./AJAX_XML.xml');

3.判断ajax准备状态及状态码

xmlHttp.onreadystatechange = function(){

    if (xmlHttp.readyState==4 && xmlHttp.status==200) {
  }
}

4.发送请求

xmlHttp.send(null);    //get方式参数为null,post方式，参数为提交的参数

以下以异步提交用户名（输入用户名之后，异步提交后台判断，前台立马提示是否已注册，不用提交时再判断！）

GET方式提交

xx.html

<script type="text/javascript">
window.onload=function(){
  document.getElementById(&#39;username&#39;).onblur=function(){
    var name=document.getElementById(&#39;username&#39;).value;
    var req=new XMLHttpRequest();
    req.open(&#39;get&#39;,&#39;4-demo.php?name=&#39;+name);
    req.onreadystatechange=function(){
      if(req.readyState==4 && req.status==200){
        alert(req.responseText);
      }
    }
    req.send(null);  //如果send()方法中没有数据，要写null
  }
}
</script>

用户名：  5a4b8d0a5ff6b1d7cda32164f687201c

xx.php

<?php
print_r($_GET);
?>　

1、   IE不支持中文

2、   =、&与请求的字符串的关键字相混淆。

POST提交

xx.html

<script type="text/javascript">
window.onload=function(){
  document.getElementById(&#39;username&#39;).onblur=function(){
    var name=document.getElementById(&#39;username&#39;).value;
    name=encodeURIComponent(name);
    var req=new XMLHttpRequest();
    req.open(&#39;post&#39;,&#39;5-demo.php?age=&#39;+20);
    req.onreadystatechange=function(){
      if(req.readyState==4 && req.status==200){
        alert(req.responseText);
      }
    }
  req.setRequestHeader(&#39;Content-Type&#39;,&#39;application/x-www-form-urlencoded&#39;);
    req.send(&#39;name=&#39;+name);  
  }
}
</script>

用户名： 5a4b8d0a5ff6b1d7cda32164f687201c

2. method' , 'Url address')xmlHttp.open('get','./AJAX_XML.xml');

3. Ajax 준비 상태 및 상태 코드 확인

<?php
print_r($_POST);
print_r($_GET);
?>

4. 요청 보내기

xmlHttp.send(null); //get 메소드 매개변수가 null, post 메소드, 매개변수가 제출된 매개변수입니다.

다음은 사용자 이름을 비동기적으로 제출하려면 (사용자 이름을 입력한 후 배경이 비동기적으로 판단되며 프론트 데스크에서 등록 여부를 즉시 확인하고 제출할 필요가 없을 때 판단됩니다.

window.onload=function(){
  document.getElementById('username').onblur=function(){
    var name=document.getElementById('username').value;
    name=encodeURIComponent(name);  //编码
    var req=new XMLHttpRequest();
    req.open('get','4-demo.php?name='+name);
    req.onreadystatechange=function(){
      if(req.readyState==4 && req.status==200){
        alert(req.responseText);
      }
    }
    req.send(null);  //如果send()方法中没有数据，要写null
  }
}

사용자 이름: 306390a7801fb48b5463fcd9f5d4c11f

xx.php

rrreee 1, IE는 중국어

를 지원하지 않습니다. 2, =, &는 요청한 문자열의 키워드와 혼동됩니다. 🎜🎜🎜POST 제출🎜🎜🎜🎜🎜🎜xx.html🎜🎜🎜🎜🎜rrreee🎜🎜🎜사용자 이름: 3b42f4728195d568c07ac41a5e20c098🎜🎜🎜🎜xx.php🎜🎜🎜🎜🎜rrreee🎜🎜🎜1. send()를 통해 데이터를 보냅니다🎜🎜2. setRequestHeader()가 전달할 매개변수는 반드시 XML 형식으로 변환🎜🎜3. 게시물 제출은 트랜스코딩 없이 중국어를 직접 제출할 수 있습니다🎜🎜4. 게시물 요청의 문자도 URL의 & 및 = 문자와 혼동될 수 있으므로 encodeURIComponent( ) 인코딩. 🎜🎜5. GET 제출은 POST 제출과 동시에 수행될 수 있습니다🎜🎜해결 방법🎜🎜 IE는 중국어 =를 지원하지 않으며 & 요청한 문자열의 키워드와 혼동됩니다.🎜🎜문제🎜🎜JS에서 인코딩 encodeURIComponent() 그게 다입니다. 🎜🎜🎜rrreee🎜🎜🎜1. req.responseText: 반환된 문자열을 가져옵니다🎜🎜2. req.responseXML: DOM 구조에 따라 반환된 데이터를 가져옵니다.🎜🎜🎜🎜post/get 제출 방법의 차이점에 주의하세요! 🎜🎜🎜

위 내용은 AJAX 사용법을 가르치는 4단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!