一、概述

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

  写法:load(url, [data], [callback])

       url: String类型—请求HTML页面的URL地址

       data:Object类型—发送至服务器的key/value数据

       callback:Function类型—请求完成时的毁掉函数,无论请求成功或失败。

二、load()方法

1.概述

  load()方法是jQuery中最常用和简单的Ajax方法。

  能载入远程的HTML文件并插入至DOM中。

2.传递方式

  load()方法的传递方式根据参数data来自动制定。

  默认使用GET方式,传递附加参数时自动转换为POST方法。

3.参数

  Object类型—发送至服务器的key/value数据。

4.回调函数

  对于必须在加载完成后才能继续的操作,load()方法提供了回调函数,该函数有三个参数。

  responseTest:请求返回的内容。

  textStatus:请求的状态,有success、error、notmodified、timeout 4种。

  XMLHttpRequest:XMLHttpRequest对象。

5.示例

①GET方式

$("#feeds").load("feeds.html");

②POST方式

$("#feeds").load("feeds.php", {limit: 25}, function(responseText, textStatus, XMLHttpRequest){
alert("The last 25 entries in the feed have been loaded");
});

三、GET方法

1.概述

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

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

2.参数

  url:String类型—请求的HTML页的URL地址。

  data:Object类型—发送至服务器的key/value数据会作为QueryString附加到请求URL中。

  callback:载入成功时执行回调函数(只有当Response的返回状态时success才调用该方法)自动将请求的结果和状态传递给该方法。如果需要在出错时执行函数,需要使用$.ajax()方法。

3.回调函数

  回调函数只有当数据成功返回后才会被调用,这点与load()方法不同。 

  $.get()方法的回调函数只有两个参数。

  data:请求返回的内容。

  textStatus:请求的状态。

4.返回内容格式

  xml, html, json, script, text _default。

5.示例

①返回HTML片段

$("#send").click(function(){
$.get("get1.asp", {
username : $("#username").val() ,
content : $("#content").val()
}, function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})

由于服务器端返回的数据格式是HTML片段,因此并不需要经过处理就可以将新的HTML数据插入到主页面中。

②返回XML文档

$("#send").click(function () {
$.get("get2.asp", {
username: $("#username").val(),
content: $("#content").val()
}, function (data, textStatus) {
var username = $(data).find("comment").attr("username");
var content = $(data).find("comment content").text();
var txtHtml = "<div class='comment'><h6>" + username + ":</h6><p class='para'>" + content + "</p></div>";
});
})

由于服务器端返回的数据格式是XML文档,因此需要对返回的数据进行处理。

③返回JSON文件

$("#send").click(function () {
$.get("get3.asp", {
username: $("#username").val(),
content: $("#content").val()
}, function (data, textStatus) {
var username = data.username;
var content = data.content;
var txtHtml = "<div class='comment'><h6>" + username + ":</h6><p class='para'>" + content + "</p></div>";
$("#resText").html(txtHtml); // 把返回的数据添加到页面上
}, "json");
})

由于服务器端返回的数据格式是JSON文件,因此需要对返回的数据进行处理之后,才可以将新的HTML数据添加到主页面中。

④在不需要与其他应用程序共享数据的时候,使用HTML片段来提供返回数据一般来说是最简单的;如果需要重用,那么JSON文件时不错的选择,它在性能和文件大小方面具有优势;而当远程应用程序未知时,XML文档时明智的选择,它是Web服务领域的“世界语”。

四、$.post()方法

1.概述

  该方法的使用类似于$.get()方法。区别在于是通过HTTP POST请求载入信息的。

  写法:$.post(url, [data], [callback], [type])

2.与$.get()方法的区别

  Request对象功能是从客户端得到数据,常用的三种取得数据的方法是:Request.Form、Request.QueryString,Request。其第三种是前两种的一个缩写,可以取代前两种情况。而前两种主要对应的Form提交时的两种不同的提交方法:分别是Post方法和Get方法。

  $.get()方法可以通过 Request.QueryString["a"]和Request["a"]来取得参数;

  $.post()方法只可以通过Request["a"]来取得参数。

五、$.ajax()方法

1.概述

  jQuery底层AJAX实现,$.ajax()返回其创建的XMLHttpRequest对象。

  $.ajax()方法不仅能实现与$.load()、$.get()和$.post()方法同样的功能,而且还可以设定beforeSend(提交前回调函数)、error(请求失败后处理)、success(请求成功后处理)以及complete(请求完成后处理)回调函数,通过这些回调函数可以给用户更多的Ajax提示信息。

  写法:$.ajax(options)

2.参数

(1)url:String类型—(默认为当前地址)发送请求的地址

type:String类型—请求方式,默认为GET。

    timeout:Number类型—设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置

data:Object或String类型—发送到服务器的数据。如果不是字符串,将自动转换为字符串格式。Get请求中将附加在URL后。例如:{foo1:"bar1", foo2:"bar2"}转换为&fool=bar1&foo2=bar2。

dataType:String类型—预期服务器返回的数据类型。如果不指定,jQuery将自动根据HTTP包MIME信息返回responseXML或responseText,并作为回调函数参数传递。

               可用的类型如下:xml、html、script、json、jsonp、text

global:Boolean类型—默认为true。表示是否出发全局Ajax事件。设置false将不会触发全局Ajax事件,AjaxStart或AjaxStop可用于控制各种Ajax事件。

(2)回调函数:Function类型

如果要处理$.ajax()得到的数据,则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

  • beforeSend: 在发送请求之前调用,并且传入一个XMLHttpRequest作为参数。在beforSend中如果返回false可以取消本次Ajax请求

    • function(XMLHttpRequest) {
      this;//调用本次Ajax请求时传递的options参数
      } 
  • error: 在请求出错时调用。3个参数,传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话)

    • function(XMLHttpRequest, textStatus, errorThrown) {
      //通常情况下textStatus和errorThown只有其中一个包含信息
      this;//调用本次ajax请求时传递的options参数
      } 
  • dataFilter: 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。
  • success: 当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
    • function(data, textStatus) {
      //data由服务器返回,并根据dataType参数进行出后的数据。可能是xmlDoc、 jsonObj、html、text等类型。
      this;//调用本次Ajax请求时传递的options参数
      }  

       

  • complete: 当请求完成之后调用这个函数,无论成功或失败。传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串。
    • function(XMLHttpRequest, textStatus) {
      this;//调用本次Ajax请求时传递的options参数
      }  

