아약스는 어떻게 등장했나요? 아약스는 어떻게 개발되나요? (요약)-JS 튜토리얼-php.cn

이 글은 주로 ajax의 배경 정의와 ajax의 개인적인 사용에 대한 요약을 소개합니다. 이제 이 글을 함께 살펴보겠습니다.

이 글은 다음과 같은 내용을 담고 있습니다:

그것은 무엇입니까? AJAX의 배경
AJAX
AJAX의 원리
AJAX의 정의
AJAX의 개발 단계
간단한 데모
AJAX 기술의 장점과 단점

AJAX란 무엇인가요?

Wikipedia를 참조하면 다음 구절을 볼 수 있습니다.
AJAX는 "Asynchronous JavaScript and XML"(비동기 JavaScript 및 XML 기술)을 의미하며, 여러 기술을 결합한 일련의 브라우저 측 웹 개발 기술을 나타냅니다.

이제 AJAX=JavaScript+XML이라는 일반적인 인상을 받았습니다. 우리 모두는 js와 xml에 익숙해야 합니다.
AJAX 출현 배경
우리의 개발 여정을 되돌아보면, 원래 개발 과정에서 Servlet+JSP+JavaBean을 사용하면서 우리 웹 애플리케이션에서는 사용자가 웹 페이지에서 양식(Form)을 작성하고 제출하여 요청을 보낼 수 있었습니다. 웹 서버에 (요청). 서버는 요청을 받고, 들어오는 양식을 처리하고, 응답(Response)을 반환합니다. 브라우저는 응답을 얻은 후 구문 분석을 통해 브라우저에 페이지를 표시함으로써 사용자와 서버 간의 상호 작용을 완료합니다.
그러나 이 모델에는 몇 가지 문제가 있습니다. 이제 이 예를 살펴보세요. 사용자가 사용자 이름, 비밀번호 및 확인 코드를 입력하면 데이터가 서버로 전송되고 사용자 이름과 비밀번호가 일치하는 것으로 확인됩니다. 일치하지 않습니다. 다음은 무엇입니까?
오류 메시지가 포함된 페이지와 응답을 다시 브라우저에 반환합니다. 브라우저는 이 개발 프로세스를 사용하면 비즈니스가 아무리 완벽하더라도 몇 가지 고유한 문제가 있습니다.
우선, 대역폭 낭비. 오류 메시지를 표시하는 부분을 제외하고 두 페이지의 다른 모든 요소는 동일합니다.
둘째, 사용자 경험이 좋지 않습니다. 사용자가 실수로 양식에 잘못된 사용자 이름을 입력했다고 가정해 보겠습니다. 양식을 제출한 후 일정 시간이 지나면 페이지가 새로 고쳐지고 사용자 이름이 잘못되었다는 메시지가 표시됩니다. 사용자 이름과 비밀번호가 매우 불친절합니다. 사용자의 인터넷 속도가 상대적으로 느리면 사용자 경험은 더욱 악화됩니다.
그럼 이 문제를 해결할 수 있는 방법은 없을까요? 즉, 사용자가 사용자 이름을 입력하면 피드백을 받을 수 있나요?
AJAX의 일반적인 아이디어
js의 XMLHttpRequest 개체가 등장하기 전에는 방법이 없었지만 등장한 후 선배들은 더 나은 솔루션을 생각했습니다. 즉, XMLHttpRequest 개체를 에이전트로 사용하는 것입니다. 서버에 요청을 보내고 이를 사용하여 서버에서 반환된 데이터를 수신하므로 페이지로 이동하지 않고도 데이터 상호 작용을 완료할 수 있고 필요한 데이터 중 극히 일부만 전송하면 되므로 네트워크 속도에 대한 요구 사항이 필요합니다. 또한 더 낮습니다.
그러나 아직 해결되지 않은 두 가지 문제가 있습니다:
1. 사용자와의 상호 작용을 달성하기 위해 서버에서 반환된 데이터를 기반으로 페이지를 동적으로 변경하는 방법은 무엇입니까?
2. 서버에서 다시 전송하는 데이터 형식을 지정하여 보다 다양하게 만들고 전송량을 최대한 줄이는 방법은 무엇입니까?
1에 관하여: 전임자들이 JavaScript를 사용하기로 선택한 데에는 두 가지 이유가 있다고 개인적으로 이해합니다. 첫째, JavaScript는 충분히 대중적이며, 거의 모든 주류 브라우저는 JavaScript를 지원합니다. 둘째, JavaScript는 DOM을 통해 프로그래밍될 수 있습니다. 웹페이지의 내용을 동적으로 변경합니다.
2번: 이전 세대가 XML을 선택한 이유는 구문이 충분히 엄격하고 의미가 명확하며 더 다양하기 때문일 것입니다. 하지만 전송되는 데이터 형식은 AJAX 사용에 영향을 미치지 않는다고 생각합니다. 예를 들어, 서버 측 개발자와 브라우저 측 개발자가 형식에 동의하는 한 더 적은 양의 데이터를 전송하기 위해 Json을 전송하도록 선택할 수도 있고 의미 있는 문자열을 전송하도록 선택할 수도 있습니다.
AJAX 정의
이제 AJAX를 정의할 수 있습니다. AJAX는 빠르고 동적인 웹 페이지를 만드는 기술입니다. AJAX를 사용하면 백그라운드에서 서버와 소량의 데이터를 교환하여 웹 페이지를 비동기적으로 업데이트할 수 있습니다. 이는 전체 페이지를 다시 로드하지 않고도 웹페이지의 일부를 업데이트할 수 있음을 의미합니다.
AJAX 기술 개발의 단계
위의 소개를 통해 전통적인 자원 낭비 문제를 해결하기 위한 아이디어를 알았습니다. 이제 구현 방법을 살펴보겠습니다.
AJAX 구현에 대해서는 W3School의 AJAX 소개를 확인할 수 있습니다.
다음은 AJAX 구현 단계에 대한 간략한 요약입니다.
1. XMLHttpRequest 개체가 필요합니다. (우리 모두는 하위 버전 IE 브라우저의 많은 표준이 주류 표준과 호환되지 않는다는 것을 알고 있습니다. 불행하게도 XMLHttpRequest 객체도 마찬가지입니다...)
따라서 XMLHttpRequest 객체를 획득하는 과정은 다음과 같습니다:

    var httpXml = null;    if(window.XMLHttpRequest){
        httpXml = new XMLHttpRequest();  //针对现代浏览器，IE7及以上版本
    }else if(window.ActiveXObject){
        httpXml = new ActiveXObject("Microsoft.XMLHTTP");  //针对IE5,IE6版本
    }

