2014
10-08

jQuery

五、jQuery AJAX

jQuery对Ajax操作进行了封装,简化了AJAX编程。jQuery提供了如下六个方法:

  • $.ajax():jQuery底层ajax实现
  • $.get()、$.post()和load():$.get、$.post底层调用$.ajax,load底层调用$.get、$.post。
  • $.getScript()、$.getJSON():

1、$.ajax:最接近底层

语法:$.ajax([settings]),返回创建的xmlHttpRequest对象。

Demo1:通过$.ajax()加载一段文本

-------------------------------  HTML 代码  -------------------------------
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button id="b01" type="button">Change Content</button>
-------------------------------  jQuery 代码  -------------------------------
$(document).ready(function(){
  $("#b01").click(function(){
textXhr = $.ajax({
  url:"/jquery/test1.txt",
  async:false //同步请求
});
    $("#myDiv").html(textXhr.responseText);
  });
});

Demo2:通过$.ajax()发送数据,与服务器进行异步交互(☆)

$("#ajaxButton").bind("click",function(){
	$.ajax({
		url:"../ajaxServlet",
		type:"post",
		//jQuery Ajax向服务器发送数据的两种方式:
		//① 字符串
		//data:"username=flyne&age=24",
		//② JSON
		data:{
			username:"flyne",
			age:24
		},
		timeout:5000,
		success:function(data){
			alert(data);
		}
	});
});

说明:

① jQuery Ajax发送到服务器的数据(data选项)有两种格式:字符串和JSON,不过最后都是转化成请求字符串格式。

② success:请求成功后的回调函数。回调函数的参数(data)由服务器返回。

2、$.get、$.post、load

1)$.get 通过HTTP GET请求从服务器上请求数据。

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

Demo1:请求GetServlet,忽略返回值:$.get(“GetServlet”);

Demo2:请求GetServlet,传送2个参数,忽略返回值:

$.get(“GetServlet”, { name: “flyne”, age: “24″ } );

Demo3:请求GetServlet,并在请求成功后打印返回值
$.get(“GetServlet”, function(data){
alert(“Data Loaded: ” + data);
});

2)$.post 通过HTTP POST请求从服务器上请求数据

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

用法同$.get

3)load 简单但强大(☆最常用)

用法:$(selector).load(url, [data], [callback])

作用:load()方法从服务器加载数据,并把返回的数据放入匹配元素中。

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

Demo1:可以将jQuery的选择器添加到url参数,url参数的语法结构为“url selector”

-----------------  demo.txt  -----------------
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
-----------------  jQuery 01:将demo.txt的内容加载到div#div1中  -----------------
$("#div1").load("demo.txt");
-----------------  jQuery 02:将demo.txt中id="p1"的元素内容加载到div#div1中 -----------------
$("#div1").load("demo.txt #p1");

即load方法可以只加载某个文件中指定的元素。

3、$.getScript、$.getJSON

1)$.getScript

用法:$.getScript(url, [callback])

作用:通过 HTTP GET 请求载入并执行一个 JavaScript 文件。

Demo1:在需要的时候加载并执行 test.js:$.getScript(“test.js”)

2)$.getJSON:

用法:$.getJSON(url, [data], [callback])

作用:通过 HTTP GET 请求载入JSON 数据。

Demo1:从 test.js载入JSON数据并显示JSON数据中一个name字段数据。
$.getJSON(“test.js”, function(json){
alert(json.users[3].name);
});

4、表单序列化

在客户端与服务器端进行通信时,常常需要将客户端浏览器中的内容发送至服务器端进行处理。如果需要发送的内容较少时,处理比较方便。但在真实项目中往往需要处理的数据内容很复杂。jQuery提供了相应的方法帮助开发者解决这个问题。

serialize()方法:序列化表单内容为字符串

serializeArray():序列化表单内容为JSON对象的数组,每个JSON对象对应着一个表单元素。【注:JSON对象 ≠ JSON字符串】

Demo1:serialize和serializeArray方法的返回值

<form id="form1">
	<input type="text" name="username" value="flyne">

	<input type="radio" name="gender" value="male" checked="checked"/> 男
	<input type="radio" name="gender" value="female"/> 女

	<input type="checkbox" name="hobby" value="eat" checked="checked"/> 吃饭
	<input type="checkbox" name="hobby" value="sleep" checked="checked"/> 睡觉
</form>

则$(“#form1″).serialize()的结果为:username=flyne&gender=male&hobby=eat&hobby=sleep

$(“#form1″).serializeArray()方法的结果是一个JSON对象的数组,数组长度为4,如下图(通过console.info打印到浏览器控制台的截图):

19. jQuery12935

serialize方法可用于异步表单提交,当用户点击了提交表单按钮时,在不重载网页的情况下在后台对表单进行校验,增强用户体验。

六、jQuery插件机制

插件:在原有的功能上进行增强。jQuery的插件分两种:

① 全局方法的插件(创建:$.extend(),使用:$.xxx)

② 局部方法的插件(创建:$.fn.extend(),使用:$(selector).xxx)

1、$.extend()

jQuery.extend()方法能够创建全局方法。

------------------------------jqueryplugin.js完成邮箱格式的检验------------------------------
$.extend({
   validate:function(email){
      //做真实的需求开发,要使用正则匹配
      if(email == "jy@flyne.org"){
         return true;
      }else{
         return false;
      }
   }
});
------------------------------/plugins/plugins.html------------------------------
var flag = $.validate("jieyu90@qq.com");
alert(flag);//false

2、$.fn.extends

$.fn.extend({
test:function(str){
   //扩展的插件的业务逻辑……
   alert(str);
}
});
使用:
$("body").test("打印我啊");

jQuery》有 2 条评论

留下一个回复

你的email不会被公开。