AJax技术

jQuery ajax用法与ajax学习笔记

字号+ 作者:H5之家 来源:H5之家 2015-09-17 08:18 我要评论( )

jquery中的ajax包括了几种方法,如有post,get,ajax,load,getjson,getscript等等这些都可以实现ajax异步传输数据了,下面我来介绍自己人的jquery ajax学习笔记本

jquery中的ajax包括了几种方法,如有post,get,ajax,load,getjson,getscript等等这些都可以实现ajax异步传输数据了,下面我来介绍自己人的jquery ajax学习笔记本吧。

.$.post(url, params, callback) 用post的方式下载一个页面返回XMLHttpRequest

url: 请求的页面

params:表示请求的要发送的参数.

callback: 请求结束后,调用的方法

eg:

 代码如下 复制代码

$.post("test.cgi",
{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
}
);


ajaxStart(callback) 当ajax请求发送前,将触发callback.

eg;

 代码如下 复制代码

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

ajaxSend(callback)当ajax请求发送时触发callback,参数是XMLHttpRequest和settings请求设置eg:

 代码如下 复制代码

$("#msg").ajaxSend(function(request, settings){
  $(this).append("<li>Starting request at " + settings.url + "</li>");
});

ajaxComplete(callback)当一个ajax请求完成时调用callback.回调参数为XMLHttpRequest和settings请求设置eg:

 代码如下 复制代码

$("#msg").ajaxComplete(function(request, settings){
  $(this).append("<li>Request Complete.</li>");
});

ajaxSuccess(callback)当一个ajax请求成功时调用回调参数为XMLHttpRequest和settings请求设置eg:

 代码如下 复制代码

$("#msg").ajaxSuccess(function(request, settings){
  $(this).append("<li>Successful Request!</li>");
});

ajaxError(callback)当一个ajax请求失败时调用回调参数为XMLHttpRequest和settings请求设置eg:

 代码如下 复制代码

$("#msg").ajaxError(function(request, settings){
  $(this).append("<li>Error requesting page " + settings.url + "</li>");
});

ajaxStop(callback)当所有的ajax请求结束时,将触发callback

eg:

 代码如下 复制代码

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

load(url, params, callback)加载url的内容,并把得到的内容插入到DOM中去. 注意:避免去获取script脚本.可以用$.getScripturl:请求的页面,params:发送的参数.callback: 调用完成后的回调函数.eg:

 代码如下 复制代码

<div id="feeds"></div>$("#feeds").load("feeds.html")==><div id="feeds"><b>45</b> feeds found.</div>;

loadIfModified(url, params,callback)功能与85点的load方法一模一样.唯一的区别是,当服务器端根据LastModify判断出没有什么改动的话.就不进行请求.也不进行dom插入.

serialize()这是一个十分有用的方法.一般用来序列化进行ajax请求的参数.十分方便eg

 代码如下 复制代码

:<input type='text' value='John'/>
<input type='text' value='Boston'/>$("input[@type=text]").serialize();==>name=John&location=Boston


 

.$.ajax(params)这个方法是jQuery中调用ajax的最基本方法,功能十分强大.参数是一个对象.所有的参数用key:value的形式设置

下面主要介绍一下各种参数:

(string)url: 要请求的网址,可以把参数get参数设置到url上面

(string)type: 请求的类型,可以是Post与get,默认情况下是GET

(string)dataType: 你所期望返回的数据格式,可以是xml,html,script,json.最终返回类型还是服务器决定.

(Boolean)ifModified:只当返回值改变的时候才会成功返回正确值.主要判断依据是请求头的Last-Modified.默认情况下,这个值设置为false

(Number)timeout:设置请求时间,这个时间会替换全局的时间($.ajaxTimeout)

(Boolean)global:是否触发全局的ajax事件句柄.例如ajaxStart,ajaxStop.默认情况是true

(Function)error: 请求错误处理的函数.

(Function)success: 请求成功处理的函数.

(Function)complete:请求完成处理的函数.

(Object|string)data:发送到服务器端的数据.如果不是字符串,则被转化成字符串,被加到url上面,做为查询字符串.如果不想用默认的方式处理,可以设置processData状态.

(Boolean)processData.默认情况是true,把object转化成string,做查询字符串.可以设置为false,则以DOMDocments发送.

(String)contentType.默认是"application/x-www-form-urlencoded",一般情况不用修改.

(Boolean)async .默认值为true.表示异步请求,如果想改成同步.只要把设为false就可以了.

(Function)beforeSend.用于对在发送请求之前,对请求头的设置.有XMLHttpRequest做为参数

例子:

取一个js文件.

 代码如下 复制代码

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
})

post数据到服务器端,并且成功时提示用户.

 代码如下 复制代码

$.ajax({
  type: "POST",
  url: "some.php",
  data: "name=John&location=Boston",
  success: function(msg){
    alert( "Data Saved: " + msg );
  }
});

同步请求数据

 代码如下 复制代码

var html = $.ajax({
 url: "some.php",
 async: false
})

.responseText;传送domdocument,data将不会被强行转化.var xmlDocument = [create xml document];

 代码如下 复制代码

$.ajax({
  url: "page.php",
  processData: false,
  data: xmlDocument,
  success: handleResponse
});


$.ajaxSetup(settings)设置一个全局的ajax变量.一般用来设置一些公用的请求头设置.

 代码如下 复制代码

$.ajaxSetup( {
  url: "/xmlhttp/",
  global: false,
  type: "POST"
} );
$.ajax({ data: myData });

$.ajaxTimeout(time) 设置全局ajax请求时间,当time为0或者null时表示不限时间$.ajaxTimeout( 5000 ); //表示最长5秒请求.

$.get(url, params, callback)下载一个页面.url:页面地址,params: 参数,是key/value的mapcallback: 请求结束后调用的方法eg:

 代码如下 复制代码

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JQuery实现Ajax加载图片的方法

    JQuery实现Ajax加载图片的方法

    2016-02-24 17:01

  • 判断用户是不是为ajax请求

    判断用户是不是为ajax请求

    2016-02-24 17:00

  • Ajax与WEB开发 by alixixi.com

    Ajax与WEB开发 by alixixi.com

    2016-02-11 11:02

  • jQuery.ajax()的相关参数及使用

    jQuery.ajax()的相关参数及使用

    2016-02-08 16:00

网友点评