AJAX - 서버에 요청 보내기

서버에 요청을 보내려면 open() 메서드와 send() 메서드를 사용해야 합니다.

open() 메서드에는 세 가지 매개 변수가 필요합니다.

　첫 번째 매개 변수는 요청(GET 또는 POST)을 보내는 데 사용되는 메서드를 정의합니다.

POST에 비해 GET은 더 간단하고 빠르며 대부분의 경우에 작동합니다.

단, 다음과 같은 경우에는 POST 요청을 이용해 주시기 바랍니다.

캐시된 파일(서버의 파일 또는 데이터베이스 업데이트)을 사용하여 서버에 대량의 데이터를 보낼 수 없는 경우(POST에는 데이터 크기 제한이 없음) 사용자 입력을 보낼 때 알 수 없는 문자가 포함된 경우 POST는 GET보다 더 안정적이고 안정적입니다. 두 번째 매개변수는 서버측 스크립트의 URL을 지정합니다. 파일은 .txt 및 .xml과 같은 모든 유형의 파일이거나 서버 스크립트 파일일 수 있습니다. .asp 및 .php(응답을 다시 보내기 전에 서버에서 작업을 수행하는 능력)).

　세 번째 매개변수는 요청이 비동기식(true(비동기) 또는 false(동기))으로 처리되어야 함을 지정합니다.

send() 메서드는 서버에 요청을 보냅니다. HTML 파일과 ASP 파일이 동일한 디렉터리에 있다고 가정하면 코드는 다음과 같습니다.

xmlHttp.open("GET","time.asp",true);

xmlHttp. send(null);

GET 또는 POST?

POST에 비해 GET은 더 간단하고 빠르며 대부분의 경우에 작동합니다.

단, 다음과 같은 경우에는 POST 요청을 이용해 주시기 바랍니다.

캐시된 파일(서버의 파일 또는 데이터베이스 업데이트)을 사용하여 서버에 대량의 데이터를 보낼 수 없는 경우(POST에는 데이터 크기 제한이 없음) 사용자 입력을 보낼 때 알 수 없는 문자가 포함되어 있으므로 POST는 GET

간단한 GET 요청보다 더 안정적이고 신뢰할 수 있습니다.

xmlhttp.open("GET","demo_get.html",true);
xmlhttp.send();

캐시된 결과를 얻을 수 있습니다.

이를 방지하려면 URL에 고유 ID를 추가하세요:

xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);
xmlhttp.send();

GET 메서드를 통해 정보를 보내려면 URL에 정보를 추가하세요:

xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
xmlhttp.send();

전체 코드:

<!DOCTYPE html>
<html>
<head>
<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","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
    xmlhttp.send();
}
</script>
</head>
<body>
    <h2>AJAX</h2>
    <button type="button" onclick="loadXMLDoc()">请求数据</button>
    <div id="myDiv"></div>
</body>
</html>

간단한 POST 요청:

xmlhttp.open("POST","demo_post.html",true);
xmlhttp.send();

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

xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

구문:

setRequestHeader(header,value) 요청에 HTTP 헤더를 추가합니다.

header: 헤더의 이름을 지정합니다.

value: 헤더의 값을 지정합니다.

전체 코드:

<!DOCTYPE html>
<html>
<head>
<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","/try/ajax/demo_post2.php",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("fname=Henry&lname=Ford");
}
</script>
</head>
<body>
    <h2>AJAX</h2>
    <button type="button" onclick="loadXMLDoc()">Request data</button>
    <div id="myDiv"></div>
</body>
</html>

url - 서버에 있는 파일

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

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

파일은 .txt, .xml 또는 서버 스크립트 등 모든 유형의 파일일 수 있습니다. .asp 및 .php와 같은 파일(전달 시 응답하기 전에 서버에서 작업을 수행할 수 있어야 함)

Async - 참인가 거짓인가?

AJAX는 비동기 JavaScript 및 XML을 나타냅니다.

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

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

웹 개발의 경우 개발자에게 비동기 요청을 보내는 것은 큰 개선입니다. 서버에서 수행되는 많은 작업에는 시간이 많이 걸립니다. AJAX 이전에는 이로 인해 애플리케이션이 중단되거나 중지될 수 있었습니다.

AJAX를 사용하면 JavaScript는 서버의 응답을 기다릴 필요가 없지만

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

Async=true

비동기 사용 시 =true, onreadystatechange 이벤트의 준비 상태에 대한 응답으로 실행되는 함수에 지정하십시오:

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

Async = false

async=false를 사용하려면 open() 메소드의 세 번째 매개변수를 false로 변경하십시오:

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

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

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

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

xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

예:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>实例</title>
    <script>
        window.onload = function() {
            var oBtn = document.getElementById('btn');
            oBtn.onclick = function() {
                var xhr = null;
                if(window.XMLHttpRequest){
                    xhr = new XMLHttpRequest();
                }else{
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');
                }
                xhr.open('get','new.php',true); //引入new.php文件
                xhr.send();
                xhr.onreadystatechange = function() {
                    if ( xhr.readyState == 4 ) {
                        if ( xhr.status == 200 ) {
                        //alert( xhr.responseText ); 后端传来的格式是一个数组里面很多条json 自己可以测试下
                           var data = JSON.parse( xhr.responseText ); // 将后台获取的内容转为json类型 每一个json里面有两个键：title和date
                           var oUl = document.getElementById('ul1'); //获取显示新闻列表的节点
                           var html = '';
                           for (var i=0; i<data.length; i++) { // 循环所有的json数据，并把每一条添加到列表中
                              html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
                           }
                            oUl.innerHTML = html; //把内容放在页面里
                        } else {
                            alert('出错了,Err：' + xhr.status);
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="按钮" id="btn" />
    <ul id="ul1"></ul>
</body>
</html>

새.php 파일 만들기 :

<?php
  header('content-type:text/html;charset="utf-8"');
  error_reporting(0);
    $news = array(
      array('title'=>'女总理默克尔滑雪时摔倒 骨盆断裂','date'=>'2014-1-6'),
      array('title'=>'驻英外交官撰文互称对方国家为"伏地魔"','date'=>'2014-1-6'),
      array('title'=>'安倍:望与中国领导人会面 中方:你关闭了大门','date'=>'2014-1-6'),
      array('title'=>'揭秘台湾驻港间谍网运作 湖北宜昌副市长被查','date'=>'2014-1-6'),
      array('title'=>'：嫦娥三号是货真价实的中国创造','date'=>'2014-1-6'),
    );
    echo json_encode($news);
?>

지속적인 학습

새로운 파일

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>实例</title> <script> window.onload = function() { var oBtn = document.getElementById('btn'); oBtn.onclick = function() { var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } xhr.open('get','/asset/demo.ajax.php?dm=json&act=getnews',true); //引入new.php文件 xhr.send(); xhr.onreadystatechange = function() { if ( xhr.readyState == 4 ) { if ( xhr.status == 200 ) { //alert( xhr.responseText ); 后端传来的格式是一个数组里面很多条json 自己可以测试下 var data = JSON.parse( xhr.responseText ); // 将后台获取的内容转为json类型每一个json里面有两个键：title和date var oUl = document.getElementById('ul1'); //获取显示新闻列表的节点 var html = ''; for (var i=0; i<data.length; i++) { // 循环所有的json数据，并把每一条添加到列表中 html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>'; } oUl.innerHTML = html; //把内容放在页面里 } else { alert('出错了,Err：' + xhr.status); } } } } } </script> </head> <body> <input type="button" value="按钮" id="btn" /> <ul id="ul1"></ul> </body> </html>

제출하다 코드 재설정

자동운전