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方式传递的数据在服务器端的获取方式也不同。
原文地址:https://www.cnblogs.com/niulina/p/5689619.html