AJAX - 서버에 요청 보내기
서버에 요청을 보내려면 open() 메서드와 send() 메서드를 사용해야 합니다.
open() 메서드에는 세 가지 매개 변수가 필요합니다.
첫 번째 매개 변수는 요청(GET 또는 POST)을 보내는 데 사용되는 메서드를 정의합니다.
POST에 비해 GET은 더 간단하고 빠르며 대부분의 경우에 작동합니다.
단, 다음과 같은 경우에는 POST 요청을 이용해 주시기 바랍니다.
캐시된 파일(서버의 파일 또는 데이터베이스 업데이트)을 사용하여 서버에 대량의 데이터를 보낼 수 없는 경우(POST에는 데이터 크기 제한이 없음) 사용자 입력을 보낼 때 알 수 없는 문자가 포함된 경우 POST는 GET보다 더 안정적이고 안정적입니다. 두 번째 매개변수는 서버측 스크립트의 URL을 지정합니다. 파일은 .txt 및 .xml과 같은 모든 유형의 파일이거나 서버 스크립트 파일일 수 있습니다. .asp 및 .php(응답을 다시 보내기 전에 서버에서 작업을 수행하는 능력)).
세 번째 매개변수는 요청이 비동기식(true(비동기) 또는 false(동기))으로 처리되어야 함을 지정합니다.
send() 메서드는 서버에 요청을 보냅니다. HTML 파일과 ASP 파일이 동일한 디렉터리에 있다고 가정하면 코드는 다음과 같습니다.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);
?>