로그인 후 복사

2. 이 XMLHttpRequest 객체에 대해 수행하려는 작업을 콜백을 통해 등록하고 반환된 요청 상태 및 HTTP 상태 코드를 기반으로 메시지 상태를 확인하고 어떤 작업을 어떤 환경에서 수행할지 결정해야 합니다. 상황. (자세한 내용을 보려면 PHP 중국어 웹사이트 AJAX 개발 매뉴얼 열을 참조하세요.)

이 프로세스는 다음과 같습니다.

    //为XMLHttpRequest对象的onreadystatechange属性注册
    httpXml.onreadystatechange=function(){
        //  在回调函数中根据请求状态与返回的HTTP状态码来选择相应的操作处理数据
        if(httpXml.readyState==4&&httpXml.status==200){
            alert(httpXml.responseText);
        }
    };

로그인 후 복사

아약스는 어떻게 등장했나요? 아약스는 어떻게 개발되나요? (요약)

3. 요청 전송을 위한 매개변수를 설정해야 합니다.
과정은 다음과 같습니다:

    //函数原型：open(method,url,async,username,password)    //method            --->请求方式:GET,POST或HEAD    //url               --->请求的地址  GET提交方式可以在后面加上参数    //async             --->请求是否异步执行，true---异步，false---同步   默认为true
    //username,password --->可选，为url所需的授权提供认证资格。如果不为空，会覆盖掉url中指定的资格
    httpXml.open("GET","http://localhost:8080/aaa/MyServlet",true);

로그인 후 복사

4. 이제 실제로 요청을 보낼 시간입니다!

    //  参数为请求参数,POST提交内容格式为--->"username=taffy&password=666",GET为----->空
    //  注意：若为POST请求方式，还需设置一个http请求头(应该位于open之后,send之前)
    // 即 setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");    标志form表单的enctype属性
        httpXml.send(null);

로그인 후 복사

아약스는 어떻게 등장했나요? 아약스는 어떻게 개발되나요? (요약) 这样，一个简单的AJAX过程就完成了。
一些没有介绍的小知识点：

    //XMLHttpRequest属性
    responseText   得到返回的文本信息
    responseXML    得到返回的XML信息    //XMLHttpRequest的方法
    getResponseHeader()   得到指定头部信息    getAllResponseHeaders() 将 HTTP响应头部作为未解析的字符串返回    //XMLHttpRequest的控制方法
    abort()    取消当前响应，关闭连接，将readyState置0

로그인 후 복사

下面是我做的一个简单的Demo：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">

    <!-->onload:页面加载完成后调用 <-->
    window.onload = function(){
        var user = document.getElementById("my_user");        //获取XMLHttpRequest对象
        var httpXml = null;        if(window.XMLHttpRequest){
            httpXml = new XMLHttpRequest(); //针对现代浏览器，IE7及以上版本}else if(window.ActiveXObject){
            httpXml = new ActiveXObject("Microsoft.XMLHTTP"); //针对IE5,IE6版本
        }
        user.onblur=function(){
            httpXml.onreadystatechange=function(){
                if(httpXml.readyState==4&&httpXml.status==200){                    if(httpXml.responseText!="true"){
                        alert("用户名不存在");
                    }
                }
            };
            httpXml.open("GET","http://localhost:8080/aaa/MyServlet?user="+user.value,true);
            httpXml.send(null);
        }</script></head><body>
        <form action="http://localhost:8080/aaa/AnotherServlet">
            <input type="text" name="username" id="my_user">
            <input type="text" name="password" id="my_pass">
            <input type="submit" value="提交">
        </form></body></html>

로그인 후 복사

MyServlet.java

import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/**
 * Servlet implementation class MyServlet
 */@WebServlet("/MyServlet")public class MyServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;    /**
     * @see HttpServlet#HttpServlet()
     */
      public MyServlet() {        super();
    }    @override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        String username = request.getParameter("user");        if (username!=null&&!username.equals("")) {            if (username.equals("admin")) {
                out.write("true");
            }else {
                out.write("false");
            }
        }else {
            out.write("false");
        }
        out.close();
    }    @override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

로그인 후 복사

* 下面对AJAX的优缺点进行一下总结：*
优点：
能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。
缺点：
1.它可能破坏浏览器的后退功能。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面（现代浏览器一般都可以解决这个问题）；
2.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。

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

위 내용은 아약스는 어떻게 등장했나요? 아약스는 어떻게 개발되나요? (요약)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!