jQuery Ajax使用总结

一、概述

  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
时间: 2024-11-17 02:39:30

jQuery Ajax使用总结的相关文章

jquery ajax 方法及各参数详解

jquery ajax 方法及各参数详解 1.$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息. 参数列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET".注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分

Django1.7+JQuery+Ajax集成小例子

Ajax的出现让Web展现了更新的活力,基本所有的语言,都动态支持Ajax与起服务端进行通信,并在页面实现无刷新动态交互. 下面是散仙使用Django+Jquery+Ajax的方式来模拟实现了一个验证用户注册时,用户名存在不存在的一个小应用.注意,验证存在不存在使用的是Ajax的方式,不用让用户点击按钮验证是否存在. 截图如下: 页面HTML代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta

JQuery ajax 在aspx中传值和取值

传值:ajax中的data(json)  js代码: <script type="text/javascript"> $(function () { $("#btnAddNews").bind("click", function () { var _name= $.trim($("#txtNewTitle").val()); $.ajax({ type: "POST", url: "A

jquery ajax跨域的完美解决方法(jsonp方式)

ajax跨域请求的问题,JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式,接下来为大家详细介绍下客户端JQuery.ajax的调用代码 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquer

jQuery Ajax 全解析

jQuery Ajax 全解析 本文地址: jQuery Ajax 全解析 本文作者:QLeelulu 转载请标明出处! jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [d

jQuery Ajax -附示例

jQuery其实就是一个JavaScript的类库,其将复杂的功能做了上层封装,使得开发者可以在其基础上写更少的代码实现更多的功能. jQuery 不是生产者,而是大自然搬运工. jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject 注:2.+版本不再支持IE9以下的浏览器 时机: 如果发送的是[普通数据] -> jQuery,XMLHttpRequest,iframe 如果发送的是[文件] -> iframe,jQuery(FormData对象),XMLH

jQuery - AJAX (来源于W3C)

jQuery - AJAX 简介 AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新. 什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示. 使用 AJAX 的应用程序案例:谷歌地图.腾讯微博.优酷视频.人人网等等. 关于 jQuery 与 AJAX jQuery 提供多个与 AJAX 有

jQuery.ajax(url,[settings])

概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性. 最简单的情况下,$.ajax()可以不带任何参数直接使用. 注意,所有的选项都可以通过$.ajaxSetup()函数来全局设置. 回调函数 如果要处理$.ajax()得到的数据,则需要使用回调函数.beforeSen

20150304+JQuery+AJax+插件-01

The Write Less,Do More--jQuery下 目录 The Write Less,Do More--jQuery下 1 一.each方法 2 二.jQuery中的ajax操作 3 1.ajax的底层实现 4 2.ajax的高级实现 7 1)模拟发送get请求 7 2)通过时间戳解决get请求缓存问题 8 3)模拟post请求 8 4)返回值类型 9 三.Ajax跨域请求--jsonp技术 11 1.Ajax跨域请求原理图 11 2.Ajax跨域请求不被允许的原因 11 3.js

jQuery AJAX 方法

jQuery AJAX 方法 AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分. 下面的表格列出了所有的 jQuery AJAX 方法: 方法 描述 $.ajax() 执行异步 AJAX 请求 $.ajaxPrefilter() 在每个请求发送之前且被 $.ajax() 处理之前,处理自定义 Ajax 选项或修改已存在选项 $.ajaxSetup() 为将来的 AJAX 请求设置默认值 $.ajaxTransport() 创建处理 Ajax 数据实际传送的对象