站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

什么是jquery异步加载

时间:2022-05-26 [网络编程]作者:fabuyuan 浏览:7 次

jquery中,异步加载又称为非阻塞加载,一般指在加载的同时执行代码;也就是当浏览器在加载JQ或JS的同时,还会进行后续页面处理,这样可以优化脚本文件的加载,提高页面的加载速度。jq中可用load()、getJSON()等方法来实现异步。

本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。

什么是jquery异步加载

异步加载又称为非阻塞加载,当浏览器在加载JQ或JS的同时,还会进行后续页面处理。

异步加载可以优化脚本文件的加载,提高页面的加载速度。

什么时候要使用异步加载?

  • 定时任务:setTimeout,setInterval

  • 网络请求:ajax请求,动态加载

  • 事件绑定

    1个点击事件被绑定了之后,我们是不知道浏览者什么时候会点击这个按钮的,如果浏览者一直不点击按钮,难道就不给他看页面接下来的动作了吗?显然不可能,所以要之后的事情和绑定事件同时做,如果浏览者点击了,那就按点击之后的动作往下走,如果真的没点击,那他也不会因为过程被阻塞而导致看不到其他的画面。

jQuery四种异步加载

在页面开发的过程中,为了加快整体页面打开的速度,对于某局部的数据采用异步读取(Ajax技术)的方法获取,这一方法的应用极大地优化了用户的体验,优化了页面的执行。

1、jQuery中的load()方法加载HTML

在传统的JavaScript中,使用XMLHttpRequest对象异步加载数据;而在jQuery中,使用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='text/javascript' src='Jscript/xx.js'/>

而通过全局函数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],[callback],[type])

参数url表示等待加载的数据地址,可选项[data]表示发送到服务器的数据,可选项[callback]表示加载成功时执行的回调函数,可选项[type]参数表示返回数据格式,可以为:HTML\XML\JS\JSON\TEXT等。

其调用方式与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视频教程、web前端视频】

以上就是什么是jquery异步加载的详细内容,更多请关注站长家园其它相关文章!

本文标签:  jquery

转载请注明来源:什么是jquery异步加载

本文永久链接地址:https://www.adminjie.com/post/12784.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • docker是容器吗

      docker是容器吗

      docker不是容器;容器是打包代码及其所有依赖的软件的标准单元,用于开发、交付和部署,使应用可以从一个环境快速可靠地运行到另一个环境,而docker则是容器技...

    • Github 上 8 个不可错过的 Vue 项目,快来收藏!!

      Github 上 8 个不可错过的 Vue 项目,快来收藏!!

      本篇文章给大家整理分享8个GitHub上很棒的的Vue项目,都是非常棒的项目,希望当中有您想要收藏的那一个。Github上8个很棒的Vue项目:Ma...

    • 分享一个有趣的php版本的扫雷!

      分享一个有趣的php版本的扫雷!

      本文给大家分享网友写的一个PHP版本的扫雷,挺有意思的,边玩边学习~github地址:https://github.com/maxiao64/MineWeepe...

    • docker容器重启后数据会丢吗

      docker容器重启后数据会丢吗

      docker容器重启后数据会丢失的;但是可以利用volume或者“datacontainer”来实现数据持久化,在容器关闭之后可以利用“-v”或者“–volu...

    • javascript可以对事件作出响应吗

      javascript可以对事件作出响应吗

      javascript可以对事件作出响应,因为可以将JavaScript设置为当某事件发生时才会被执行;事件也即发生在html元素上的事情,当在html页面使用J...

    热门文章