Jquery 비동기 로딩이란 무엇입니까?-프런트엔드 Q&A-php.cn

Jquery 비동기 로딩이란 무엇입니까?

青灯夜游

풀어 주다： 2022-05-24 16:25:35

원래의

1795명이 탐색했습니다.

jquery에서 비동기 로딩은 비차단 로딩이라고도 하는데, 이는 일반적으로 로딩 중에 코드를 실행하는 것을 의미합니다. 즉, 브라우저가 JQ 또는 JS를 로드할 때 스크립트 파일을 최적화할 수 있는 후속 페이지 처리도 수행합니다. 로딩, 페이지 로딩 속도를 향상시킵니다. Load(), getJSON() 및 기타 메소드를 jq에서 사용하여 비동기화를 달성할 수 있습니다.

Jquery 비동기 로딩이란 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, jquery 버전 1.10.2, Dell G3 컴퓨터.

jquery 비동기 로딩이란 무엇인가요?

비동기 로딩은 비차단 로딩이라고도 합니다. 브라우저가 JQ 또는 JS를 로드하면 후속 페이지 처리도 수행됩니다.

비동기 로딩은 스크립트 파일 로딩을 최적화하고 페이지 로딩 속도를 향상시킬 수 있습니다.

언제 비동기 로딩을 사용해야 하나요?

예약된 작업: setTimeout, setInterval
네트워크 요청: ajax 요청, 동적 로딩
이벤트 바인딩

원 클릭 이벤트가 바인딩된 후 뷰어가 언제인지 알 수 없습니다. 버튼을 클릭하지 않으면 페이지에 다음 작업이 표시되지 않나요? 당연히 불가능하므로 바인딩 이벤트와 동시에 다음 작업을 수행해야 합니다. 시청자가 클릭한 경우 클릭 후 동작에 따라 내려가면 프로세스가 발생하지 않습니다. 차단됩니다. 다른 이미지는 볼 수 없습니다.

jQuery의 4가지 비동기 로딩

페이지 개발 과정에서 전체 페이지 열기 속도를 높이기 위해 비동기 읽기(Ajax 기술)를 사용하여 특정 로컬 데이터를 얻습니다. 이 방법을 적용하면 사용자 경험이 크게 최적화되고 페이지 실행이 최적화됩니다.

1. jQuery의 load() 메소드는 HTML을 로드합니다.

기존 JavaScript에서는 XMLHttpRequest 객체를 사용하여 데이터를 비동기적으로 로드했지만, 비동기 데이터를 얻는 기능은 load()를 사용하여 쉽게 구현할 수 있습니다. 방법.

load(url,[data],[callback]);

 <script type="text/javascript">
        $(function() {
            $("#Button1").click(function() { //按钮点击事件
                $("#divTip").load("6-1b.html"); //load()方法加载数据
            })
        })
    </script>

로그인 후 복사

<div class="clsShow">姓名：陶国荣<br />性别：男<br />邮箱：tao_guo1_rong@163.com</div>

로그인 후 복사

2. jQuery의 전역 함수 getJSON()

load() 메서드를 사용하면 페이지에 데이터를 빠르게 로드할 수 있지만 때로는 순회할 내용을 얻기 위해 load() 메서드를 사용하는 경우에도 데이터 처리를 수행할 수 있지만 수행하려면 먼저 페이지에 삽입해야 하며 실행 효율성이 높지 않습니다.

JSON은 가벼운 데이터 상호 작용 형식으로 컴퓨터가 읽기에 매우 편리하고 효율적입니다. jQuery에는 전역 함수 getJSON()이 있습니다. 호출 구문 형식은

$.getJSON(url,[data],[callback])

   $(function() {
            $("#Button1").click(function() { //按钮单击事件
                //打开文件，并通过回调函数处理获取的数据
                $.getJSON("UserInfo.json", function(data) {
                    $("#divTip").empty(); //先清空标记中的内容
                    var strHTML = ""; //初始化保存内容变量
                    $.each(data, function(InfoIndex, Info) { //遍历获取的数据
                        strHTML += "姓名：" + Info["name"] + "<br>";
                        strHTML += "性别：" + Info["sex"] + "<br>";
                        strHTML += "邮箱：" + Info["email"] + "<hr>";
                    })
                    $("#divTip").html(strHTML); //显示处理后的数据
                })
            })
        })

