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,该提示信息仍然有效,因为它是全局的。

原文地址:https://www.cnblogs.com/yuanxinru321/p/6739337.html