首页 > 代码库 > jQuery-Ajax

jQuery-Ajax

jQuery确实是一个比较不错的轻量级的框架,底层封装了很多代码,能够帮助我们快速的开发一些JS应用,同时也简化了Ajax,dom以及json等等的操作,现在具体说说jQuery是如何执行Ajax的

  1. load方法:

load(url,data,callback)
    * jquery对象调用load()方法,返回内容会自动写入jquery对象内
    * url:请求路径
    * data:请求数据,以key/value形式,json数据格式
    * callback:回调函数,function(data,textStatus,XMLHttpRequest){}
        * data:代表请求返回内容
        * textStatus:代表请求状态,其值可能为: succuss, error, notmodify, timeout 4 种
        * XMLHttpRequest对象
        
    * load()方法的请求类型:
    * 如果客户端没有向服务器端发送请求数据,那么请求类型就是"GET"方式
    * 如果客户端向服务器端发送请求数据,那么请求类型就是"POST"方式
    * load()方法的请求类型,是根据有没有向服务器端发送数据决定的。

这个方法默认使用 GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"
eg:
<script language="JavaScript">
		$("#id").click(function(){
		//将数据封装到json中
		var json = {
				username:$("#username").val(),
				psw:$("#psw").val()
			}
			
		$("#one").load("load01.jsp",json,function(data,textStatus,XMLHttpRequest){
				alert(data);
			});
			
		});
</script>

2.jQuery.get(...)和 jQuery.post(...)方法:

get(url,data,callback,type)
    * url:请求路径
    * data:请求数据,以key/value形式,json数据格式
    * callback:function(data,textstatus){}
        * data:代表返回的内容,可以是 XML 文档, JSON 文件, HTML 片段等
        * textstatus:代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种
    * type:返回内容格式,xml, html, script, json, text, _default。
    * 返回值:XMLHttpRequest
    * get()方法无论发送不发送请求数据,请求类型都是"GET"方式
post(url,data,callback,type)
    * url:请求路径
    * data:请求数据,以key/value形式,json数据格式
    * callback:function(data,textstatus){}
        * data:代表返回的内容,可以是 XML 文档, JSON 文件, HTML 片段等
        * textstatus:代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种
    * type:返回内容格式,xml, html, script, json, text, _default。
    * 返回值:XMLHttpRequest
    * post()方法无论发送不发送请求数据,请求类型都是"POST"方式

发送请求时可进行数据封装,由于类似此处只举一例

<script language="JavaScript">
		$("#b1").click(function(){
		        //自定义的数据封装
			var json = {
				username:$("#username").val(),
				psw:$("#psw").val()
			}
			//可以采用序列化来简化数据封装:
			//将数据封装,接收出得到字符串而取出
			var json = $("#form1").serialize();
			
			//***********************************************
			//也可将数据封装成JSON数据结构
			//注意,此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。
			var fields = $("select, :radio").serializeArray();
			//***********************************************
			$.get("get.jsp",json,function(data,textstatus){
				alert(data);
			});
		});
</script>
//请求的URL接收数据,取出方式:
request.getParameter("username");
request.getParameter("psw");

//将数据包装在out对象中返回:
out.println("Hello World!");

3.jQuery.ajax(options)

这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。
注意: 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。
当设置 datatype 类型为 ‘script‘ 的时候,所有的远程(不在同一个域中)POST请求都回转换为GET方式。
$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。
jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时,jQuery 将自动调用回调函数。(这个我不是很懂)
jQuery.Ajax()还有众多参数,具体可以参考:http://www.php100.com/manual/jquery/
这里有几个Ajax事件参数:beforeSend ,success ,complete ,error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下,这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)

jQuery封装了众多Ajax的方法, 封装了xmlHttpRequest的创建方法,因此是Ajax变得特别简洁