집 >웹 프론트엔드 >JS 튜토리얼 >아약스 http 요청을 사용하는 방법은 무엇입니까? Ajax는 어떻게 서버를 요청합니까? (예시 분석 첨부)

아약스 http 요청을 사용하는 방법은 무엇입니까? Ajax는 어떻게 서버를 요청합니까? (예시 분석 첨부)

寻∝梦원래의: 2018-09-10 11:21:322601검색

이 글에서는 주로 ajax에 대한 기본 지식, ajax의 역사, ajax의 기본 사용법에 대해 설명합니다. 이제 이 글을 함께 살펴보겠습니다.

AJAX 기본
AJAX는 비동기 JavaScript 및 XML을 의미합니다. (비동기 JavaScript 및 XML).
AJAX는 Google이 2005년에 대중화한 프로그래밍 모델입니다.
AJAX는 새로운 프로그래밍 언어가 아니라 기존 표준을 사용하는 새로운 방식입니다.
AJAX를 사용하면 더 좋고, 더 빠르고, 더 사용자 친화적인 웹 애플리케이션을 만들 수 있습니다.
AJAX는 JavaScript 및 HTTP 요청(HTTP 요청)을 기반으로 합니다.
AJAX 소개
AJAX는 비동기 JavaScript 및 XML을 의미합니다.
당신이 가져야 할 기본 지식
계속하기 전에 다음 사항에 대한 기본적인 이해가 필요합니다:
* HTML /
AJAX = 비동기 JavaScript 및 XML
AJAX는 새로운 프로그래밍 언어가 아니라 더 좋고, 더 빠르며, 더 대화형인 웹 애플리케이션을 만들기 위한 기술입니다.
AJAX를 사용하면 JavaScript가 JavaScript의 XMLHttpRequest 개체를 사용하여 서버와 직접 통신할 수 있습니다. 이
개체를 통해 JavaScript 웹 서버는 데이터를 교환합니다. AJAX는 페이지를 다시 로드하지 않고 브라우저와 웹 서버 간의 비동기 데이터 전송(HTTP 요청)을 사용할 수 있으므로 웹 페이지는 전체 페이지 대신 서버에 소량의 정보를 요청할 수 있습니다.
AJAX는 인터넷 애플리케이션을 더 작고, 더 빠르고, 더 사용자 친화적으로 만듭니다.
AJAX는 웹 서버 소프트웨어와 독립적인 브라우저 기술입니다. WAjax 다음 웹 표준을 기반으로 합니다.
* javascript
* xml
* HTML
* CSS
AJAX에서 사용되는 웹 표준은 잘 정의되어 있으며 모든 주류 브라우저에서 지원됩니다. AJAX 애플리케이션은 브라우저와 플랫폼에 독립적입니다.
AJAX는 더 나은 애플리케이션에 관한 것입니다.
웹 애플리케이션은 데스크톱 애플리케이션에 비해 더 넓은 범위의 사용자에게 접근할 수 있고 설치 및 유지 관리가 더 쉽고 개발하기가 더 쉽습니다.
그러나 인터넷 애플리케이션은 기존 데스크톱 애플리케이션만큼 완전하고 사용자 친화적이지 않습니다.
AJAX를 사용하면 인터넷 애플리케이션이 더욱 완벽해지고 사용자 친화적이 될 수 있습니다. (자세한 내용을 보려면 PHP 중국어 웹사이트
AJAX 개발 매뉴얼
칼럼을 참조하세요.)

AJAX Http 요청
A JAX는 Http 요청을 사용합니다.전통적인 JavaScript 프로그래밍에서 서버의 파일 또는 데이터베이스 서버에서 정보를 가져오거나 서버로 정보를 보내려면 HTML 양식을 사용하여 서버에 데이터를 GET 또는 POST해야 합니다. 사용자는 정보를 보내거나 가져오기 위해 "제출" 버튼을 클릭해야 하며, 서버의 응답을 기다려야 합니다. 그러면 새 페이지에 결과가 로드됩니다.

기존 웹 애플리케이션은 사용자가 입력을 제출할 때마다 서버가 새 페이지를 반환하기 때문에 속도가 느려지고 점점 더 불편해집니다.

