jQuery--Ajax之ajax()方法详解

本是古典何须时尚 2021-08-14 02:05 447阅读 0赞

#### $.ajax()方法： ####

$.ajax()方法是jQuery最底层的Ajax实现。其语法格式如下：

$.ajax(options)

该方法只有一个参数，但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息，参数以key/value形式存在，所有参数都是可选的。

<table> 
 <thead> 
  <tr> 
   <th align="center">参数名称</th> 
   <th align="center">类型</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">async</td> 
   <td align="center">Boolean</td> 
   <td align="left">是否为异步请求（默认为true）</td> 
  </tr> 
  <tr> 
   <td align="center">contentType</td> 
   <td align="center">String</td> 
   <td align="left">发送至服务器时内容的编码类型。（默认为"application/x-www-form-urlencoded"）</td> 
  </tr> 
  <tr> 
   <td align="center">url</td> 
   <td align="center">String</td> 
   <td align="left">（默认为当前页面地址）发送请求的地址</td> 
  </tr> 
  <tr> 
   <td align="center">type</td> 
   <td align="center">String</td> 
   <td align="left">请求方式（POST或GET）默认为GET</td> 
  </tr> 
  <tr> 
   <td align="center">timeout</td> 
   <td align="center">Number</td> 
   <td align="left">设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置</td> 
  </tr> 
  <tr> 
   <td align="center">data</td> 
   <td align="center">Object或String</td> 
   <td align="left">发送到服务器的数据。如果已经不是字符串，将自动转换字符串格式。GET请求中将附加在URL后。放置这种自动转换，可以查看processData选项。对象必须为key/value格式。例如{key1:“value1”,key2:“value2”}转换为key1=value1&amp;key2=value2.如果是数组，jQuery将自动为不同值对应同一个名称</td> 
  </tr> 
  <tr> 
   <td align="center">dataType</td> 
   <td align="center">String</td> 
   <td align="left">预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息返回responseXML或responseText，并作为回调函数参数传递。<br>可用的类型如下：<br>xml：返回XML文档，可用jQuery处理<br>html：返回纯文本HTML信息：包含的script标签会在插入DOM时执行<br>script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意，在远程请求时（不再同一个城下），所有的POST请求都转换为GET请求<br>json：返回JSON数据<br>jsonp：返回JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，jQuery将自动替换后一个“？”为正确函数名，以执行回调函数<br>text:纯文本字符串</td> 
  </tr> 
  <tr> 
   <td align="center">beforeSend</td> 
   <td align="center">Function</td> 
   <td align="left">发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次Ajax请求。XMLHttpRequest是唯一的参数</td> 
  </tr> 
  <tr> 
   <td align="center">complete</td> 
   <td align="center">Function</td> 
   <td align="left">请求完成后调用的回调函数（请求失败或成功均调用），参数为XMLHttpRequest对象和一个描述成功请求类型的字符串</td> 
  </tr> 
  <tr> 
   <td align="center">success</td> 
   <td align="center">Function</td> 
   <td align="left">请求成功后调用的回调函数，有两个参数。<br>data：由服务器返回，并根据dataType参数进行处理后的数据<br>textStatus：描述状态的字符串</td> 
  </tr> 
  <tr> 
   <td align="center">error</td> 
   <td align="center">Function</td> 
   <td align="left">请求失败时调用的函数。该函数有三个参数。<br>XMLHttpRequest对象、错误信息、捕获的错误对象（可选）</td> 
  </tr> 
  <tr> 
   <td align="center">global</td> 
   <td align="center">Boolean</td> 
   <td align="left">默认为true。表示是否触发全局Ajax事件。设置为false将不会触发全局Ajax事件，AjaxStart或AjaxStop可用用于控制各种Ajaxshijian</td> 
  </tr> 
 </tbody> 
</table>

示例：  
主页面：

<%--
      Created by IntelliJ IDEA.
      User: 19798
      Date: 2019/10/3
      Time: 10:56
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>ajax</title>
        <script src="<%=request.getContextPath()%>/js/jquery-2.1.0.js" type="text/javascript"></script>
        <script type="text/javascript"> $(function () { //post请求 $("#ajaxId").on("click", function () { $.ajax( { url:"response.jsp", async:"true", type:"POST", data:{ "username":"Hello", "password":"123456"}, dataType:"json", success:function (data) { $("#resText").html(data.username + ":" + data.password); }, error:function () { alert("资源获取失败！") } } ); }); }); </script>
    </head>
    <body>
        <button id="ajaxId" value="getAjax">getAjax</button>
        <div id="resText"></div>
    </body>
    </html>

响应页面response.jsp：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String jsonStr = "{\"username\":\"" + username + "\",\"password\":\"" + password +"\"}";
        response.getWriter().write(jsonStr);
    %>

点击按钮，页面显示：  
![在这里插入图片描述][20191003192755761.png]

[20191003192755761.png]: /images/20210813/76423034f1ad40818004269b33758508.png