jQuery源码中的Ajax--get()/post()方法

  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()方法主要做了两个工作:

  1. 处理参数
  2. 调用$.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请求方式的区别

  1. GET请求会将参数跟在URL后进行传递,而post请求则是作为HTTP消息的实体内容发送给web服务器。
  2. GET方式对传输的数据有大小限制(通常不能大于2kb),而使用POST方式传递的数据量要比GET方式大的多。
  3. GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号和密码等。在某种情况下,GET方式会带来严重的安全性问题,而POST方式相对来说可以避免这些问题。
  4. GET方式和POST方式传递的数据在服务器端的获取方式也不同。
时间: 2024-08-01 06:39:17

jQuery源码中的Ajax--get()/post()方法的相关文章

jQuery源码中的Ajax--serialize()/serializeArray()/param()方法

由于jQueryObject.serialize()方法的核心是$.param()方法,所以先学习$.param()方法. 一.$.param()方法 $.param()方法是用来对一个数组或对象按照key/value进行序列化,以便用于URL查询字符串或AJAX请求.其返回的字符串已经过URL编码处理(采用的字符集为UTF-8). 语法: jQuery.param( obj [, traditional ] ) 参数如下: 参数 描述 obj 需要被序列化的JS对象. traditional

关于jQuery源码中(function(window,undefined){//dosomething()})(window)写法解释

一.首先是最常见的闭包 (Closure) 范式自执行函数的写法,这里用匿名函数封装(构造块级作用域),避免了匿名函数内部的代码与外部之间发生冲突(如使用了相同的变量名). 1 (function() {// ...})(); 二.自执行函数和其他函数类似,都可以传入参数:jQuery源码中将window作为一个参数传入, window是DOM对象模型的最顶层对象,把全局变量传进来,就避免了到外层去寻找,提高效率: 1 (function(window) {// ...})(window); 当

jQuery源码中的Ajax--getScript()/getJson()方法

一.$.getScript()方法 有时候,在页面初次加载时就取得所需的全部Javascript文件是完全没必要的,可以按需所取. 该函数用于动态加载JS文件,并在全局作用域下执行文件中的JS代码. 该函数可以加载跨域的JS文件.请注意,该函数是通过异步方式加载数据的. 该函数属于全局jQuery对象. 语法: $(function(){ $("send").on("click",function(){ $.getScript("script.js&quo

jQuery源码中的Ajax--load方法

load()方法是jQuery中最为简单和常用的方法,能载入远程HTML代码幷插入到DOM中,其结构为: load(url [.data] [.callback]) 各参数解释如下: 参数名称 类型 说明 url String 请求HTML页面的URL地址 data(可选) Object 发送至服务器的key/value数据 callback(可选) Function 请求完成时的回调函数,无论请求成功或失败 load的源码如下:(源码目录:jquery/src/ajax/load.js) de

关于jquery源码中undefined作为参数的理解

大家先看一下,下面代码 (function (window,undefined) {window.alert('zhangling');var person = {};person.addName = function () { };person.addAge = function () { };})(window) 压缩后: (function(a,b){a.alert('zhangling');var c={};c.addName=function(){};c.addAge=function

在看 jquery 源码中发现的一些优化方向

1. 避免使用 $.fn.each 或 $.each 因为它比原生的 for/while 真的会慢一些,循环次数越多差距越大. 另外,对象的 for-in 比 for 是要快一丢丢的,但数组的 for-in 要比 for 慢 2. 选择器 始终要相信,原生的普遍要快一些,因此 jquery 也是如此, id 选择器 $('#id') / 元素标签选择器 $('input') / 类选择器 $('.class') 都是原生的 而伪类选择器 $(':hidden') / 属性选择器 $('[data

jquery源码中的(function(window, undefined){})(window)【转】

(function( window, undefined ) {})(window);这个,为什么要将window和undefined作为参数传给它? (function( $, undefined ) {})(jQuery); 同理 因为 ecmascript 执行JS代码是从里到外,因此把全局变量window或jQuery对象传进来,就避免了到外层去寻找,提高效率.undefined在老一辈的浏览器是不被支持的,直接使用会报错,js框架要考虑到兼容性,因此增加一个形参undefined. 还

Jquery源码中的Javascript基础知识(四)— jQuery.fn.init方法

$() 即调用了jQuery.fn.init方法 jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); } 下面是init方法代码: 1 init: function( selector, context, rootjQuery ) { 2 var match, elem; 3 if ( !selector ) { 4 return this; 5

jQuery源码05 (3653 , 3797) queue() : 队列方法 : 执行顺序的管理

//对外接口 jQuery.extend({ queue: function( elem, type, data ) {//入队.元素.队列名字.存进去的函数 //jQuery.queue( this, type, function( next, hooks ) {}) var queue; if ( elem ) { type = ( type || "fx" ) + "queue";//不写队列名字就是fx // $.queue( document , 'q1'