jQuery-Ajax

jQuery确实是一个比较不错的轻量级的框架,底层封装了不少代码,可以帮助咱们快速的开发一些JS应用,同时也简化了Ajax,dom以及json等等的操做,如今具体说说jQuery是如何执行Ajax的
php

  1. load方法:html

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(...)方法:
java

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"方式

发送请求时可进行数据封装,因为相似此处只举一例
jquery

<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)ajax

这个是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变得特别简洁json

相关文章
相关标签/搜索