六、序列化元素

1.serialize()方法

  提交表单时,序列化表单内容为字符串。  

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

2.serializeArray()方法

  序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。

注意:此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。

   返回的JSON对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对——name参数和value参数(如果value不为空的话)

   eg:

  [
{name: 'firstname', value: 'Hello'},
{name: 'lastname', value: 'World'}
]

3.$.param()方法

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

  eg:

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

七、jQuery中的Ajax全局事件

1.概述

  通过jQuery提供的一些自定义全局函数,能够为各种与Ajax相关的事件注册回调函数。例如当Ajax请求开始时,会触发ajaxStart()方法的回调函数;当Ajax请求结束时,会触发ajaxStop()方法的回调函数。这些方法都是全局的方法,因此无论创建它们的代码位于何处,只要有Ajax请求发生时,就会触发它们。

2.典型应用

  读取远程图片时速度可能会比较忙,如果加载的过程中,不给用户提供一些提示和反馈信息,很容易让用户误认为按钮单击无用,使用户对网站失去信心。此时就需要为网页添加一个提示信息“加载中...”,代码如下:  

<div id="loading">加载中...</div>

$("#loading").ajaxStart(function(){
$(this).show();
}); $("#loading").ajaxStop(function(){
$(this).hide();
});

3.另外几个方法

ajaxComplete:Ajax请求完成时执行的函数。

ajaxError:Ajax请求错误时执行的函数,捕捉到的错误可以作为最后一个参数传递。

ajaxSend:Ajax请求发送前执行的函数。

ajaxSuccess:Ajax请求成功时执行的函数。

