jQuery中的AJAX编程API

ゞ浴缸里的玫瑰 2022-02-24 13:14 166阅读 0赞

## jQuery AJAX ##

直接使用JS进行AJAX编程需要考虑不同浏览器的兼容性，且代码过于繁多。  
jQuery中对此进行了封装，以便快速调用。

## API ##

`$.ajax(url, ?settings) - jqXHR`  
`$.get(url, ?data, ?success, ?dataType)`  
`$.post(url, ?data, ?success, ?dataType)`  
`$.getJSON(url, ?data, ?success)`  
其中：  
\- `success`为`Function( Anything data, String textStatus, jqXHR jqXHR )`  
\- `error`为`Function( jqXHR jqXHR, String textStatus, String errorThrown )`

## `jQuery.ajax(url, ?settings)` ##

`settings`对象的常用成员属性有：  
`async`: 是否异步执行AJAX请求。默认为`true`。  
`method`: 发送的HTTP请求方法类型，默认为`GET`。  
`contentType`: 发送`POST`请求的格式。默认为`application/x-www-form-urlencoded; charseet=UTF-8`，也可以指定为`text/plain`或`application/json`。  
`headers`: 发送的额外的HTTP头，必须是一个`object`。  
`dataType`: 接收的数据格式。可以为`text, json, xml, html`等。默认值根据响应的`content-Type`猜测。  
`data`: 发送的数据，可以使字符串，数组或object。  
如果是`GET`请求，`data`会被转换成query串，附加到URL上。  
如果是`POST`请求，根据`contentType`把data序列化成合适的格式。  
成员方法：  
`success`: function( Anything data, String textStatus, jqXHR jqXHR )  
`error`: function( jqXHR jqXHR, String textStatus, String errorThrown )

`jQuery.ajax()`返回一个`jqXHR`对象，它类似于[Promise][]对象(ES6新特性)，可以用链式语法处理各种回调。

$.ajax(url, {
        /* settings */
    }).done(function() {
    
    }).fail(function() {
    
    }).always(function() {
    
    });
    
    // 相当于
    $.ajax(url, {
      /* settings */
    }).then(doneFn, failFn);

## Other Tips ##

*  `contentType`和**跨域**

Note: For cross-domain requests, setting the content type to anything other than 
    application/x-www-form-urlencoded, multipart/form-data, or text/plain 
    will trigger the browser to send a preflight OPTIONS request to the server.
    
    注意:对于跨域请求，将contentType设置为application/x-www-form-urlencoded、multipart/form-data或text/plain
    之外的任何内容都将触发浏览器向服务器发送飞行前选项请求。

[Promise]: https://blog.csdn.net/wuyujin1997/article/details/89293418