jQuery慢慢啃之ajax（九）

1.jQuery.ajax(url,[settings])//通过 HTTP 请求加载远程数据

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

  • beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
  • error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
  • dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
  • success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
  • complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

通过dataType选项还可以指定其他不同数据处理方式。除了单纯的XML，还可以指定 html、json、jsonp、script或者text。

其中，text和xml类型返回的数据不会经过处理。数据仅仅简单的将XMLHttpRequest的responseText或responseHTML属性传递给success回调函数，

如果指定为html类型，任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行。类似的，指定script类型的话，也会先执行服务器端生成JavaScript，然后再把脚本作为一个文本数据返回。

2.load(url, [data], [callback])//载入远程 HTML 文件代码并插入至 DOM 中。

$("#links").load("/Main_Page #p-Getting-Started li");//加载文章侧边栏导航部分至一个无序列表。根据返回的页面的内容用筛选器筛选一部分需要的元素。
$("#feeds").load("feeds.html");/加载 feeds.html 文件内容。因为没有传递参数，所以默认为get方式

$("#feeds").load("feeds.php", {limit: 25}, function(){   alert("The last 25 entries in the feed have been loaded"); });//和前面那个一样只是带有参数，所以用post方式传递

3.jQuery.get(url, [data], [callback], [type])//通过远程 HTTP GET 请求载入信息

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

$.get("test.php");//请求 test.php 网页，忽略返回值。
$.get("test.php", { name: "John", time: "2pm" } );//请求 test.php 网页，传送2个参数，忽略返回值。
$.get("test.php", function(data){  alert("Data Loaded: " + data);});//显示 test.php 返回值(HTML 或 XML，取决于返回值)。
$.get("test.cgi", { name: "John", time: "2pm" }, function(data){ alert("Data Loaded: " + data);});//显示 test.cgi 返回值(HTML 或 XML，取决于返回值)，添加一组请求参数。
 

4.jQuery.getJSON(url, [data], [callback])//通过 HTTP GET 请求载入 JSON 数据。

//从 Flickr JSONP API 载入 4 张最新的关于猫的图片。

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){
  $.each(data.items, function(i,item){
    $("<img/>").attr("src", item.media.m).appendTo("#images");
    if ( i == 3 ) return false;
  });
});
$.getJSON("test.js", function(json){  alert("JSON Data: " + json.users[3].name);});
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){alert("JSON Data: " + json.users[3].name);});//带参数的调用

5.jQuery.getScript(url, [callback])//通过 HTTP GET 请求载入并执行一个 JavaScript 文件

<button id="go">» Run</button>
<div class="block"></div>
jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){
  $("#go").click(function(){
    $(".block").animate( { backgroundColor: ‘pink‘ }, 1000).animate( { backgroundColor: ‘blue‘ }, 1000);
  });
});
$.getScript("test.js");//加载并执行 test.js。 
$.getScript("test.js", function(){ alert("Script loaded and executed.");});//加载并执行 test.js ，成功后显示信息。

6.jQuery.post(url, [data], [callback], [type])//通过远程 HTTP POST 请求载入信息。

url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

$.post("test.php");//请求 test.php 网页，忽略返回值：
$.post("test.php", { name: "John", time: "2pm" } );//请求 test.php 页面，并一起发送一些额外的数据（同时仍然忽略返回值）：
$.post("test.php", { ‘choices[]‘: ["Jon", "Susan"] });//向服务器传递数据数组（同时仍然忽略返回值）：
$.post("test.php", $("#testform").serialize());//使用 ajax 请求发送表单数据
$.post("test.php", function(data){ alert("Data Loaded: " + data); });//输出来自请求页面 test.php 的结果（HTML 或 XML，取决于所返回的内容）
$.post("test.php", { name: "John", time: "2pm" },function(data){alert("Data Loaded: " + data);});//向页面 test.php 发送数据，并输出结果（HTML 或 XML，取决于所返回的内容）
$.post("test.php",{ name:"John",time:"2pm"},function(data){process(data);},"xml");//获得 test.php页面的内容，并存储为XMLHttpResponse 对象，并通过process() 这个js函数进行处理
$.post("test.php", { "func": "getNameAndTime" },function(data){alert(data.name);console.log(data.time);}, "json");//获得 test.php 页面返回的 json 格式的内容

7.ajaxComplete(callback)//AJAX 请求完成时执行函数。Ajax 事件。

 $("#msg").ajaxComplete(function(event,request, settings){ $(this).append("<li>请求完成.</li>");});//AJAX 请求完成时执行函数。
$("#txt").ajaxStart(function(){ $("#wait").css("display","block");});当 AJAX 请求正在进行时显示“正在加载”的指示
$("#txt").ajaxComplete(function(){$("#wait").css("display","none");});


8.ajaxError(callback)//AJAX 请求发生错误时执行函数

function (event, XMLHttpRequest, ajaxOptions, thrownError) {      // thrownError 只有当异常发生时才会被传递
      this; // 监听的 dom 元素
}
$("#msg").ajaxError(function(event,request, settings){
     $(this).append("<li>出错页面:" + settings.url + "</li>");
});


