AJAX 게시 또는 서버 요청 받기:
XMLHttpRequest 객체는 서버와 데이터를 교환하는 데 사용됩니다.
서버에 요청을 보내려면 XMLHttpRequest 개체의 open() 및 send() 메서드를 사용해야 합니다.
| Property | Description |
| open(메소드,url,async) | 요청 유형, URL 및 요청 처리 여부를 지정하세요. 비동기적으로. (1).method: 요청 유형, GET 또는 POST. (2).url: 서버에 있는 파일의 위치입니다. (3).async:true(비동기) 또는 false(동기). |
| send(string) | 서버에 요청을 보냅니다. string: POST 요청에만 사용됩니다 |
1. get과 post의 차이점:
get 메소드가 더 빠르고 적용 가능성이 높지만 여전히 post를 사용해야 하는 경우가 많습니다.
포스트 방법 사용에 대한 권장 시나리오는 다음과 같습니다.
(1) 캐시된 파일(서버의 파일 또는 데이터베이스 업데이트)을 사용하지 마십시오.
(2) 서버에 대량의 데이터를 보냅니다(POST에는 데이터 제한이 없습니다).
(3) 알 수 없는 문자가 포함된 사용자 입력을 보낼 때 POST가 GET보다 더 안정적이고 신뢰할 수 있습니다.
2. Get 메소드:
먼저 get 메소드 코드를 살펴보세요.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("show").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "demo/ajax/net/demo.aspx", true);
xmlhttp.send();
}
window.onload = function () {
var obt = document.getElementById("bt");
obt.onclick = function () {
loadXMLDoc();
}
}
</script>
</head>
<body>
<div>
<div id="show"></div>
<input id="bt" type="button" value="查看效果"/>
</div>
</body>
</html>위 코드에서 버튼을 클릭하면 서버의 현재 날짜와 시간을 가져옵니다.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ajax
{
public partial class demo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.Write(System.DateTime.Now);
}
}
}특별 참고 사항: 위 IE 브라우저는 캐시에서 데이터를 읽을 수 있습니다. 즉, 버튼을 처음 클릭한 후 정상적으로 시간과 날짜를 얻은 후 후속 클릭은 효과가 없습니다. Google 또는 Firefox에서 해결 방법은 다음과 같습니다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="author" content="http://www.softwhy.com/" />
<title>php中文网</title>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("show").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "demo/ajax/net/demo.aspx?rnd=" + Math.random(), true);
xmlhttp.send();
}
window.onload = function () {
var obt = document.getElementById("bt");
obt.onclick = function () {
loadXMLDoc();
}
}
</script>
</head>
<body>
<div>
<div id="show"></div>
<input id="bt" type="button" value="查看效果"/>
</div>
</body>
</html>해결 방법은 매우 간단합니다. URL 뒤에 임의의 숫자를 추가하면 각 요청이 새 URL로 간주되어 캐시되지 않습니다.
GET을 사용하여 정보를 보낼 수도 있고, URL을 통해 정보를 보낼 수도 있습니다. 코드는 다음과 같습니다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("show").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "demo/ajax/net/demoPara.aspx?webName="+escape("php中文网")+"&age=3", true);
xmlhttp.send();
}
window.onload = function () {
var obt = document.getElementById("bt");
obt.onclick = function () {
loadXMLDoc();
}
}
</script>
</head>
<body>
<div>
<div id="show"></div>
<input id="bt" type="button" value="查看效果"/>
</div>
</body>
</html>버튼을 클릭하면 지정된 콘텐츠를 가져옵니다. 다음은 C# 코드입니다.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ajax
{
public partial class demoPara : System.Web.UI.Page
{
string webName;
int age;
protected void Page_Load(object sender, EventArgs e)
{
webName =Server.UrlDecode(Request.QueryString["webName"]);
age = Convert.ToInt32(Request.QueryString["age"]);
Response.Write("欢迎来到" + webName + "，本站已经成立" + age + "周年。");
}
}
}3. POST 요청:
Look 코드 예:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("show").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "demo/ajax/net/demo.aspx", true);
xmlhttp.send();
}
window.onload = function () {
var obt = document.getElementById("bt");
obt.onclick = function () {
loadXMLDoc();
}
}
</script>
</head>
<body>
<div>
<div id="show"></div>
<input id="bt" type="button" value="查看效果"/>
</div>
</body>
</html>위 코드는 post 메소드를 사용하여 서버의 현재 시간과 날짜를 가져옵니다. get 메소드를 사용하면 캐싱 문제가 없습니다.
HTML 양식과 같은 데이터를 POST해야 하는 경우 setRequestHeader()를 사용하여 HTTP 헤더를 추가한 다음 send() 메서드에서 전송할 데이터를 지정할 수 있습니다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("show").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "demo/ajax/net/postParam.aspx", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("webName=php中文网&age=3");
}
window.onload = function () {
var obt = document.getElementById("bt");
obt.onclick = function () {
loadXMLDoc();
}
}
</script>
</head>
<body>
<div>
<div id="show"></div>
<input id="bt" type="button" value="查看效果"/>
</div>
</body>
</html>다음 섹션