AJAX를 활용하면 JavaScript가 JavaScript의 XMLHttpRequest 개체를 통해 서버와 직접 통신합니다. HTTP 요청을 사용하면 웹페이지는 페이지를 로드하지 않고도 서버에 요청하고 서버로부터 응답을 받을 수 있습니다. 사용자는 동일한 페이지에 머물 수 있으며 스크립트가 백그라운드에서 페이지를 요청하거나 서버에 데이터를 보내는 것을 눈치채지 못할 것입니다. XMLHttpRequest 객체
XMLHttpRequest 객체를 사용하면 웹 개발자는 페이지가 로드된 후 서버에서 페이지를 업데이트할 수 있습니다!
AJAX는 2005년 Google에 의해 대중화되었습니다(Google 제안).
Google에서는 XMLHttpRequest 개체를 사용하여 매우 동적인 웹 인터페이스를 만들 것을 권장합니다. Google 검색창에 검색어를 입력하기 시작하면 JavaScript가 해당 단어를 서버로 보내고 서버는 일련의 추천 검색어를 반환합니다.
XMLHttpRequest 개체는 Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0/Firefox, Opera 8+ 및 Netscape 7 브라우저에서 지원됩니다.

첫 번째 AJAX 애플리케이션
AJAX 작동 방식을 이해하는 데 도움이 되도록 작은 AJAX 애플리케이션을 만들어 보겠습니다.
먼저 사용자 이름과 시간이라는 두 개의 텍스트 상자가 있는 HTML 양식이 필요합니다. 사용자 이름 텍스트 상자는 사용자가 채우고 시간 텍스트 상자는
AJAX를 사용하여 채웁니다.
이 HTML 파일 이름은 "testAjax.htm"입니다(이 HTML 양식에는 제출 버튼이 없다는 점에 유의하세요!):

<html>
<body>
<form name="myForm">
用户: <input type="text" name="username" />
时间: <input type="text" name="time" />
</form>
</body>
</html>

AJAX 브라우저 지원
AJAX - 브라우저 지원
AJAX의 주요 포인트는 XMLHttpRequest 개체입니다.
다른 브라우저는 다른 방식으로 XMLHttpRequest 객체를 생성합니다.
IE 브라우저는 ActiveXObject를 사용하는 반면 다른 브라우저는 XMLHttpRequest라는 JavaScript 내장 개체를 사용합니다.
다양한 브라우저에 대해 이 개체를 생성하려면 "try and catch" 문을 사용해야 합니다. JavaScript 튜토리얼
에서 try 및 catch 문에 대해 자세히 알아볼 수 있습니다.
XMLHttpRequest 개체를 생성하는 이 JavaScript로 "testAjax.htm" 파일을 업데이트하겠습니다.

<html>
<body>
<script type="text/javascript">
function ajaxFunction()
 {
        var xmlHttp;
        try{           
                    // Firefox, Opera 8.0+, Safari
                    xmlHttp=new XMLHttpRequest();
             }            
       catch (e){                 
                   // Internet Explorer                                
                   try{
                 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                        }
                   catch (e){
                                    try{
                            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                                         }
                                   catch (e){
               return false;
                                                  }    
                                  }
                      }
}
</script>
<form name="myForm">
用户: <input type="text" name="username" />
时间: <input type="text" name="time" />
</form></body>
</html>