9.ajaxSend(callback)//AJAX 请求发送前执行函数。

 $("#msg").ajaxSend(function(evt, request, settings){ $(this).append("<li>开始请求: " + settings.url + "</li>");});//AJAX 请求发送前显示信息。

10.ajaxStart(callback)//AJAX 请求开始时执行函数。Ajax 事件。

 $("#loading").ajaxStart(function(){ $(this).show();});//AJAX 请求开始时显示信息。

11.ajaxStop(callback)//AJAX 请求结束时执行函数。

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

12.ajaxSuccess(callback)//AJAX 请求成功时执行函数。

 $("#msg").ajaxSuccess(function(evt, request, settings){ $(this).append("<li>请求成功!</li>"); });

13.jQuery.ajaxPrefilter( [dataTypes] , handler(options, originalOptions, jqXHR) )

14.jQuery.ajaxSetup([options])//设置全局 AJAX 默认选项。

//设置 AJAX 请求默认地址为 "/xmlhttp/"，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。

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

15.serialize()//序列表表格内容为字符串

<p id="results"><b>Results: </b> </p>
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2" checked="checked"/> check2
  <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2
</form>
$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );

16.serializeArray()//序列化表格元素 (类似 ‘.serialize()‘ 方法) 返回 JSON 数据结构数据

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

返回的JSON对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对——name参数和value参数（如果value不为空的话）。举例来说：

 [
     {name: ‘firstname‘, value: ‘Hello‘},
     {name: ‘lastname‘, value: ‘World‘},
     {name: ‘alias‘}, // this one was empty
  ]

取得表单内容并插入到网页中。

<p id="results"><b>Results:</b> </p>
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2" checked="checked"/> check2
  <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2
</form>
var fields = $("select, :radio").serializeArray();
jQuery.each( fields, function(i, field){
  $("#results").append(field.value + " ");
});
时间： 2024-10-13 21:01:56

jQuery慢慢啃之ajax（九）的相关文章

jQuery慢慢啃之工具（十）

1.jQuery.support//一组用于展示不同浏览器各自特性和bug的属性集合 2.jQuery.browser//浏览器内核标识.依据 navigator.userAgent 判断. 可用值: safari opera  msie mozilla 3.jQuery.browser.version//浏览器渲染引擎版本号 4.jQuery.boxModel//浏览器是否使用标准盒模型渲染页面. 建议使用 jQuery.support.boxModel 代替.W3C CSS 盒模型. 5.j

jQuery慢慢啃之CSS（五）

1.css(name|pro|[,val|fn])//访问匹配元素的样式属性 $("p").css("color");//获取 $("p").css({ "color": "#ff0011", "background": "blue" });//属性组设置 $("p").css("color","red");

jQuery慢慢啃（四）

1.eq(index|-index) 获取第N个元素 其中负数:一个整数,指示元素的位置,从集合中的最后一个元素开始倒数.(1算起) $("p").eq(1)//获取匹配的第二个元素 $("p").eq(-2)//获取倒数匹配的第二个元素 2.$('li').first()//获取第一个元素 $('li').last()//获取最后个元素 $(this).hasClass("protected")和 $(this).is(".prote

jQuery慢慢啃之CSS（七）

1.ready(fn)//当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. $(document).ready(function(){ // 在这里写你的代码...}); 使用 $(document).ready() 的简写,同时内部的 jQuery 代码依然使用 $ 作为别名,而不管全局的 $ 为何. $(function($) { // 你可以在这里继续使用$作为别名... }); 2.on(events,[selector],[data],fn)//在选择元素上绑定一个或多个事件的事

jQuery慢慢啃之文档处理（五）

1.append(content|fn)//向每个匹配的元素内部追加内容. $("p").append("<b>Hello</b>"); 2.appendTo(content)//把所有匹配的元素追加到另一个指定的元素元素集合中. $("p").appendTo("div"); appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几

jQuery慢慢啃之特效（八）

1.show([speed,[easing],[fn]])\\显示隐藏的匹配元素 //speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000) //easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear" $("p").show() $("p").s

jQuery慢慢啃之事件对象（十一）

1.event.currentTarget//在事件冒泡阶段中的当前DOM元素 $("p").click(function(event) { alert( event.currentTarget === this ); // true }); 2.event.data//当前执行的处理器被绑定的时候,包含可选的数据传递给jQuery.fn.bind. $("a").each(function(i) { $(this).bind('click', {index:i},

jQuery慢慢啃（三）

1.attr(name|properties|key,value|fn)设置或返回被选元素的属性值. $("img").attr("src");//获取属性 $("img").attr({ src: "test.jpg", alt: "Test Image" });//设置多个属性 $("img").attr("src","test.jpg");/

通过jQuery或ScriptManager以Ajax方式访问服务

1.客户端和服务端 服务端对外提供服务时,可以通过handler或者webservice.handler比较轻便,但是难以对外公开,只有程序员自己知道它到底做了些什么工作.webservice可以将服务对外公开,调用也方便,更加专业些.如果不是要公开的接口,handler完全可以胜任了.下面是将webservice发布的效果. 客户端在调用服务端的服务时,最简单的莫过于使用jQuery了.当然微软也提供了ScriptMananger来访问WebService.他们之间的关系可以用下图说明. 2.