기본 PHP 개발 튜토리얼: 서버에 요청 보내기

1. 서버에 요청 보내기

1. XMLHttpRequest 객체는 서버와 데이터를 교환하는 데 사용됩니다.

2. 서버에 요청 보내기

서버에 요청을 보내기 위해 open() 및 send() 메소드:

xmlhttp.open("GET","test1.txt",true);

xmlhttp.send();

3. GET 또는 POST 사용

POST에 비해 GET은 더 간단하고 빠르며, 어떤 경우에는 사용됩니다.
단, 다음과 같은 경우에는 POST 요청을 이용해 주시기 바랍니다.

캐시 파일을 사용할 수 없습니다(서버 파일 업데이트) 또는 데이터베이스)
서버에 대량의 데이터를 보내는 경우(POST에는 데이터 제한이 없습니다.)
알 수 없는 문자가 포함된 사용자 입력을 보내는 경우 , POST는 GET보다 안정적이고 신뢰할 수 있습니다

다음으로 이 두 가지 요청을 이해하는 데 도움이 되는 실제 예를 살펴보겠습니다

간단한 GET 요청:

소스 코드 2_1.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","2_2.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>

소스 코드 2_2.php

<?php
echo "使用GET方法请求得到的<br/>";
echo date("Y-m-d h:i:s",time());
?>

GET 방식으로 정보를 전송하려면 URL에 정보를 추가하세요:

소스 코드 2_5.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","2_6.php?name=小明",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>

소스코드 2_6.php

<?php
$name=$_GET['name'];
echo "使用GET方法请求得到的<br/>";
echo "你好".$name."同学";
?>

5. POST 요청

소스코드 2_3.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("POST","2_4.php?",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>

2_4.php

<?php
echo "使用POST方法请求得到的<br/>";
echo date("Y-m-d h:i:s",time());
?>

HTML 형식과 같이 데이터를 POST해야 하는 경우 setRequestHeader()를 사용하여 HTTP 헤더를 추가하세요. 그런 다음 send() 메소드에서 보내려는 데이터를 지정하십시오:

소스 코드 2_7.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("POST","2_8.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=小明&age=22");
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>

2_8.php

<?php
$name=$_POST['name'];
$age=$_POST['age'];
echo "使用POST方法请求得到的<br/>";
echo "大家好，我叫".$name."今年".$age."岁";
?>

6. 용어 설명

(1) url - 서버에 있는 파일

open () 메소드의 url 매개변수는 서버에 있는 파일의 주소입니다:

xmlhttp.open("GET","ajax_test.php",true);

파일은 .txt 및 .xml과 같은 모든 유형의 파일이거나 .asp 및 .php와 같은 서버 스크립트 파일일 수 있습니다(보내기 전에 서버에서 작업을 수행할 수 있음). 응답) .

(2) Asynchronous-true/false

AJAX는 Asynchronous JavaScript와 XML을 의미합니다.

XMLHttpRequest 객체를 AJAX에 사용하려면 해당 open() 메서드의 async 매개 변수를 true로 설정해야 합니다.

xmlhttp.open("GET","ajax_test.php ",true) ;

비동기 요청 전송은 웹 개발자에게 큰 발전입니다. 서버에서 수행되는 많은 작업에는 시간이 많이 걸립니다. AJAX 이전에는 이로 인해 애플리케이션이 중단되거나 중지될 수 있었습니다.
AJAX를 사용하면 JavaScript가 서버의 응답을 기다릴 필요가 없습니다. 대신

다른 작업을 수행합니다. 서버의 응답을 기다리는 동안 작업 스크립트
응답이 준비되면 응답을 처리합니다.

(3) 비동기 =true

async=true를 사용하는 경우 onreadystatechange 이벤트에서 준비 상태에 응답할 때 실행할 함수를 지정하세요.

소스 코드: 2_9.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","2_10.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">通过AJAX改变内容</button>
<div id="myDiv"></div>
</body>
</html>

2_10.txt

这是通过AJAX得到的内容！！！

(4) Async=false

async=false를 사용해야 하는 경우 다음을 변경하세요. open() 메서드의 세 번째 매개변수를 false로 설정:

xmlhttp.open("GET","test1.txt",false);

async=false를 사용하는 것은 권장되지 않지만 일부 작은 요청의 경우에도 가능합니다.

JavaScript는 계속하기 전에 서버 응답이 준비될 때까지 기다립니다. 서버가 사용량이 많거나 느리면 애플리케이션이 정지되거나 중지됩니다.

참고: async=false를 사용하는 경우 onreadystatechange 함수를 작성하지 말고 send() 문 뒤에 코드를 입력하세요.

소스 코드: 2_11 .php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","2_10.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>

2_10.txt

这是通过AJAX得到的内容！！！

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","2_2.php",true); xmlhttp.send(); } </script> </head> <body> <h2>AJAX</h2> <button type="button" onclick="loadXMLDoc()">请求数据</button> <div id="myDiv"></div> </body> </html>

제출하다 코드 재설정

자동운전