jQuery中的Ajax

Posted 2020-12-09 浮华夕颜

1. $.ajax()方法：发送Ajax请求

$.ajax({
     type: ‘get‘,
     url: ‘http://www.example.com‘,
     data: { name: ‘zhangsan‘, age: ‘20‘ },
     contentType: ‘application/x-www-form-urlencoded‘,
     beforeSend: function () { 
         return false
     },
     success: function (response) {},
     error: function (xhr) {}
});

{
     data: ‘name=zhangsan&age=20‘
}

{
     contentType: ‘application/json‘
}

JSON.stringify({name: ‘zhangsan‘, age: ‘20‘})

• 注意：无论给data属性传递的是对象，还是传递转换好后的参数字符串，在$.ajax()方法内部都将以参数字符串的形式发送，这是默认行为。
• 如果想要传递json格式的属性，需要将contentType设置为application/json，并且在data属性中传递一个json字符串。注意，如果不使用JSON.stringify方法将对象转换为json字符串形式，则会被自动转换为拼接字符串的形式。
• beforesend方法允许我们在请求发送之前做一些事情，它的值是一个函数，代码写在函数内部。这个函数会在请求发送之前调用。beforesend的作用：比如说在请求发送之前，对请求参数进行格式上的验证，如果验证通过则发送请求，如果不通过则取消这次的请求发送。也可以展示用户请求等待页面，比如说一直在转圈圈的动态等待图片，如果服务器端返回数据以后，再将这个元素隐藏掉，可以提高用户体验。

• $.ajax()方法内部会根据如果服务器端在响应头设置的返回数据类型自动将数据转换为对应的类型。也就是说，如果服务器端返回的是json字符串，会自动转换为json对象，这样就不需要我们自己再使用JSON.parse()转化了。
• 注意：在写请求地址的时候，如果域名、协议和请求端口一样，则可以省略不写。 

2. serialize方法：将表单中的数据自动拼接成字符串类型的参数

在使用$.ajax()方法向服务器端发送请求时，无论向data属性中传递的数据是对象类型还是字符串类型，参数的格式都需要我们自己来拼接。我们需要获取到表单控件，获取控件中输入的内容，然后再将用户输入的表单内容拼接成需要的格式，这个拼接代码还是比较繁琐的。formdata对象虽然可以解决这个问题，但是它是html5新增的方法，存在兼容性的问题。

jQuery中提供了serialize方法，该方法仅仅是用来拼接字符串的功能。

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

serialize方法功能就很单一了，只有将表单内容拼接字符串的功能，并没有转换其他类型的功能。但实际情况中，我们往往用的更多的是需要将表单内容拼接为对象的形式。

我们可以自己封装一个这样的函数，方便以后调用。

// 将表单中用户输入的内容转换为对象类型
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;
}

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

jQuery中将jsonp方法也一并封装到了$.ajax()中，无论你是想发送Ajax请求，还是想发送jsonp请求，都可以通过$.ajax()方法。

Ajax请求是通过创建Ajax对象发送请求的，jsonp是通过创建script标签发送请求的。它们的实现原理不一样，也就是说不同的请求方式在$.ajax()方法内部要执行的代码是不一样的。

那$.ajax()方法如何确定当前要发送的请求呢？使用dataType属性。

$.ajax({
    url: ‘http://www.example.com‘,
    // 指定当前发送jsonp请求
    dataType: ‘jsonp‘,
    // 修改callback参数名称
    // 相当于http://www.example.com?cb=fnName
    jsonp: ‘cb‘,
    // 指定函数名称
    jsonCallback: ‘fnName‘,
    success: function (response) {} 
})

4. $.get()、$.post()方法概述

$.get()方法用于发送get请求, $.post()方法用于发送post清求

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

第二个参数可以是对象也可以是字符串（‘name=zhangsan&age=30‘），如果不需要传递参数，则可以不写。

5. jQuery中Ajax全局事件

只要页面中有Ajax请求被发送，对应的全局事件就会被触发

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

现在我们要实现一个需求，当页面有Ajax请求时，我们希望给用户一个提示，提示用户当前正在操作的过程当中。这个提示在网速比较慢的时候尤其有用。

如何实现呢？可以使用beforeSend方法，在beforeSend方法中可以将提示元素显示出来，等到请求成功之后再将提示元素隐藏。

但是这种做法存在一个问题：当页面中Ajax请求比较多时，我们要在每一个请求的代码中加入让提示元素显示和隐藏的代码，代码重复率比较高。

代码重复的问题如何解决呢？使用Ajax全局事件就可以帮我们解决这个问题。

在jQuery中规定，Ajax全局事件必须要绑定在document上。

6. NProgress：纳米级进度条，使用逼真的涓流动画来告诉用户正在发生的事情

NProgress是基于jquery的，下载地址：https://github.com/rstacruz/nprogress

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

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

// 当页面中有ajax请求发送时触发
$(document).on(‘ajaxStart‘, function () {
    NProgress.start();
});
// 当页面中有ajax请求完成时触发
$(document).on(‘ajaxComplete‘, function () {
    NProgress.done();
});