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