1.get请求
方式一：$.ajax{()}
$.ajax({
type : 'get',// 请求方式，可以不声明该属性，默认值就是get
url : 'getParams',// 请求地址
data : {// 请求数据，这个参数可以去掉，也就是只发送请求不携带数据
name : 'Marydon',
work : '程序员'
},
success : function(result){// 请求成功
alert(result);
},
error : function(result){// 请求失败，这个参数一般情况系不携带
alert(result);
}
});
说明：当是get类型时，可以不声明type，默认请求方式就是get请求
方式二：$.get();
$.get('getParams',// 请求地址
{// 请求数据
name : 111,
work : '程序员'
},
function(result) {// 请求成功
alert(result);
});
方式三：$.getJSON();
$.getJSON('getParams',// 请求地址
{// 请求数据
name : 'Marydon',
work : '程序员'
},
function(result) {// 请求成功，要求返回的数据必须是json格式的字符串，返回其它类型数据接收不到
alert(JSON.stringify(result));
});
后台返回json数据及前台对应的接收方式
方式一：返回json字符串
当后台没有指定返回数据格式为application/json数据时，默认是text/html文本数据，ajax将会根据Content-Type属性自动将dataType属性的值设置为：text，也就是按照字符串来解析返回的数据。
后台响应
// 告诉浏览器以指定的字符集进行解析返回数据
response.setCharacterEncoding("utf-8");
// 后台不指定响应数据格式
JSONObject json = new JSONObject();
json.put("name", request.getParameter("name"));
json.put("work", work);
// 返回json字符串
response.getWriter().append(json.toString());
前端接收：两种情况
除$.getJSON()以外的ajax接收到的是json字符串，又可以划分为两种接收方式
第一种：需要手动将其转换成json对象
$.ajax({
type : 'post',// 请求方式
url : 'getParams',// 请求地址
data : {'name' : 'Marydon','work' : '程序员'},// 请求数据
success : function(result){// json字符串
// json字符串转json对象
// 方式一：eval()
var json = eval('(' + result + ')');
// 方式二：JSON.parse()
// var json = JSON.parse(result);
alert(json.work);
}
});
第二种：指定返回数据是json
$.ajax({
type : 'get',// 请求方式
url : 'getParams',// 请求地址
data : {'name' : 'Marydon','work' : '程序员'},
dataType : 'json',// 指定返回类型为json数据
success : function(result){// 请求成功
alert(result.work);
}
});
$.get('getParams',// 请求地址
{// 请求数据
name : 111,
work : '程序员'
},
function(result) {// 请求成功
alert(result.work);
},
'json');// 返回数据类型设置必须放在最后
$.getJSON()可以接收到返回的json字符串，并自动将其转换成json对象
$.getJSON(
'getParams',// 请求地址
{ name : 'Marydon', work : '程序员' },
function(result) {// 自动将json字符串转化成json对象
alert(result.work);
});
$.getJSON()就不需要声明啦，因为它的值已经被指定为了'json'。
需要注意的是$.get()和$.post()添加'json'时的位置必须在最后一位。因为语法形如：$.post(url,[data],[callback],['json'])
方式二：返回json对象
后台响应
// 告诉浏览器以json对象来处理返回的数据
response.setHeader("content-type","application/json;charset=utf-8");
JSONObject json = new JSONObject();
json.put("name", request.getParameter("name"));
json.put("work", work);
response.getWriter().append(json.toString());
前端接收
前端接收到的就是JSON对象，不需要再处理。
小结：
第一，$get()和$getJSON()的区别；$.getJSON()不能声明dataType属性，因为它的值已经被指定为JSON，只有当返回的数据是json字符串或者json对象时，才会接收；而dataType的值，jQuery会自动根据返回类型进行设置，一般无需手动声明，其它地方一模一样。
第二，$get()、$getJSON()和$.ajax({})的区别；前两者只能设置url、data、success这三个属性，当这三个属性不能满足需求时，就必须使用$.ajax({})了。
第三，关于ajax get请求携带数据的本质；get请求的本质就是：url?param1=value1¶m2=value2&...，所以，我们可以去掉data属性，直接在url后面拼接参数即可。例如：
var param = "name=Marydon&work=" + encodeURI('程序员');// 手动拼接需要编码2次，后台解码1次
$.get(
'getParams?' + param,// 请求地址+?+请求数据
function(result) {// 请求成功
alert(result);
});
第四，get请求导致的中文乱码问题，主要分为两种情况：
首先，需要明白的是：get请求，浏览器设置的字符集是ISO-8859-1，所以中文传输到后台会导致乱码，因为后台是以UTF-8进行接收参数的。
第一种情况对应解决方案：使用原生的ajax携带数据
方式一，后台转码：new String(work.getBytes("iso-8859-1"), "utf-8");；
方式二，前端编码-work : encodeURI('程序员')，后台解码-URLDecoder.decode(work, "utf-8")。（推荐使用）
第二种情况对应解决方案：手动拼接key=value，传输数据
方式一：前台编码一次：work=encodeURI('程序员');，后台转码：new String(work.getBytes("iso-8859-1"), "utf-8");
方式二：前台手动编码两次：work=encodeURI(encodeURI('程序员'))，后台解码一次：URLDecoder.decode(work, "utf-8")。（推荐使用）
区分不同情况的原因是：
使用ajax的data属性传递数据时，get请求会自动对中文进行一次编码，tomcat对其解码一次，其本质还是ISO-8859-1，所以有两种解决方式；
自己手动拼接的话，get请求将不会自动对中文进行一次编码，而tomcat高版本url中不允许带中文，所以至少需要手动编码一次，同样的，tomcat会对其解码一次，所以也有两种解决方式；
2.post请求
方式一：$.ajax{()}
$.ajax({
type : 'post',// 请求方式，不声明该属性时，默认值是get请求
url : 'getParams',// 请求地址
data : {// 请求数据，这个参数可以去掉，也就是只发送请求不携带数据
name : 'Marydon',
work : '程序员'
},
success : function(result){// 请求成功
alert(result);
},
error : function(result){// 请求失败，这个参数一般情况系不携带
alert(result);
}
});
方式二：$.post()
$.post('getParams',// 请求地址
{// 请求数据
name : 111,
work : '程序员'
},
function(result) {// 请求成功
alert(result);
});
post请求不存在乱码问题。
3.总结
第一，通常情况下，用来表示值的数据有两种类型：string和number，如果是数值类型，则不需要使用双引号或者单引号；如果是字符串类型，必须使用单引号或者双引号括住，否则，它将代表的是一个变量而不是一个具体的数据类型，举例说明：
data : { name : 'Marydon'}，此时的Marydon是一个string类型的字符串；
data : { name : Marydon}，此时的Marydon是一个变量，必须在该代码出现前面已经声明了该变量，即var Marydon;，否则js运行时将会报错：找不到该变量；
data : { name : 111}，这个就比较简单了，我们一眼就能看出它是数值类型，但是数据在传输时，参数值均会被转换成字符串String来传输；后台在接收该参数时用String类型来接收。
第二，关于请求数据格式
data : { key : value}，key既可以不带引号，也可以带引号，单引号或者双引号也都可以，value也一样。
4.扩展用法
第一，跨域cookie传递
使用xhrFields属性可以解决跨域cookie传递问题：即能将客户端的cookie传递给服务器。
xhrFields:{withCredentials:true}；
当然，服务器端也需要做相应的设置才行，具体详见文章：java、ajax 跨域请求解决方案，第五部分
第二，使用ajax提交文件
方式一：使用原生的XMLHttpRequest对象进行提交
前端发送数据
<input type="file" id="file" onchange="upload('getParams')" style="display: none;">
<input type="button" value="上传" onclick='javascript:$("#file").click()'>
function upload(url) {
// js 获取文件对象
var fileObj = document.getElementById("file").files[0];
if (null == fileObj) {
alert("图像上传失败，请重试！");
return;
}
// 创建form表单
var formFile = new FormData();
// 加入文件对象
formFile.append("file", fileObj);
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
xhr.open("post", url, true);
//请求完成
xhr.onload = function () {
// 将返回数据转换成JSON对象
var resData = JSON.parse(this.responseText);
document.getElementById("file").value = "";
};
// 请求失败
xhr.onerror = null;
// 上传进度调用方法（可实现上传进度条）
xhr.upload.onprogress = null;
// //开始上传，发送form数据（以二进制数据传递给后台）
xhr.send(formFile);
}
后台接收
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
InputStream is = request.getInputStream();
int i = 0;
while ((i = is.read()) != -1) {
System.out.print((char) i);
}
}
方式二：$.ajaxFileUpload
准备工作：jQuery.js和ajaxfileupload.js
$.ajaxFileUpload({
fileElementId: fileId, //需要上传的文件域的ID，即<input type="file">的ID。
url: path, //后台方法的路径
type: 'post', //当要提交自定义参数时，这个参数要设置成post
dataType: 'json', //服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
secureuri: false, //是否启用安全提交，默认为false。
async : true, //是否是异步
success: function(data) { //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
},
error: function(data, status, e) { //提交失败自动执行的处理函数。
console.error(e);
}
});
原理：创建一个隐藏的表单和iframe然后用JS去提交，获得返回值
使用jQuery的好处在于：可以实现异步提交文件
方式三：FileReader+ajax
// 图片正则表达式
var rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
// 文件校验
if (document.getElementById("uploadImage").files.length === 0) {
alert("请上传图像");
return;
}
// js 获取文件对象
var fileObj = document.getElementById("uploadImage").files[0];
// 格式校验
if (!rFilter.test(fileObj.type)) {
alert("必须是图片格式文件！");
return;
}
//判断是否支持FileReader
if (window.FileReader) {
// 创建文件读取对象
var reader = new FileReader();
} else {
alert("您的设备不支持图片上传功能，如需该功能请升级您的设备或浏览器！");
return;
}
// 图片转base64（Blob对象或File对象）
reader.readAsDataURL(fileObj);
reader.onload = function(e) {
// 获取对应的base64
var imgBase64 = e.target.result;
// 将图片的base64码传给后台
// 调用腾讯接口
$.post(baseUrl + "/weixin/facein/upImg2.do",{imgBase64:imgBase64},function(resData){
// TODO 对返回的接口数据进行自动填充处理
});
};
注意：
这种方法仅限图片上传，也就是只适用于图片上传；
Internet Explorer 10 之前的版本并不支持FileReader()；
另外，window.FileReader更常用的方式是：图片预览，由于低版本IE浏览器不支持FileReader实现图片预览，但是却可以通过滤镜实现预览，具体见文末推荐。
写在最后
哪位大佬如若发现文章存在纰漏之处或需要补充更多内容，欢迎留言！！！
相关推荐：
- 个人主页
- ajax旧版文章
- application/x-www-form-urlencoded与multipart/form-data与application/json的区别 精析
- 图片预览（兼容低版本IE）