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>

用户名：  <input type="text" name="" id="username">

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>

用户名： <input type="text" name="" id="username">

2. '제출 방법', 'Url 주소')xmlHttp.open('get','./AJAX_XML.xml');

3. ajax 준비 상태를 확인합니다. =" http://www.php.cn/code/8546.html" target="_blank">상태 코드

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

4. 요청 보내기

xmlHttp.send(null); /get 모드 매개변수가 null, 포스트 모드이고 매개변수가 제출된 매개변수입니다

사용자 이름이 비동기적으로 제출됩니다. (사용자 이름 입력 후 배경 판단이 비동기적으로 제출되고 프론트 데스크에서 즉시 프롬프트를 표시합니다. 등록 여부, 제출 전까지 심사되지 않음!)

GET

xx.html

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
  }
}

을 통해 제출하세요. 사용자 이름: <input type="text" name="" id="username">🎜🎜🎜🎜xx.php🎜🎜🎜rrreee🎜1 IE는 중국어🎜🎜2를 지원하지 않습니다. wiki/57.html" target="_blank">문자열 🎜 키워드가 혼동됩니다. 🎜🎜🎜POST 제출🎜🎜🎜🎜🎜🎜xx.html🎜🎜🎜rrreee🎜사용자 이름: <input type="text" name="" id=" username">🎜🎜🎜🎜xx.php🎜🎜🎜rrreee🎜1. send()를 통해 데이터를 보냅니다🎜🎜2. 전달된 매개변수를 XML 형식으로 변환하려면 SetRequestHeader()를 설정해야 합니다🎜🎜3. 게시물 제출은 트랜스코딩 없이 중국어를 직접 제출할 수 있습니다🎜🎜4. 🎜post 요청🎜의 문자도 URL의 & 및 = 문자와 혼동될 수 있으므로 POST에서는 encodeURIComponent() 인코딩을 사용하는 것이 좋습니다. 제출과 동시에 GET 제출을 수행할 수 있습니다🎜🎜Solve🎜🎜 IE는 중국어 =를 지원하지 않으며 & 요청한 문자열의 키워드와 혼동됩니다🎜🎜 문제🎜🎜 그냥 encodeURIComponent()를 통해 js로 인코딩하면 됩니다. 🎜rrreee🎜1. req.responseText: 반환된 문자열을 가져옵니다🎜🎜2. req.responseXML: DOM 구조에 따라 반환된 데이터를 가져옵니다.

위 내용은 Ajax 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!