zoukankan      html  css  js  c++  java
  • jQuery中的Ajax

    jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load()、$.get()和$.post()方法,第3层是$.getScript()和$.getJSON()方法。

    load()方法

    ①载入HTML文档

    load()方法是jQuery中最为简单和常用的Ajax方法,能载入远程HTML代码并插入DOM中。

    参数名称 类型 说明
    url    String       请求HTML页面的URL地址    
    data(可选) Object 发送至服务器的key/value数据
    callback(可选) Function 请求完成时的回调函数,无论请求失败或者成功

     

     

     

     

     

     

    ②筛选载入的HTML文档

    ③传递方式

    load()方法的传递方式根据参数data来自动指定。如果没有参数传递,则采用GET方式传递,反之,则会自动转换为POST方式。

    ④回调参数:

    对于必须在加载完成后才能继续的操作,load()方法提供了回调函数(callback),该函数有3个参数,分别代表请求返回的内容、请求状态和XMLHttpRequest对象

    $.get()方法和$.post()方法

    在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()方法或者$.post()方法(或者$ajax()方法)

    $.get()方法和$.post()方法是jQuery中的全局函数,而在此之前讲的jQuery方法都是对jquery对象进行操作的。

    $.get()方法

    $.get()方法使用GET方式来进行异步请求

    参数名称 类型 说明
    url    String       请求HTML页面的URL地址    
    data(可选) Object 发送至服务器的key/value数据会作为QueryString附加到请求URL中
    callback(可选) Function

    载入成功时回调函数(只有当Response的返回状态success才调用

    该方法)自动将请求结果和状态传递给该方法。

    type(可选) String 服务器端返回内容的格式,包括xml、html、script、json、text和_default

    $.get()方法的回调函数只有两个参数,代码如下:

    数据格式:服务器返回的数据格式可以有很多种,它们都可以完成同样的任务。

    html:

    XML:

    XML文档的可移植性是其他数据格式无法比拟的,因此以这种格式提供的数据的重用性将极大提高。XML文档的体积相对较大,与其他文件格式相比,解析和操作它们的速度要慢一些。

    JOSN文件:

    之所以会出现这种数据格式的文件,很大程度上是因为XML文件体积大和难以解析。JOSN文件和XML文档一样,也可以方便的被重用。而且,JSON文件非常简洁,也容易阅读。

     $post()方法

    与$get()方法的结构和使用方式都相同,不过仍有区别

    ①GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给web服务器。当然在Ajax请求中,这种区别对用户是不可见的。

    ②GET方式对传输的数据有大小限制(通常不能大于2KB),而使用POST方式传递的数据量要比GET方式大得多(理论上不受限制)

    ③GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号和密码等。在某种情况下,GET方式会带来严重的安全性的问题,而POST方式相对来说就可以避免这些问题。

    ④GET方式和POST方式传递的数据在服务器端的获取也不相同,在PHP中,GET方式的数据可以用$_GET[]获取,而POST方式可以用$_POST[]获取。两种方式都可以用$_REQUEST[]来获取。

    $.getScript()方法和$.getJson()方法

    $.getScript()

    jQuery提供了$.getScript()方法来直接加载.js文件,与加载一个HTML片段一样方便简单,并且不需要对JavaScript文件进行处理,JavaScript文件会自动执行。

    $(function(){
            $('#send').click(function(){
                $.getScript('test.js');
            });
        })

    与Ajax方法一样,$.getScript()方法也有回调函数,它会在JavaScript文件载入后运行。

    $(function(){
            $.getScript('jquery.color.js',function(){
                $("#go").click(functin(){
                    $(".block").animate({backgroundColor:'pink'},1000)
                               .animate({backgroundColor:'blue'},1000);
                });
            });
        })

    当jquery.color.js动画插件加载完成后,单击id为go的按钮时,class为block的元素就有了颜色动画变化

    $.getJSON()

    $.getJSON()方法用于加载JSON文件,与$.getScript()方法的用法相同。

    $(function(){
            $('#send').click(function(){
                $.getJSON('test.json');
            });
        })

    jQuery提供了回调函数,在回调函数里处理返回的数据

    $(function(){
            $('#send').click(function(){
                //data:返回的数据
            });
        })

    可以在函数中通过data变量来遍历相应的数据,也可以使用迭代方式为每个项构建响应的HTML代码。虽然在这里可以使用传统的for循环来实现。

    jQuery中提供了一个通用的遍历方法$.each(),可以用于遍历对象和数组。

    $.each()函数不同于jQuery对象的each()方法,它是一个全局函数,不操作jQuery对象,而是以一个数组或者对象作为第1个参数,以一个回调函数作为第2个参数。回调函数拥有两个参数:第1个为对象的成员或数组的索引,第2个为对应变量或内容。

    $.ajax()方法

    $.ajax()方法是jQuery最底层的Ajax实现。

    $.ajax(options)

    该方法只有一个参数,但是在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息,参数以key/value的形式存在,所有的参数都是可选的。

    可以用$.ajax()方法来代替前面的方法

    $(function(){
            $('#send').click(function(){
                $.ajax({
                    type:"GET",
                    url:"test.js",
                    dataType:"script"
                });
            });
        })//代替$.getScript()方法

    序列化元素

    1.serialize()方法:使用Ajax技术能够异步地提交表单,并将服务器返回的数据显示在当前的页面中。

    serialize()方法作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求。

    $("#send").click(function(){
            $.get("get1.php",$("#form1").serialize(),function(data,textStatus){
                $("#resText").html(data);
            });
        });
    2.serializeArray()方法

    该方法不是返回字符串,而是将DOM元素序列化后,返回JSON格式的数据。

    3.$.param()方法

    它是serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化

    比如讲一个普通的对象序列化:

    jQuery中的Ajax全局事件

    jQuery简化Ajax操作不仅体现在调用Ajax方法和处理响应方面,而且还体现在对调用Ajax方法的过程中的HTTP请求的控制。

    用css控制元素隐藏,当Ajax请求开始的时候,将此元素显示,用来提示用户Ajax请求正在进行。当Ajax请求结束后,将此元素隐藏。

    如果在此页面中的其他地方也使用Ajax,该提示信息仍然有效,因为它是全局的。

  • 相关阅读:
    JAVA-throw new IOException报错unhandled exception:java.lang.Exception 2021年6月7日
    GIt保持远程 源仓库与Fork仓库同步--2017年6月13日
    Python的getattr()-2017年6月7日
    JavaScript学习-2017年5月18日
    Writing your first Django app--2017年5月9日
    M4-AC6 Oh,Trojan Again--2017年5月9日
    吴军硅谷来信
    【1】Prologue--A Game of Thrones--2017年4月8日
    M4-PC9 Read 10,000 Books,Travel 10,000 Miles--2017年5月8日
    资源分配图RAG的化简
  • 原文地址:https://www.cnblogs.com/yuanxinru321/p/6739337.html
Copyright © 2011-2022 走看看