Jquery中封装的ajax方法

$.ajax()的基本使用

.ajax({
            //请求方式
            type: 'post',
            //请求地址
            url: '/base',
            //请求成功的处理函数
            success: function(response) {
                console.log(response);
            },
            //请求失败的处理函数
            error: function(xhr) {
                console.log(xhr);
            }
        });

$.ajax()请求参数的传递

get方式

 $.ajax({
                type: 'get',
                url: '/user',
                //传递的参数也可以直接写成字符串类型因为请求发送的时候也会自动将对象类型的参数转换为字符串类型
                //data: 'name=张三&age=18',
                data: {
                    name: '张三',
                    age: 88
                },
                success: function(response) {
                    //本身服务端响应回的数据都是字符串类型的，方法中将字符串转换成对象类型了
                    console.log(response);
                }
            });

//服务端请求处理
app.get('/user', (req, res) => {
	res.send(req.query);
});

post方式

$.ajax({
                type: 'post',
                url: '/user',
                //传递的参数也可以直接写成字符串类型因为请求发送的时候也会自动将对象类型的参数转换为字符串类型
                //data: 'name=张三&age=18',
                data: {
                    name: '张三',
                    age: 88
                },
                success: function(response) {
                    //本身服务端响应回的数据都是字符串类型的，方法中将字符串转换成对象类型了
                    console.log(response);
                }
            });

//服务端请求处理
//解析post参数
app.use(bodyParser.urlencoded({ extended: false }));
app.post('/user', (req, res) => {
    res.send(req.body)
});

json格式的参数

 var params = {name: 'wangwu',age: 300}
$.ajax({
                type: 'post',
                url: '/user',
                //将对象类型的参数转换为json格式的字符串
                data: JSON.stringify(params),
                //传递json格式的参数必须要指定参数类型为json格式
                contentType: 'application/json',
                success: function(response) {
                    //本身服务端响应回的数据都是字符串类型的，方法中将字符串转换成对象类型了
                    console.log(response);
                }
});

//服务端请求处理
//传递json格式的参数，服务端需要调用json()方法解析参数
app.use(bodyParser.json());
app.post('/user', (req, res) => {
    res.send(req.body)
});

beforeSend：function(){}在$.ajax()中设置此属性，在发送请求之前会调用这个函数，可以对传递的参数在客户端做验证，不满足规则可以阻止发送请求

$.ajax({
				// 请求方式
				type: 'post',
				// 请求地址
				url: '/user',
				// 在请求发送之前调用
				beforeSend: function () {
					alert('请求不会被发送')
					// 请求不会被发送
					return false;
				},
				// 请求成功以后函数被调用
				success: function (response) {
					// response为服务器端返回的数据
					// 方法内部会自动将json字符串转换为json对象
					console.log(response);
				}
			})

serialize()方法使用

 <form id="form">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="submit" value="提交">
    </form>
    <script src="/js/jquery.min.js"></script>
    <script type="text/javascript">
        $('#form').on('submit', function() {
        	//将表单中的数据拼接成字符串类型的参数username=zhangsan&password=123
            let params = $(this).serialize();
            console.log(params);
            return false;
        });
        //封装serializeObject（），用来将表单参数转换为对象类型
        function serializeObject(obj) {
            let result = {};
            //返回一个数组，[{name: 'username', value: '用户输入的内容'}, {name: 'password', value: '用户输入的内容'}]
            let paramas = obj.serializeArray();
            $.each(paramas, function(index, value) {
                result[value.name] = value.value;
            });
            console.log(result); //{username: "zhangsan", password: "123"}
            return result;
        }
    </script>

$.ajax()发送jsonp请求

不指定函数名

$('#btn').on('click', function() {
            $.ajax({
                url: '/jsonp',
                data: {
                    username: 'zhangsan'
                },
                // 代表现在要发送的是jsonp请求
                dataType: 'jsonp',
                //未指定函数名时请求地址后跟的参数?callback=jQuery33109416996153223538_1569241499906&username=zhangsan
                success: function(response) {
                    console.log(response);//{name: "lisi", age: 50}
                }
            });
        });

//服务端处理请求
app.get('/jsonp', (req, res) => {
    res.jsonp({
        name: 'lisi',
        age: 50
    })
});

指定函数名

function fn(response) {
            console.log(response);//{name: "zhaoliu"}
        }
 $.ajax({
                url: '/jsonp',
                data: {
                    username: 'zhangsan'
                },
                // 向服务器端传递函数名字的参数名称
                jsonp: 'cb',
                //指定函数名称
                jsonpCallback: 'fn',
                // 代表现在要发送的是jsonp请求
                dataType: 'jsonp',
                //指定函数名时请求地址后跟的参数??cb=fn&username=zhangsan&_=1569245022816
                success: function(response) {
                    console.log(response);//{name: "zhaoliu"}
                }
            });

//服务端请求处理
app.get('/jsonp', (req, res) => {
    const cb = req.query.cb
    const data = cb + "({name: 'zhaoliu'})"
    res.send(data);
});

$.get()方法：发送get请求

$.post()方法：发送post请求

$.get()/$.post()(URL,data,function(data,status,xhr){},dataType);
URL:必需。请求发送的地址。
data:可选。发送请求携带的参数，可以是字符串或者对象类型。
function(data,status,xhr){}:可选。请求成功时调用的函数。
dataType:可选。规定预期的服务端响应的数据类型。
(‘http://www.example.com’, {name: ‘zhangsan’, age: 30}, function (response) {})

Ajax全局事件

全局事件必须要绑定在document元素对象上
nprogress 插件是一个适用于ajax 应用的轻量级的进度条插件
全局事件的执行时机
// 6个全局事件函数

1. ajaxStart在开始一个ajax请求时触发 (开始进度条)

2. beforeSend回调函数
   ajaxSend在beforeSend回调函数之后触发

3. success回调函数
   ajaxSuccess在success回调函数之后触发

4. error
   ajaxError在error回调函数之后触发

5. complete
   ajaxComplete在complete回调函数之后触发

6. ajaxStop在ajax请求结束时触发 (结束进度条)

			// 当页面中有ajax请求发送时触发
			$(document).on('ajaxStart', function () {
				//进度条开启
				 NProgress.start() 
			})

			// 当页面中有ajax请求完成时触发
			$(document).on('ajaxComplete', function () {
				//进度条关闭
				NProgress.done() 
			})

XML

extensible markup language，代表可扩展标记语言，它的作用是传输和存储数据
ajax中接受XML的数据要用responseXML
var xhr = new XMLHttpRequest();
xhr.responseXML;
服务端返回XML数据前也需要设置响应头信息
res.header(‘content-type’,‘text/xml’);