로그인 후 복사

JSON 파일 형식은

[
  {
    "name": "陶国荣",
    "sex": "男",
    "email": "tao_guo_rong@163.com"
  },
  {
    "name": "李建洲",
    "sex": "女",
    "email": "xiaoli@163.com"
  }
]

로그인 후 복사

3입니다. jQuery

의 전역 함수 getScript() jQuery에서는 전역 함수 getJSON 형식의 파일 콘텐츠 외에도 다른 전역 함수 getScript()를 통해 JS 파일 콘텐츠를 얻을 수도 있습니다. 기본 설정은 다음과 같습니다.

<script type="text/javascript" src="Jscript/xx.js"></script>

로그인 후 복사

동적 설정은

$("<script type=&#39;text/javascript&#39; src=&#39;Jscript/xx.js&#39;/>

로그인 후 복사

전역 함수 getScript()를 통해 JS 파일을 로드하면 페이지의 실행 효율성을 향상시킬 수 있습니다.

 $(function() {
            $("#Button1").click(function() { //按钮单击事件
                //打开已获取返回数据的文件
                $.getScript("UserInfo.js");
            })
        })

로그인 후 복사

JS 파일 형식은 다음과 같습니다.

var data = [
  {
      "name": "陶国荣",
      "sex": "男",
      "email": "tao_guo_rong@163.com"
  },
  {
      "name": "李建洲",
      "sex": "女",
      "email": "xiaoli@163.com"
  }
];

var strHTML = ""; //初始化保存内容变量
$.each(data, function() { //遍历获取的数据
    strHTML += "姓名：" + this["name"] + "<br>";
    strHTML += "性别：" + this["sex"] + "<br>";
    strHTML += "邮箱：" + this["email"] + "<hr>";
})
$("#divTip").html(strHTML); //显示处理后的数据

로그인 후 복사

4. JQuery 문서에서 XML의 비동기 로드

XML 형식의 문서의 경우 jQuery는 전역 함수 $.get()을 사용하여 문서에 액세스합니다. 구문 형식은 다음과 같습니다.

$.get(url,[data], [콜백],[유형])

매개변수 url은 로드를 기다리는 데이터 주소를 나타냅니다. 선택적 [data]는 서버로 전송되는 데이터를 나타냅니다. 선택적인 [type] 매개변수는 HTMLXMLJSJSONTEXT wait와 같은 반환 데이터 형식을 나타냅니다.

호출 방법은 JSON과 유사합니다:

 $(function() {
            $("#Button1").click(function() { //按钮单击事件
                //打开文件，并通过回调函数处理获取的数据
                $.get("UserInfo.xml", function(data) {
                    $("#divTip").empty(); //先清空标记中的内容
                    var strHTML = ""; //初始化保存内容变量
                    $(data).find("User").each(function() { //遍历获取的数据
                        var $strUser = $(this);
                        strHTML += "姓名：" + $strUser.find("name").text() + "<br>";
                        strHTML += "性别：" + $strUser.find("sex").text() + "<br>";
                        strHTML += "邮箱：" + $strUser.find("email").text() + "<hr>";
                    })
                    $("#divTip").html(strHTML); //显示处理后的数据
                })
            })
        })

로그인 후 복사

XML 형식:

<?xml version="1.0" encoding="utf-8" ?>
<Info>
  <User id="1">
    <name>陶国荣</name>
    <sex>男</sex>
    <email>tao_guo_rong@163.com</email>
  </User>

  <User id="2">
    <name>李建洲</name>
    <sex>女</sex>
    <email>xiaoli@163.com</email>
  </User>
</Info>

로그인 후 복사

[추천 학습: jQuery 비디오 튜토리얼, 웹 프론트엔드 비디오]

위 내용은 Jquery 비동기 로딩이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!