当前位置：Gxlcms > JavaScript > 从零开始学习jQuery(六)jquery中的AJAX使用_jquery

从零开始学习jQuery(六)jquery中的AJAX使用_jquery

时间：2021-07-01 10:21:17 帮助过：4人阅读

一.摘要

本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.

本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式.

二.前言

Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数来帮助我们统一这种差异, 并且让调用Ajax更加简单.

三.原始Ajax与jQuery中的Ajax

首先通过实例, 来看一下jQuery实现Ajax有多简单. 下面是一个使用原始Ajax的示例:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery Ajaxtitle>
结果为:

[{"name": "single", "value": "Single"}, {"name": "param", "value": "Multiple"}, {"name": "param", "value": "Multiple3"}, {"name": "check", "value": "check2"}, {"name": "radio", "value": "radio1"}]

六.全局Ajax事件

在jQuery.ajaxSetup( options ) 中的options参数属性中, 有一个global属性:

global

类型:布尔值

默认值: true

说明:是否触发全局的Ajax事件.

这个属性用来设置是否触发全局的Ajax事件. 全局Ajax事件是一系列伴随Ajax请求发生的事件.主要有如下事件:

名称 说明
ajaxComplete( callback ) AJAX 请求完成时执行函数
ajaxError( callback ) AJAX 请求发生错误时执行函数
ajaxSend( callback ) AJAX 请求发送前执行函数
ajaxStart( callback ) AJAX 请求开始时执行函数
ajaxStop( callback ) AJAX 请求结束时执行函数
ajaxSuccess( callback ) AJAX 请求成功时执行函数

用一个示例讲解各个事件的触发顺序:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery Ajax - AjaxEventtitle>

  <script type="text/javascript" src="../scripts/jquery-1.3.2.min.js">script>