load()方法通常用来在web服务器上获取静态的数据文件,如果需要传递一些参数给服务器中的页面,那就可以使用$.get()方法或$.post()方法。
*$.get()方法和$.post()方法是jQuery中的全局函数
一、$.get()方法
$.get()方法是使用GET方式来进行异步请求。结构为:
$.get(url [.data] [.callback] [.type])
参数解释如下:
参数名称 | 类型 | 说明 |
url | String | 请求的HTML页的url地址 |
data(可选) | Object | 发送至服务器的key/value数据会作为QueryString附加到请求URL中 |
callback(可选) | Function | 载入成功时回调函数(只有当Response的返回状态是success才调用该方法)自动将请求结果和状态传递给该方法 |
type(可选) | String | 服务器返回内容的格式,包括xml、html、script、json、text和_default |
- 在$.get()的回调函数中有两个参数,分别为data、textStatus,其中data是返回的内容,可以是xml文档、json文件、html片段;textStatus是请求状态,分别有success、error、notmodified、timeout四种,只有在textStatus为success时,回调函数才会被调用。
1.数据格式为HTML:
- 由于服务器返回的数据格式是HTML片段,因此并不需要经过处理就可以将新的HTML数据插入到主页面中。
- 常用的是直接在$.get()的回调函数中,使用$("XXX").html(data)将返回的data插入到主页面中。
2.数据格式为XML:
- 由于返回数据的格式是xml,所以需对返回的数据进行处理,可以使用常规的attr()、find()、filter()以及其他的处理方法。
- 例如服务器脚本为:
<?php header("Content-Type:text/xml; charset=utf-8"); *由于期待服务器端返回的格式是xml文档,因此需要在服务器端设置Content-Type类型 echo "<?xml version=‘1.0‘ encoding=‘utf-8‘?>". "<comments>". "<comment username=‘{$_REQUEST[‘username‘] }‘ >". "<content>{$_REQUEST[‘content‘]}</content>". "</comment>". "</comments>"; ?>
此时便可在$.get()的回调函数中利用$(data).find("comment").attr("username");找到含有username属性的comment元素,然后获得username属性的值,然后自己组成一个html片段,再使用$("XXX").html(html片段)将html片段插入到主页面中。
3.数据格式为json:
- json相比于xml更加轻量级,但是语义性较差。
- 由于返回数据的格式是xml,所以需对返回的数据进行处理。
- 例如服务器脚本为(PHP):
<?php header("Content-Type:text/html; charset=utf-8"); echo "{ \"username\" : \"{$_REQUEST[‘username‘]}\" , \"content\" : \"{$_REQUEST[‘content‘]}\"}" ?>
此时便可在$.get()的回调函数中利用data.username、data.content获取json文件的username值和content值。然后自己组成一个html片段,再使用$("XXX").html(html片段)将html片段插入到主页面中。
二、$.post()方法
$.post()方法是使用POST方式来进行异步请求。其语法结构与$.get()方法相同。
*当load()方法带有参数传递时,会使用post方式发送请求。
三、$.get()方法和$.post()的源码
$.get()方法和$.post()的源码如下:(源码目录:jquery/src/ajax.js)
jQuery.each( [ "get", "post" ], function( i, method ) { jQuery[ method ] = function( url, data, callback, type ) { // Shift arguments if data argument was omitted if ( jQuery.isFunction( data ) ) { type = type || callback; callback = data; data = undefined; } // The url can be an options object (which then must have .url) return jQuery.ajax( jQuery.extend( { url: url, type: method, dataType: type, data: data, success: callback }, jQuery.isPlainObject( url ) && url ) ); }; } );
$.get()方法和$.post()方法主要做了两个工作:
- 处理参数
- 调用$.ajax()方法。
*其中jQuery.each()方法的介绍可以看这篇:
http://www.365mini.com/page/jquery_each.htm
*其中jQuery.extend()方法的介绍可以看这篇:
http://www.365mini.com/page/jquery_extend.htm
*其中jQuery.isPlainObject()方法的介绍可以看这篇:
http://www.365mini.com/page/jquery_isplainobject.htm
*$.get()方法和$.post()方法也是对$.ajax()方法进行了封装,属于第二层方法。
四、GET请求方式和POST请求方式的区别
- GET请求会将参数跟在URL后进行传递,而post请求则是作为HTTP消息的实体内容发送给web服务器。
- GET方式对传输的数据有大小限制(通常不能大于2kb),而使用POST方式传递的数据量要比GET方式大的多。
- GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号和密码等。在某种情况下,GET方式会带来严重的安全性问题,而POST方式相对来说可以避免这些问题。
- GET方式和POST方式传递的数据在服务器端的获取方式也不同。