原理说明

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对象封装的框架。