jq中的Ajax方法

$ .ajax()方法概述

在jQuery中也为大家封装好了一些ajax方法。内部会自动将data对象转换成x-www-form-urlencoded的形式，data中我们也可以传递字符串。如果要传递json格式数据，需要设置contentType和将data写成json字符串的形式（可以用JSON.stringify方法转换）
作用：发送Ajax请求。

$.ajax({
     type: 'get',
     url: 'http://www.example.com',
     // data: 'name=zhangsan&age=20'
     data: { name: 'zhangsan', age: '20' },
     // contentType: 'application/json'
     contentType: 'application/x-www-form-urlencoded',
     // 这个方法在请求发送前调用，可以用来做表单校验、用来做请求等待动画的调用
     beforeSend: function () { 
     // 返回false是取消发送
         return false
     },
     // 会自动帮我们把返回的数据根据响应头设置的类型进行转换好（也就是会自动转成json对象）
     success: function (response) {},
     // xhr是ajax对象
     error: function (xhr) {}
});

serialize方法

作用：将表单中的数据自动拼接成字符串类型的参数（类似于FormData）
使用方法：获取到表单DOM，然后调用serialize方法，返回值就是拼接好的字符串

var params = $('#form').serialize();
// name=zhangsan&age=30

想要校验表单内容使用serialize方法是做不到的。我们需要自己封装一个方法将表单中用户输入的内容转换为对象类型。jq中给我们提供了一个serializeArray方法，可以将表单的内容转换为数组。这个数组存放的是对象，有多少个控件就有多少个对象。
使用方法：表单jq对象.serializeArray()

// 将表单中用户输入的内容转换为对象类型，传入的参数obj是一个表单jq对象，也就是$('#form'）
		function serializeObject (obj) {
			// 处理结果对象
			var result = {};
			// [{name: 'username', value: '用户输入的内容'}, {name: 'password', value: '123456'}]
			var params = obj.serializeArray();

			// 循环数组 将数组转换为对象类型
			$.each(params, function (index, value) {
				result[value.name] = value.value;
			})
			// 将处理的结果返回到函数外部
			return result;
		}

$ .ajax()方法发送jsonp请求

jq中$ .ajax()方法的封装，除了可以发送ajax方法之外，还可以发送jsonp请求

$.ajax({
    url: 'http://www.example.com',
    // 指定当前发送jsonp请求
    dataType: 'jsonp',
    // 修改callback参数名称
    jsonp: 'cb',
    // 指定函数名称，用success就不需要用这个
    jsonCallback: 'fnName',
    success: function (response) {} 
})

快捷发送请求的方法

除了使用$ .ajax之外，还可以使用$ .get()、$ .post()快捷方法发送请求。第一个参数是地址，第二个参数是请求携带的参数，可以写对象或者字符串的形式，第三个参数是回调函数。

$.get('http://www.example.com', {name: 'zhangsan', age: 30}, function (response) {}) 
$.post('http://www.example.com', {name: 'lisi', age: 22}, function (response) {})

全局事件

只要页面中有Ajax请求被发送，对应的全局事件就会被触发
应用场景：发送请求时显示进度条，虽然beforeSend方法也可以做到，但是如果全部请求都要加这个效果的话，使用全局事件就不用每次发送请求都写beforeSend了

.ajaxStart()     // 当请求开始发送时触发
.ajaxComplete()  // 当请求完成时触发

在jq中除了上面写的这两个全局事件之外还有其他的全局事件，使用方法都差不多一样的。

使用方法：
1.jq规定ajax全局事件一定要绑定到document身上。

$(document).on('ajaxStasrt',function(){
	// 写处理函数
	// NProgress.start();
})
$(document).on('ajaxComplete',function(){
	// 写处理函数
	// NProgress.done();
})

进度条动画NProgress

官网地址：http://ricostacruz.com/nprogress/
官宣：纳米级进度条，使用逼真的涓流动画来告诉用户正在发生的事情！
用法：
HTML页面引入文件

<link rel='stylesheet' href='nprogress.css'/>
<script src='nprogress.js'></script>

在JavaScript中调用

NProgress.start();  // 进度条开始运动 
NProgress.done();   // 进度条结束运动