jquery关于ajax那些事

>前言

最近在公司做项目时，前端ajax交互用到的比较多，才发现自己对ajax一知半解，好多概念还没有搞清楚，故整理该篇文章以待日后翻阅。

## 常用的ajax请求方式
* $.ajax({name:value, name:value, ... })
	>只有一个参数且该参数是一组**key/value**对象，包含各选项及回调函数信息。
	
	```javascript
	$.ajax({
		type: "post",
		url: 'http://www.example.com/user/query',
		data:{username:"zhangsan"},
		success: function (data) {console.log(data);}
	});
	```
* $.get(url,data,function(data,status,xhr),dataType)

| 参数 | 	描述 |
|--|--|
| url |必需。请求URL。  |
| data |可选。请求数据。  |
|success|可选。当请求成功时运行的函数；函数形式：function(data,status,xhr){...},其中参数data表示服务器返回的数据；status表示请求的状态；xhr表示XMLHttpRequest 对象|
|dataType|可选。预期的服务器响应的数据类型。默认jQuery 会根据请求响应头智能判断|

```javascript
$.get(
	"http://www.example.com/user/query",
	{username: "zhangsan"},
	function(data){
		alert(data);
	}
);
```
	
* $.post(url,data,function(data,status,xhr),dataType)

```javascript
$.post(
	"http://www.example.com/user/query",
	{username: "zhangsan"},
	function(data){
		alert(data);
	}
	})
```
* $.getJSON(url,data,success(data,status,xhr))

```javascript
$.getJSON(
	"http://www.example.com/user/query?username=zhangsan",
	function(data){
		console.log(data);
	}
);
```

## ajax请求简单参数解释
| 参数  | 描述 |
|--|--|
|url  | 请求地址  |
| type | 请求类型，默认get  |
|  timeout | 请求超时时间  |
| async | 是否异步请求，默认为true |
| cache |  是否从缓存中加载请求信息,默认为true |
| dataFilter |该参数是对ajax返回的原始数据进行预处理，提供data和type两个参数。data是Ajax返回的原始数据，type则是dataType参数。 |
| beforeSend | 发送请求前运行的函数，函数形式：function(data,status,xhr){...},其中参数data表示服务器返回的数据；status表示请求的状态；xhr表示XMLHttpRequest 对象。若函数返回false可以取消本次ajax请求|
| success |  当请求成功时运行的函数，函数形式同上面的beforeSend |	
|error  |  如果请求失败要运行的函数，函数形式同上面的beforeSend|	
| complete |  请求完成时运行的函数（在请求成功或失败之后均调用），函数形式同上面的beforeSend |	
| ifModified | 若为true则表示仅在服务器数据改变时获取新数据。默认为false，即忽略头信息。服务器数据改变判断的依据是Last-Modified头信息 |	
|username  | 要求为String类型的参数，用于响应HTTP访问认证请求的用户名 |	
| password  | 要求为String类型的参数，用于响应HTTP访问认证请求的密码 |	
| scriptCharset| 规定请求的字符集。 |	
| jsonp| 在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分。 |	
| global | 表示是否触发全局ajax事件，要求为Boolean类型的参数，默认为true |

## ajax请求重要参数解释
* data
	>Object或String类型的参数，发送到服务器的数据。**如果不是字符串，将自动转换为字符串格式**。
get请求中会将参数序列化附加在url后。例如{username:"jack",age:"18"}转换为&username=jack&age=18附加在请求url后面。如果需要防止这种自动转换，可以设置processData（防止自动转换）为false。

* dataType
	>这个是**预期服务器返回的数据类型**，而不是你发送给服务器的数据类型。如果不指定，jquery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
	>* xml：返回XML文档
	> * html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
	> * script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
	> * json：返回JSON数据。
	> * jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
	> * text：返回纯文本字符串。
* contentType：
	>内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
	
* processData：
	>默认为true的情况下，发送的数据将被转换为对象(即`&username=jack&age=18`这样的形式),以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。processData 默认为true，当设置为false的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
	
## ajax请求头添加Content-Type的两种方式

* 方式一
	```javascript
		$.ajax({
			type: "post",
			url: 'http://www.example.com/user/query',
			data:{username:"zhangsan"},
			contentType:"application/json",
			success: function (data) {console.log(data);}
		}
		});
	```
