jQuery中的ajax

摘要:
第二层是load(),$。get()和$。post()方法,回调])加载方法参数解释参数名称类型描述urlstring类型请求html页面数据的url地址(可选)对象类型发送到服务器键/值数据回调(可选)函数类型回调函数,当请求完成时,无论请求是否成功1.2过滤加载的HTML文档load()方法的URL参数的语法结构为:

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

1. load()方法

1.1  载入HTML文档

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

load(url[,data][,callback])
load方法参数解释
参数名称类型说明
urlstring类型请求html页面的url地址
data(可选)object类型发送至服务器的key/value数据
callback(可选)function类型请求完成时的回调函数,无论请求成功或失败

1.2 筛选载入的HTML文档

load()方法的URL参数的语法结构为:"url selector"。注意,URL和选择器之间有一个空格。

$("#msg").load("ajax.html .para");//只需要加载ajax.html页面中class为"para"的内容

1.3 传递方式

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

$("#resText").load("test.php",{name:"rain",age:"22"},function(){
//...
});

1.4 回调函数

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

$("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){
// responseText: 请求返回的内容
// textStatus: 请求状态:success、error、notmodified、timeout 4种
// XMLHttpRequest: XMLHttpRequest对象
});

在load()方法中,无论Ajax请求是否成功,只要当请求完成后,回调函数就被触发。

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

2.1 $.get()方法

$.get()方法使用GET方式来进行异步请求。它的结构为:

$.get(url[,data][,callback][,type])

$.get()方法的回调函数只有两个参数:返回内容data和请求状态status。

$.get()参数解释

参数名称

类型

说明

url

String

请求的HTML页的URL地址

data(可选)

Object

发送至服务器的key/value数据回作为QueryString附加到请求URL中

callback(可选)

Function

载入成功时回调函数(只有当Response的返回状态是success才调用该方法)自动将请求结果和状态传递给该方法

type(可选)

String

服务器端返回内容的格式,包括xml、html、script、json、text和_default

返回内容data的格式有:

(1)HTML片段

(2)XML文档

由于期待服务器返回的数据格式是XML文档,因此需要在服务端设置Content-Type类型,代码如下:

header("content-type:text/xml;charset=utf-8"); //PHP

(3)JSON文件

2.2 $.post()方法

与$.get()的区别:

(1) get请求会将参数跟在URL后进行传递,而post请求则是作为HTTP消息的实体内容发送给web服务器。
(2) get方式对传输的数据有大小限制(<=2kb),而使用POST方式传递的数据量不受限制
(3) get方式请求的数据会被浏览器缓存起来,引起安全性问题
(4) get方式和post方式传递的数据在服务器端的获取也不相同。php中,get方式的数据可以用$_GET[]获取,而post方式可以用$_POST[]获取。两种方式都可以用$_REQUEST[]来获取。

由于post和get方式提交的所有数据都可以通过$_REQUEST[]来获取,因此只需要改变jQuery函数,就可以在get请求和post请求之间切换。

另外,当load()方法带有参数传递时,会使用post方式发送请求。因此也可以使用load()方法来完成同样的功能。如:

$(function(){
$("#send").click(function(){
$("#resText").load("post1.php",{
username:$("username").val(),
content:$("#content").val()
});
});
});

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

3.1 $.getScript()

有时,在页面初次加载时就取得所需的全部JavaScript文件是完全没有必要的。虽然可以在需要哪个JavaScript文件时,动态创建<script>标签。jQuery代码如下:

$(document.createElement("script")).attr("src","test.js").appendTo("head");

或者

$("<script type='text/javascript' src='http://t.zoukankan.com/test.js'></script>").appendTo("head");

但是,这种方式并不理想,jQuery提供了$.getScript()方法来直接加载.js文件:

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

3.2 $.getJSON()

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

$(function(){
$("#send").click(function(){
$.getJSON("test.json",function(data){
//data:返回的数据
});
});
});

4.  $.ajax()方法

它是jQuery最底层的Ajax实现。它的结构为:

$.ajax(options)

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

前面用到的$.load()、$.get()、$.post()、$.getScript()和$.getJSON()这些方法,都是基于$.ajax()方法构建的,$.ajax()方法是jQuery最底层的Ajax实现,因此可以用它来代替前面的所有方法。

例如,采用如下代码代替$.getScript()方法:

$(function(){
$("#send").click(function(){
$.ajax({
type:"GET",
url:"test.js",
dataType:"script"
});
});
});

再如使用$.ajax()方法代替$.getJSON()方法:

$(function(){
$("#send").click(function(){
$.ajax({
type:"GET",
url:"test.json",
dataType:"json",
success:function(data){
$("#resText").empty();
var html = "";
$.each(data,function(commentIndex,comment){
html += "<div class='comment'><h6>" + comment["username"] + ":</h6><p class='para'>" + comment["comment"] + "</p></div>";
});
$("#resText").html(html);
}
});
});
});

5. 序列化元素

5.1 serialize()方法

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

$("#send").click(function()
{
    $.get("get1.php", $("#form1").serialize(), function(data, status)
    {
        $("#msg").html(data);
    });
});

因为serialize()方法作用于jQuery对象,所以不光只有表单能使用它,其他选择器的元素也都能使用它。

5.2 serializeArray()方法

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

5.3 $.param()方法

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

var obj = {a:1,b:2,c:3};
var k = $.param(obj);
alert(k);    //输出a=1&b=2&c=3

7. jQuery中的Ajax全局事件

通过jQuery提供了一些自定义全局函数,能够为各种上与Ajax相关的事件注册回调函数。例如当Ajax请求开始时,会触发ajaxStart()方法的回调函数;当Ajax请求结束时,会触发ajaxStop()方法的回调函数。

例如:某个网站图片过多,在Ajax请求过程中,只要图片还未加载完毕,就会一直显示“加载中...”的提示信息。可以极大地改善用户的体验。

<div id="loading">加载中...</div>
$("#loading").ajaxStart(function()
{
    $(this).show();
});
$("#loading").ajaxStop(function()
{
    $(this).hide();
});

如果想使某个Ajax请求不受全局方法的影响,那么可以在使用$.ajax(options)方法时,将参数中的global设置为false,jQuery代码如下:

$.ajax()
{
    url: "test.html",
    global: false    //不触发全局Ajax事件
}

完毕!

免责声明:文章转载自《jQuery中的ajax》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Linux下rsync的用法Jmeter(一)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

小代码编写神器:LINQPad 使用入门

一:概述 1:想查看程序运行结果,又不想启动 VS 怎么办? 2:想测试下自己的 C# 能力,不使用 VS 的智能感知,怎么办? 那么,我们有一个选择,使用神器 LINQPad(http://www.linqpad.net/)。 二:入门 1:使用 C# Statement 直接在 1 处选择,然后在 2 处写 C# 代码,注意,语法中 Dump() 一下...

微信小程序开发四:接口

4.1 网络 发起请求wx.request接口,用于发起 HTTPS 请求。一个微信小程序,同时只能有5个网络请求连接。上传下载wx.uploadFile接口,用于将本地资源上传到开发者服务器。如页面通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口将本地资源上传到指定服务器。客户端发起一个 HTTPS POST...

Java IO流 DataOutputStream、DataInputStream的基本使用

            DataOutputStream、DataInputStream的基本使用   DataInputStream数据输入流允许应用程序以独立于机器的方式从底层输入流读取原始Java数据类型。应用程序使用数据输出流来写入稍后可以被数据输入流读取的数据。DataInputStream对于多线程访问来说不一定是安全的。 线程安全是可选的,由...

Spring Boot @Component注解下的类 @Autowired 为null

Spring Boot @Component注解下的类 @Autowired 为null【原文】 @Component public class ComponentClass { @Autowired private JedisClient jedisClient; public static Co...

HTML页面使用layer弹出框输入数据

javascript中layer是一款近年来备受青睐的web弹层组件,layer.open对弹出框进行输入信息,并处理返回结果。详细介绍http://layer.layui.com/部署:将layer.js文件和skin目录复制到项目的./static/js目录中,在页面中引用js/layer.js <script >function add_...

免二次请求,selenium直接保存图片元素到本地

Selenium是不少爬虫工程师都会用的一个工具,它对页面元素的属性,文本等的提取都做的不错,但有一个缺点是只能获取到img元素的链接而不是图片二进制(即便在访问时已经加载过了一次图片)。想把指定的img保存到本地,只能使用获取的链接手动下载,不仅多花费了不少时间,而且在某些限制外链的站点还可能遇到下载失败的情况。本文介绍一个直接在selenium中保存图...