zoukankan      html  css  js  c++  java
  • Jquery ajax 详解(Day_16)

    太在意别人的看法最后会有两种结局,要么自己累死,要么让别人整死。


     

    • 简介

      AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。

      简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。

      1、AJAX load 方法

      load() 方法通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中。

    注释:还存在一个名为 load 的 jQuery 事件方法。调用哪个,取决于参数。

    语法:

    load(url,data,function(response,status,xhr))
    参数 描述
    url 规定要将请求发送到哪个 URL。
    data 可选。规定连同请求发送到服务器的数据。
    function(responseTxt,statusTxt,xhr)

    可选。规定当请求完成时运行的函数。

    额外的参数:

    • responseTxt - 包含来自请求的结果数据
    • statusTxt - 包含请求的状态("success", "notmodified", "error", "timeout" 或 "parsererror")
    • xhr - 包含 XMLHttpRequest 对象

     下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功,则显示"外部内容加载成功!",而如果失败,则显示错误消息:

    1 $("button").click(function(){
    2   $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    3     if(statusTxt=="success")
    4       alert("外部内容加载成功!");
    5     if(statusTxt=="error")
    6       alert("Error: "+xhr.status+": "+xhr.statusText);
    7   });
    8 });

       2、$.AJAX 

     1  语法:$.ajax({键值对});
     2        //使用$.ajax()发送异步请求
     3               $.ajax({
     4                   url:"ajaxServlet1111" , // 请求路径
     5                   type:"POST" , //请求方式
     6                   //data: "username=jack&age=23",//请求参数
     7                   data:{"username":"jack","age":23},
     8                   success:function (data) {
     9                       alert(data);
    10                   },//响应成功后的回调函数
    11                   error:function () {
    12                       alert("出错啦...")
    13                   },//表示如果请求响应出现错误,会执行的回调函数
    14   
    15                   dataType:"text"//设置接受到的响应数据的格式
    16               });

      2、$.get() 方法

      $.get() 方法通过 HTTP GET 请求从服务器上请求数据。

    语法:

    $.get(URL,[data],[callback],[type]);

      使用 $.get() 方法从服务器上的一个文件中取回数据:

    $("button").click(function(){
      $.get("demo_test.php",function(data,status){
        alert("数据: " + data + "
    状态: " + status);
      });
    });

      

      2、$.post() 方法

       $.post() 方法通过 HTTP POST 请求向服务器提交数据。

    语法:

    $.post(URL,[data],[callback],[type]);

      使用 $.post() 连同请求一起发送数据:

    1 $("button").click(function(){
    2     $.post("/try/ajax/demo_test_post.php",
    3     {
    4         url:"AjaxServlet"
    5     },
    6     function(data,status){
    7         alert("数据: 
    " + data + "
    状态: " + status);
    8     });
    9 });
    参数: 描述:
    url 请求路径
    data 请求参数
    callback 回调函数
    type 响应结果类型
    • GET 和 POST 方法的区别

    1、发送的数据数量

      在 GET 中,只能发送有限数量的数据,因为数据是在 URL 中发送的。

      在 POST 中,可以发送大量的数据,因为数据是在正文主体中发送的。

    2、安全性

      GET 方法发送的数据不受保护,因为数据在 URL 栏中公开,这增加了漏洞和黑客攻击的风险。

      POST 方法发送的数据是安全的,因为数据未在 URL 栏中公开,还可以在其中使用多种编码技术,这使其具有弹性。

    3、加入书签中

      GET 查询的结果可以加入书签中,因为它以 URL 的形式存在;而 POST 查询的结果无法加入书签中。

    4、编码

      在表单中使用 GET 方法时,数据类型中只接受 ASCII 字符。

      在表单提交时,POST 方法不绑定表单数据类型,并允许二进制和 ASCII 字符。

    5、可变大小

      GET 方法中的可变大小约为 2000 个字符。

      POST 方法最多允许 8 Mb 的可变大小。

    6、缓存

      GET 方法的数据是可缓存的,而 POST 方法的数据是无法缓存的。

    7、主要作用

      GET 方法主要用于获取信息。而 POST 方法主要用于更新数据。

     


    PS:

    如果,您希望更容易地发现我的新博客,不妨点击一下关注。

    如果你觉得本篇文章对你有所帮助,请给予我更多的鼓励,

    因为,我的写作热情也离不开您的肯定支持,感谢您的阅读,我是【肥肥也】!

  • 相关阅读:
    [CC-STREETTA]The Street
    [CF115E]Linear Kingdom Races
    [洛谷P3987]我永远喜欢珂朵莉~
    [POI2012]Squarks
    [TC6194]AllWoundUp
    [CF434D]Nanami's Power Plant
    [CF126D]Fibonacci Sums/[BJOI2012]最多的方案
    [HZOI 2016]我们爱数数
    [COGS2427][HZOI 2016]seq
    Ynoi2018 天降之物
  • 原文地址:https://www.cnblogs.com/papercy/p/13866103.html
Copyright © 2011-2022 走看看