原理说明
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。XMLHttpRequest是ajax的核心机制,其原理此文不做阐述。通过对XMLHttpRequest对象的属性和方法的设置，与服务端之间进行基于http请求的消息传送。例如，XMLHttpRequest对象的setRequestHeader()方法是用来设置请求头的。这些过程都被封装在ajax中。在jquery ajax里,发送信息至服务器时内容编码类型的设置是通过contentType字段表示的。dataType表示预期服务器返回的数据类型。请求成功后的回调函数success中将返回根据 dataType 参数进行处理后的数据。
这里之所以提到contentType这个字段,是因为它表示数据实体的类型，前后端要约定一致，通常前端应根据后端的要求传送对应的contentType类型。类似于ajax的框架很多,它们都是基于XmlhttpRequest这个对象的,只是数据封装的形式略有不同。所以对此文content-type数据类型的理解,也有助于其他框架的数据类型传递时遇到的问题解决。
常见解决方式
遇到数据传递http请求的状态码为400时,通常会对content-type类型进行修改.
项目中常见的content-type有三种
application/x-www-form-urlencoded
application/x-www-form-urlencoded是常用的POST 提交数据的方式，普通的表单提交，或者js发包，如果不设置 content-type 属性，默认都是通过这种方式
application/json
现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。application/json用来告诉服务端消息主体是序列化后的 JSON 字符串，JSON 格式支持比键值对复杂得多的结构化数据。
multipart/form-data
使用表单上传文件时，必须让 form 的 enctyped 等于’multipart/form-data’。
如下是从基于JQuery文件上传插件ajaxfileupload.js中拷出来的一段代码,能帮助理解。
if (form.encoding) {
jQuery(form).attr('encoding', 'multipart/form-data');
}
else {
jQuery(form).attr('enctype', 'multipart/form-data');
}
数据发送时需要与后端之间协商好传送的数据类型，那么接收时也是同理的，接收时，ajax用到的字段是data-type。
特别说明,有时候content-type是后台要求的application/json,但是仍然报http码为400的错误,这是因为ajax内部会对data数据进行序列化转为字符串,而’自动’转为的字符串并非后台需要的字符串,需要在被自动转为字符串前先手动转为字符串（即JSON.stringify(data)）,已经是字符串了就不会被自动转为字符串,详见案例分析。
关于data-type简单说明一下："json"表示返回 JSON 数据；"text"表示返回纯文本字符串；"jsonp"表示JSONP 格式；"script"表示返回纯文本 JavaScript 代码。
案例解析
在后端已确定采用json形式传递的前提下,当前端向后端传送如下图一所示包含对象数组的数据对象时，采用如下代码一中的代码进行请求，该请求并没有成功。其中代码一中将contentType设为 "application/json; charset=utf-8"。
图一
代码一：
$.ajax({
url: basePath + "/visitor/addVisitor",
data: resultObj,
plugin: false,
contentType: "application/json; charset=utf-8",
success: function (data) {
$.toast({
message: "添加成功",
state: true
});
}
});
此时,查看浏览器中network,如下图二所示:
图二
显然请求没有成功,报了400的错误。
原因如下:
通过查看jquery源码,我们发现,ajax接收的数据最终都将转为字符串形式,如下是从jquery源码中截取的一段代码:
// Convert data if not already a string
if ( s.data && s.processData && typeof s.data !== "string" ) {
s.data = jQuery.param( s.data, s.traditional );
}
综上，解决执行代码一时出现的http请求为400的情况,需将data自己手动转为JSON字符串（JSON.stringify(data)）,这样就无需走JQuery里面的param函数进行序列化转换了。也就是说避免出现图二箭头所示的错误情况,图二所示的情况是将接收的对象默认序列化为键值对的形式。
如下附上正确的代码：
$.ajax({
url: basePath + "/visitor/addVisitor",
data: JSON.stringify(resultObj),
plugin: false,
contentType: "application/json; charset=utf-8",
success: function (data) {
$.toast({
message: "添加成功",
state: true
});
}
});
总结
案例中,content-type是对的,是前后台协商一致的application/json,但是传输的数据data必须先进行JSON.stringify(data),原因是前后端传送的必须是字符串，可以通过查看JQuery源码得知，如果data不是字符串,JQuery内部会将其进行序列化转为字符串,而序列化后的数据并非后端需要的,导致http状态码为400的错误。
Ajax的属性配置均是基于对XmlhttpRequest对象的方法调用的封装。对其深入理解,一方面需要理解http协议的原理,另一方面需要参照xmlhttpRequest对象原理读懂jquery ajax源码。对ajax理解也有助于理解其他基于xmlhttpRequest对象封装的框架。
网友评论