$.ajax()方法

绝地灬酷狼 2022-05-12 13:36 165阅读 0赞

## 什么是 AJAX？ ##

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

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

### jQuery Ajax 常用几个操作函数 ###

<table> 
 <tbody> 
  <tr> 
   <th>函数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jquery/ajax_ajax.asp" rel="nofollow">jQuery.ajax()</a></td> 
   <td>执行异步 HTTP (Ajax) 请求。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jquery/ajax_serialize.asp" rel="nofollow">.serialize()</a></td> 
   <td>将表单内容序列化为字符串。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jquery/ajax_serializearray.asp" rel="nofollow">.serializeArray()</a></td> 
   <td>序列化表单元素，返回 JSON 数据结构数据。</td> 
  </tr> 
 </tbody> 
</table>

**jquery中的ajax方法参数总是记不住，这里记录一下**

### 参数选项可选 ###

**1）type**

类型：String

默认值: "GET"。请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。18）

**2）url**

类型：String

默认值: 当前页地址。发送请求的地址。

**3）data**

类型：String

**发送到服务器的数据**。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 \{foo:\["bar1", "bar2"\]\} 转换为 '&foo=bar1&foo=bar2'。

**4）dataType**

类型：String

**预期服务器返回的数据类型**。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

*  "xml": 返回 XML 文档，可用 jQuery 处理。
 *  "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
 *  "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
 *  "json": 返回 JSON 数据 。
 *  "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
 *  "text": 返回纯文本字符串

**5）contentType**

类型：String

默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。

**6）async**

类型：Boolean

默认值: true。默认设置下，所有请求均为异步请求。**如果需要发送同步请求，请将此选项设置为 false**。

注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

**7）cache**

类型：Boolean

默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。

jQuery 1.2 新功能。

**8）context**

类型：Object

这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 **this 就指向调用本次 AJAX 请求时传递的 options 参数**）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。

**9）jsonp**

类型：String

在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分，比如 \{jsonp:'onJsonPLoad'\} 会导致将 "onJsonPLoad=?" 传给服务器。

**10）jsonpCallback**

类型：String

为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。

**11）global**

类型：Boolean

是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。

**12）ifModified**

类型：Boolean

仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中，它也会检查服务器指定的 'etag' 来确定数据没有被修改过。

**13）username**

类型：String

用于响应 HTTP 访问认证请求的用户名。

**14）password**

类型：String

用于响应 HTTP 访问认证请求的密码

**15）processData**

类型：Boolean

默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

**16）scriptCharset**

类型：String

只有当请求时 dataType 为 "jsonp" 或 "script"，并且 type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。

**17）traditional**

类型：Boolean

如果你想要用传统的方式来序列化数据，那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。

**18）timeout**

类型：Number

设置请求超时时间（毫秒）。此设置将覆盖全局设置。

## 回调函数 ##

**1）success**

类型：Function

请求成功后的回调函数。

参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。

**2）error**

类型：Function

默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。

有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。

如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 "timeout", "error", "notmodified" 和 "parsererror"。

error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert(XMLHttpRequest.status);
        alert(XMLHttpRequest.readyState);
        alert(textStatus);
        /*错误信息处理*/           
    }

**第一个参数 jqXHR jqXHR：**这里的jqXHR是一个jqXHR对象，在Jquery1.4和1.4版本之前返回的是XMLHttpRequest对象，1.5版本以后则开始使用jqXHR对象，该对象是一个超集，就是该对象不仅包括XMLHttpRequest对象，还包含其他更多的详细属性和信息。这里**主要有4个属性**：

*  readyState :当前状态, 0 - 未初始化，1 - 正在载入，2 - 载入完成，3 - 数据进行交互，4 - 完成。
 *  status  ：返回的HTTP状态码，比如常见的404,500等错误代码。
 *  statusText ：对应状态码的错误信息，比如404错误信息是not found,500是Internal Server Error。
 *  responseText ：服务器响应返回的文本信息

XMLHttpRequest.readyState: 状态码的意思  
0 － （未初始化）还没有调用send()方法  
1 － （载入）已调用send()方法，正在发送请求  
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容  
3 － （交互）正在解析响应内容  
4 － （完成）响应内容解析完成，可以在客户端调用了

**第二个参数 String textStatus：**返回的是字符串类型，表示**返回的状态**，根据服务器不同的错误可能返回下面这些信息："timeout"（超时）, "error"（错误）, "abort"(中止), "parsererror"（解析错误），还有可能返回空值。

**第三个参数 String errorThrown：**也是字符串类型，表示**服务器抛出返回的错误信息**，如果产生的是HTTP错误，那么返回的信息就是HTTP状态码对应的错误信息，比如404的Not Found,500错误的Internal Server Error。

**3）beforeSend(XHR)**

类型：Function

发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。

XMLHttpRequest 对象是唯一的参数。

这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。

**4）complete(XHR, TS)**

类型：Function

请求完成后回调函数 (请求成功或失败之后均调用)。

参数： XMLHttpRequest 对象和一个描述请求类型的字符串。

**5）dataFilter**

类型：Function

给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。

### 一、实例：data数据为简单类型 ###

$.ajax({
        type : "post",
        url : "/sshweb_ui/user/addUser",
        data : {
            username: $("#username").val(),
    	password: $("#password").val(),
        },
        dataType : 'json',
        success : function(data) {
    	if(data.statusCode == "200"){
    	    alert("role",data.message);
    	}else{
     	    alert(data.message);
     	}
    				
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);         
        }						
    });

### 二、实例：data数据为复杂类型 ###

user类中有role对象属性

$.ajax({
        type : "post",
        url : "/sshweb_ui/user/addUser",
        //如果user对象为简单类型可不写， 复杂类型set等，必须声明请求的数据类型为json格式
        contentType: "application/json;charset=utf-8",
        //传过去的数据格式，从js的对象格式转化为jsonStr格式:stringify()
        data:JSON.stringify({
    	username: row.username,
    	password: row.password,
    	regDate: row.regDate,
    	roles: [{id:$("#roleValueId").val(),roleName:$("#roleTextName").val()}]
        }),    
        success : function(data) {
    	if(data.statusCode == "200"){
    	    alert("role",data.message);
    	}else{
     	    alert(data.message);
     	}
    				
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);         
        }						
    });