* 方式二：
	```javascript
		$.ajax({
			type: "post",
			url: 'http://www.example.com/user/query',
			data:{username:"zhangsan"},
	   		beforeSend:function (xhr) {
	                    xhr.setRequestHeader("Content-Type", "application/json");      
	            },
			success: function (data) {console.log(data);}
		}
	```
## application/x-www-form-urlencoded 和 application/json 两种类型的数据的区别
>ajax 请求默认使用contentType等于`"application/x-www-form-urlencoded"`这种格式的特点就是如果你的请求数据是简单的json对象类型如`data:{username:"zhangsan",age:18}`则也会被ajax会序列化成`user=张三&age=18` 这种形式发送到服务端，需要注意一点这种转换时只能识别json对象类型，不能识别json字符串类型，**如果是get请求则附在在请求url后面**， **而 post 请求则是使用请求体，参数不在请求url 中**，在请求体中的参数表现形式也是 `user=zhangsan&age=18` 的形式。
>当contentType等于`"application/json"`时，这表示发送的数据是json格式的字符串，如果ajax中设置为该类型，则发送的json对象必须要使用`JSON.stringify`进行序列化成字符串才能和设定的这个类型匹配。

## Spring如何接收ajax传递的数据
当`contentType`没有设置即表示采用ajax默认的`"application/x-www-form-urlencoded"`，后台可通过以下方式获取参数
* 原生的Servlet使用request.getParameter(“user”)获取参数；
* spring mvc中框架可自动根据参数名进行匹配，即表单元素的name属性和接收参数的名称一样时即可自动匹配；如果不一样，还可以使用@RequestParam,@ModelAttribute以及@RequestBody 的方式匹配。

当`contentType`设置成即`"application/json"`，后台可通过以下方式获取参数
* 需要使用@RequestBody来注解，这样才能将发送过来的json字符串解析绑定到对应的 pojo 属性上。另外，需注意一点，json字符串在书写时名称部分需要加上“”双引号，以免一些json解析器无法识别。

## ajax如何传递multipart/form-data类型数据
>解决这个问题需要用到FormData，该对象用以将数据编译成键值对的形式来发送数据。一般都是用于发送表单数据，但也可以用于手动构造键值对数据，而独立于表单使用。

```javascript
var avatar=$("input[type='file']")[0];
var formData = new FormData();
formData.append("username", "zhangsan");
formData.append("password",123456789);
formData.append("avatar", avatar.files[0]);
    $.ajax({
        url:'http://www.example.com/user/avatar/upload/',
        dataType:'json',
        type:'POST',
        data: formData,
        processData : false, // 关闭默认的数据处理即不做处理
        contentType : false, // 不要默认设置Content-Type请求头
        success: function(data){
            console.log(data);
        },
        error:function(response){
            console.log(response);
        }
    });
```
## ajax请求数据中文编码问题
如果你是通过form提交的，那就不需要对参数进行编码，但是如果是由ajax发送请求到后台的，就需要对参数进行encodeURI编码，否则，会导致后台出现各种乱码。

* url中参数处理
	>如果参数是通过URL传递那么需要编码两次;第一次编码是对中文进行编码；第二次是对转码后的%进行编码处理；
	
	```javascript
	//encodeURI("张三")="%E5%BC%A0%E4%B8%89"`;
	//encodeURI("%E5%BC%A0%E4%B8%89")="%25E5%25BC%25A0%25E4%25B8%2589"
	var username=encodeURI(encodeURI("张三"))
	$.ajax({
			type: "get",
			url: 'http://www.example.com/user/query?username='+username,
			success: function (data) {console.log(data);}
		}
	});
	```
* 请求体中参数处理
	>如果是请求体中含有中文参数，那么只需要编码一次即可。
	
	```javascript
	$.ajax({
			type: "get",
			url: 'http://www.example.com/user/query',
			data:{username:encodeURI("张三")}
			success: function (data) {console.log(data);}
		}
	});
	```
是那么后台在获取到参数需要通过`URLDecoder.decode(username,"utf-8");`进行解码即可。

发表评论 取消回复

jquery关于ajax那些事

发表评论取消回复