예제 설명:
먼저 XMLHttpRequest 개체를 보유하는 xmlHttp 변수를 선언합니다.
그런 다음 XMLHttp=new XMLHttpRequest()를 사용하여 이 개체를 만듭니다. 이 설명은 Firefox, Opera 및 Safari 브라우저에 적용됩니다.
실패하면 xmlHttp=new ActiveXObject("Msxml2.
이 세 가지 방법 중 어느 것도 작동하지 않으면 사용자가 오래된 브라우저를 사용하고 있는 것이므로 이 브라우저가
AJAX를 지원하지 않는다는 메시지가 표시됩니다.
참고: 위 브라우저를 사용자 정의하는 코드는 매우 길고 복잡합니다. 그러나 이 코드는 XMLHttpRequest 객체를 생성할 때마다 유용하므로 필요할 때마다 이 코드를 복사하여 붙여넣을 수 있습니다. 위 코드는
Internet Explorer, Opera, Firefox 및 Safari 등 모든 주요 브라우저와 호환됩니다.

AJAX - XMLHttpRequest 객체
AJAX - XMLHttpRequest 객체에 대한 추가 지식 서버에 데이터를 보내기 전에 XMLHttpRequest 객체의 세 가지 중요한 속성을 설명해야 합니다.
onreadystatechange 속성
onreadystatechange 속성은 서버 응답을 처리하는 함수를 저장합니다. 다음 코드는
onreadystatechange 속성을 동시에 설정할 수 있는 빈 함수를 정의합니다.
xmlHttp.onreadystatechange=function()
{
// 여기에 코드를 작성해야 합니다
}
readyState 속성
readyState 속성은 서버를 저장합니다. 응답 상태 정보. ReadyState가 변경될 때마다 onreadystatechange 함수가 실행됩니다.
readyState 속성에 가능한 값은 다음과 같습니다.
상태 설명
0
요청이 초기화되지 않았습니다(open()을 호출하기 전)
1
요청이 이루어졌습니다(send()를 호출하기 전)
2
The 요청이 전송되었습니다(일반적으로 응답이 콘텐츠 헤더를 가져옴에서 얻을 수 있음)
3
요청이 처리 중입니다(일반적으로 응답에 일부 데이터가 있지만 서버가 응답을 완료하지 않았습니다)
4
요청 완료됨(서버 응답에 액세스하여 사용할 수 있음)

이 onreadystatechange로 이동합니다. 이 함수는 응답이 완료되었는지 테스트하기 위해 If 문을 추가합니다(데이터를 사용할 수 있음을 의미)
:
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
응답이 데이터를 가져옴
}
}
respon seText 속성
responseText 속성을 사용하여 서버에서 반환된 데이터를 검색할 수 있습니다.
우리 코드에서는 시간 텍스트 상자의 값을 responseText와 동일하게 설정합니다:
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value = xmlHttp.responseText;
}
}

AJAX - 서버에 요청
AJAX - 서버에 요청 보내기 서버에 요청을 보내려면 open() 메서드와 send() 메서드를 사용해야 합니다.
open() 메서드에는 세 가지 매개 변수가 필요합니다. 첫 번째 매개변수는 요청(GET 또는 POST)을 보내는 데 사용되는 방법을 정의합니다. 두 번째 매개변수는 서버측 스크립트의 URL을 지정합니다. 세 번째 매개변수는 요청이 비동기적으로 처리되어야 함을 지정합니다.
send() 메서드는 서버에 요청을 보냅니다. HTML 파일과 ASP 파일이 동일한 디렉터리에 있다고 가정하면 코드는 다음과 같습니다.
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null) ;

이제 AJAX 기능을 언제 실행할지 결정해야 합니다. 사용자가 사용자 이름 텍스트 상자에 무언가를 입력하면 함수가 "무대 뒤에서" 실행되도록 합니다

.

<html>
<body>
<script type="text/javascript">
function ajaxFunction()
{
    var xmlHttp;
    try
    {
        // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e)
    {
        // Internet Explorer
        try
        {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
        try
        {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e)
        {
            alert("您的浏览器不支持AJAX!");
            return false;
        }
    }
}
xmlHttp.onreadystatechange=function()
{
    if(xmlHttp.readyState==4)
    {
        document.myForm.time.value=xmlHttp.responseText;
    }
}
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
}
</script>
<form name="myForm">
用户: <input type="text" name="username" onkeyup="ajaxFunction();"/>
时间: <input type="text" name="time" />
</form>
</body>
</html>

AJAX - 서버 측 스크립트

이제 현재 서버 시간을 표시하는 스크립트를 작성하겠습니다.

responseText 속성은 서버에서 반환된 데이터를 저장합니다. 여기서는 현재 시간을 반환하려고 합니다. "time.asp"의 코드는 다음과 같습니다.

<%response.expires=-1
response.write(time)%>

注释：Expires 属性可设置在页面缓存失效前页面被缓存的时间（分钟）。Response.Expires=-1 指示页面不会被
缓存。
运行您的 AJAX 应用程序
请在下面的文本框中键入一些文本，然后单击时间文本框：
用户 : 时间 :
时间文本框可在不加载页面的情况下从 "time.asp" 获得服务器的时间！

本篇文章到这就结束了（想看更多就到PHP中文网AJAX使用手册栏目中学习），有问题的可以在下方留言提问。

위 내용은 아약스 http 요청을 사용하는 방법은 무엇입니까? Ajax는 어떻게 서버를 요청합니까? (예시 분석 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：아약스는 어떻게 작동하나요? Ajax의 작동 원리 소개 및 장점과 단점 분석다음 기사：아약스는 어떻게 작동하나요? Ajax의 작동 원리 소개 및 장점과 단점 분석