Jquery Ajax - 从服务器加载各种数据的方法

Jquery Ajax - 从服务器加载数据

 

1. $.post()

     $.post()是$.ajax()的一种简略形式。作用上等价于

 $.ajax ({    type: "POST",      url: url,       data: data,      success: success,      dataType: dataType  });

 $.post("ajax/test.html", function(data) {        $("div#result").html(data);   });

使用POST请求提取的页面永远不会缓存。$.ajaxSetup()函数中的cache和ifModfied选项也不会对这些请求产生影响。

 

     Jquery.post(url[,    data] [,      success(data, textStatus, XMLHttpRequest)][,     dataType]);

     - url:　必选，是一个字符串，用于指定要请求的资源的URL地址。

     - data: 可选， 值为映射或者字符串。用于指定通过HTTP POST请求项服务器发送的数据。

     - success: 可选，请求成功时的回调函数。可以接受3个参数。

                  ~data: 表示服务器返回的数据

                  ~textStatus: 表示响应状态文本

                  ~XMLHttpRequest: 表示XMLHttpRequest对象

      - dataType: 可选，其值是一个字符串，用于指定从服务器得到的数据类型：xml, html, script, json, jsonp 或text.

      - post()的返回值，是由它创建的XMLHttpRequest对象。

  

2. $.get(url[, data][, callback][, dataType])

    是$.get()是$.ajax()的一种简略形式。作用等价于

    $.ajax ({   url: url,       data: data,      success: success,      dataType: dataType  });

 

3. load() - 加载HTML文档

     从远程服务器上加载HTML代码并插入到DOM中并返回jQuery对象。

     $.load(url[, data][, callback]);

       - url：一个字符串，指定要加载的HTML页面的URL地址

       - data：可选参数，类型为映射(这个可以？)或者字符串，指定要发送到服务器的数据(键/值对)

       - callback：可选参数，指定在ajax请求完成(未必成功)时执行的参数。callback回调函数可以接受3个参数：表示服务器响应的文本，响应状态，及XMLHttpRequest对象。

              function(responseText,textStatus, XMLHttpRequest) {

              //this指向与object匹配的DOM元素，textStatus可能值包括success,error,notmodified,timeout

              }

 

    加载HTML文档时，所使用的请求方法与传入的附加参数有关。 

       -  向服务器发送一个GET请求：   当未提供要发送的数据，或者将该参数的值设置为一个字符串（key1=value1&key2=value2）。

       -  向服务器发送一个POST请求： 当要发送的数据设置为一个对象或者映射({key1:value1,key2:value2})

 

     当使用.load()方法时，允许按照形如"url #some > selector"的语法在url参数中附加1个选择符，以筛选要加载的HTML文档。此时，仅将筛选出的HTML代码块，而不是整个目标HTML文档插入DOM树中。

      

4. jQuery.getJSON()加载JSON数据

 $.getJSON()是$.ajax()方法的一种简略形式，作用等价于

     $.ajax(url:url, dataType:"json", data:data, success:success);

 

  jQuery命名空间下的getJSON方法可以通过GET请求从服务器加载JSON数据

  jQuery.getJSON(url[, data][, callback(data, textStatus)]);

    - url：是一个字符串，用于指定要请求的URL地址；

    - data：是字符串或映射，给出通过请求发送到服务器的数据；

    - callback：是请求成功时执行的回调函数，其参数

            ~data：表示服务器返回的数据，可以是javascript对象或数组。他们可以按照JSON结构定义并使用eval()函数进行解析。

            ~textStatus：表示响应状态文本。

     - getJSON()返回值是它所创建的XMLHttpRequest对象。

 

  如果所指定的URL位于远程服务器上，则请求被视为JSONP.

  

5. jQuery.getScript()加载JavaScript脚本

    $.getScript()是$.get()方法的一种简略形式，作用等价于

 

    $.ajax(url:url, dataType:"script", success: success);

 

 javascript脚本既可以直接嵌入HTML文档中，也可以独立的.js文件存在，并通过<script>标记导入一般在HTML中导入所需的全部javascript文件，以便在初次加载页面时就去的这些文件。

     不过有时候也需要动态加载JS脚本。 可以通过2种方式实现：

      方法1：动态创建<script>标记并插入页面首部。动态加载并执行其中包含的代码。但加载成功后无法做进一步的处理

      方法2：使用jQuery命名空间下的getScript()方法从服务器加载JS脚本文件并加以执行。要解决方法1的问题，可以使用getScript()方法通过GET请求从服务器上加载JS文件并加以执行。

 方法1：

    $("button#run").click(function(){

          $("<script/>").attr("src","ajax/test.js").appendTo("head");

      }); 

方法2：

     jQuery.getScript(url[, success(data, textStatus)]);

      - success：可选参数，用于指定请求成功时执行的回调函数，它带有2个参数：

          ~ data：表示服务器响应的数据(即JS文件包含的源码)

      - getScript() 返回值是它创建的XMLHttpRequest对象。

    

    $.getScript()被调用时，可以通过引用文件名来加载和运行脚本，并在加载成功后执行回调函数。由于脚本是在全局上下文中执行，因此可以在脚本中引用其他变量，也可以使用jQuery函数。

    $.getScript("ajax/test.js", function(){

            alert("脚本已经加载并运行。");

     });