• 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方式传递的数据在服务器端的获取方式也不同。
  • 相关阅读:
    bfs两种记录路径方法
    次小生成树
    2018 ICPC 区域赛 焦作场 D. Keiichi Tsuchiya the Drift King(计算几何)
    数组分组
    POJ
    数位DP详解
    2018ICPC青岛 E
    HDU
    Google工程师打造Remix OS系统 桌面版安卓下载
    使用angular封装echarts
  • 原文地址:https://www.cnblogs.com/niulina/p/5689619.html
Copyright © 2020-2023  润新知