jQuery中的ajax

缺乏、安全感 2022-04-23 09:56 177阅读 0赞

jQuery提供了很多封装ajax的方法，通过这些方法，可以使用get或post从服务器远端请求文本，HTML，xml或JSON等形式的数据，同时可以进行信息筛选，获得你想要的数据。

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>ajax()</td> 
   <td>执行一个异步HTTP(Ajax)请求</td> 
  </tr> 
  <tr> 
   <td>get()</td> 
   <td>通过HTTP GET 请求从服务器加载数据</td> 
  </tr> 
  <tr> 
   <td>post()</td> 
   <td>通过HTTP POST 请求从服务器加载数据</td> 
  </tr> 
  <tr> 
   <td>load（）</td> 
   <td>从服务器加载数据，并把返回的HTML插入到匹配的DOM元素中</td> 
  </tr> 
  <tr> 
   <td>getJSON()</td> 
   <td>通过HTTP GET请求从服务器加载JSON编码格式的数据</td> 
  </tr> 
  <tr> 
   <td>getScript()</td> 
   <td>通过HTTP GET请求从服务器加载JavaScript文件并执行该文件</td> 
  </tr> 
 </tbody> 
</table>

get（）与load（）方法  
get()方法通过HTTP GET 请求从服务器获取数据，通过查询字符串的方式来传递请求信息的，语法如下

$.get(url,data,success(response,status,xhr),dataType)

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>url</td> 
   <td>必需，规定将请求发送给的URL地址</td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td>可选，规定连同请求发送到服务器的数据</td> 
  </tr> 
  <tr> 
   <td>success(response,status,xhr)</td> 
   <td>可选，当请求成功时运行的回调函数，response：包含来自请求的结果数据 status：包含请求的状态 xhr:包含XMLHttpRequest对象</td> 
  </tr> 
  <tr> 
   <td>dataType</td> 
   <td>可选，服务器返回的数据类型</td> 
  </tr> 
 </tbody> 
</table>

<scirpt>
       $("#df").click(function(){
           $.get("url",function(data){
              $("#myDiv").html(data);
              },"text");
          });
       });
     </script>

如这个示例，简化了使用，传递了URL和回调函数参数，get()方法以异步的方式向服务器发送请求，然后把响应信息存在回调函数的参数中，客户端通过读取回调函数的参数data，进行解析后显示在客户端 $("\#myDiv").html(data);

get()和post（）二者都是从服务器获取所需数据，但post请求支持发送任意格式，任意数据长度的数据，而不像get请求仅仅限于长度有限的字符串，一般来讲传递大数据量或者XML等格式的数据使用post比较合适。

ajax（）方法  
$.ajax()可以通过发送HTTP请求加载远程数据，是jQuery最底层的ajax实现，可以说ajax（）方法是get(),post()等方法的基础

$.ajax([settings]);

只有一个参数settings,其实他是一个列表结构的对象，用于配置ajax请求的键值对集合，参数很多，这里就不一一列举。实例如下：

$.ajax({
        url:"1.jsp",  //提交的URL路径
        type:"GET",   //发送请求的方式
        data："name=tom",   //发送到服务器的数据
        dataType:"text",    //指定传输的数据格式
        success：function（result）{   //请求成功后执行的代码
            $("#myDiv").html(html.responseText);  //将服务器返回的文本数据显示到页面
        }，
        error：function（）{   // 请求失败后要执行的代码
             alert（"错误"）;
        }

load（）方法  
$.load()方法通过发送ajax请求从服务器加载数据，并把返回的数据放置到指定的元素中

$(selector).load(url,data,function(result,status,xhr));

参数功能与get（）一样，该方法是最简单的从服务器获取数据的ajax方法，几乎与$.get()方法等价，不同的是，当它请求成功后，load（）方法将匹配元素的HTML内容设置为返回的数据，load（）方法能够把加载的网页文件附加到指定的网页标签中。

$("#nameDiv").load(url,data);

以上代码实现了发送异步请求到服务器端，并且当服务器端成功返回数据时，将数据隐式地添加到调用load（）方法的jQuery对象中的功能，等价于以下代码

$.get(url,data,function(result){
           $("#nameDiv").html(result);
    });

$.get(), $.post(),load()等常用ajax方法都是基于 $.ajax()方法封装的，相对于 $.ajax()而言，更加简洁，方便，对于一般的ajax功能需求，使用以上方法即可满足，如果需要更多的灵活性，可以使用 $.ajax()方法。