jQuery Ajax使用总结的更多相关文章

  1. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  2. jquery ajax解析

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...

  3. jQuery.ajax 根据不同的Content-Type做出不同的响应

    使用H5+ASP.NET General Handler开发项目,使用ajax进行前后端的通讯.有一个场景需求是根据服务器返回的不同数据类型,前端进行不同的响应,这里记录下如何使用$.ajax实现该需 ...

  4. jQuery.ajax(url,[settings])

    概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象. ...

  5. jQuery Ajax 实例 ($.ajax、$.post、$.get)

    jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...

  6. jQuery Ajax传值给Servlet,在Servlet里Get接受参数乱码的解决方法

    最近在学jquery ui,在做一个小功能的时候需要将前台的值获取到,通过Ajax传递给Servlet,然后再在返回数据结果,但是在Servlet接受参数的时候,通过后台打印,发现接受乱码,代码示例如 ...

  7. JQuery+Ajax+Struts2+Hibernate 实现完整的登录注册

    写在最前: 下午有招聘会,不想去,总觉得没有准备好,而且都是一些不对口的公司,可是又静不下心来,就来写个博客. 最近在仿造一个书城的网站:http://www.yousuu.com ,UI直接拿来用, ...

  8. 用.NET MVC实现长轮询,与jQuery.AJAX即时双向通信

    两周前用长轮询做了一个Chat,并移植到了Azure,还写了篇博客http://www.cnblogs.com/indream/p/3187540.html,让大家帮忙测试. 首先感谢300位注册用户 ...

  9. jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

  10. 用JQuery Ajax 与一般处理程序 请求数据无刷新,以及如何调试错误

    通过 ajax() 与 一般处理程序,请求数据库数据,实现界面无刷新. Jquery ajax 请求参数详细说明 http://www.w3school.com.cn/jquery/ajax_ajax ...

随机推荐

  1. HttpWatch工具简介及使用技巧(转)

    HttpWatch是一个可用于录制HTTP请求信息的工具,由Simtec Limited公司开发,其官网为:Http://www.httpwatch.com,HttpWatch只支持IE和Firefo ...

  2. Python背景知识——学习笔记

    诞生于1989圣诞节,阿姆斯特丹.Guido van Rossum(吉多·范罗苏姆). Python Python:解释型.面向对象.动态数据类型 的 高级程序设计语言. 解释型语言:运行的时候将程序 ...

  3. 响应式布局中为什么要使用em设置字体大小而不用px

    px像素(Pixel).相对长度单位.像素px是相对于不同设备显示器屏幕分辨率(pad/phone/pc)而言的.(引自CSS2.0手册) 1em指的是一个字体的大小,它会继承父级元素的字体大小,因此 ...

  4. 使用 Estimator 构建卷积神经网络

    来源于:https://tensorflow.google.cn/tutorials/estimators/cnn 强烈建议前往学习 tf.layers 模块提供一个可用于轻松构建神经网络的高级 AP ...

  5. a标签点击后,给a标签添加样式

    window.onload=function(){ var a = document.getElementById("cate").getElementsByTagName(&qu ...

  6. 杂记之--苹果4s手机呼叫转移怎么设置

    您好,呼叫转移只需在拨号界面输入相应的代码就可以,无需其他设置无条件转移 **21*电话号码#再按拨号键 取消代码:##21# *#21# 再按拨号键无信号,关机转移 **62*电话号码#再按拨号键 ...

  7. open() 函数以 w+ 模式打开文件

    这种模式打开文件时,会先清空文件,然后才执行读写操作,当我们要执行读操作时,需要通过 seek() 方法将读取指针移到前面,才能读取内容 [root@localhost ~]$ cat 1.txt # ...

  8. 统计nginx进程占用的物理内存

    #!/usr/bin/env python #-*- coding:utf-8 -*- ''' 统计nginx进程占用的物理内存 ''' import os import sys import sub ...

  9. 2D绘图引擎比较

    这个问题很普遍.最近在研究这个问题,在网上搜了一些资料,再结合自己的经验,谈谈自己的一些想法. 一.双缓存能提高绘图效率吗? 网上有篇文章:绘图效率完整解决方案——三种手段提高GDI/GDI+绘图效率 ...

  10. SPOJ 375 QTREE

    题目链接:传送门 题目大意:给一棵无根树,树边有权值,有很多次操作,QUERY代表询问从 x 到 y 路径上的边的最大 权值,CHANGE代表改变按输入顺序第 x 条边的权值为 y. 对于每个QUER ...