jQuery 中的 Ajax

$.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'})

作用：发送jsonp请求。

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

beforeSend方法

在请求发送之前调用，可以直接跳出函数

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

serialize方法

作用：将表单中的数据自动拼接成字符串类型的参数

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

.post()方法概述

作用：.post方法用于发送post请求。

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

jQuery中Ajax全局事件

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

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

NProgress

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

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

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

RESTful

传统请求地址回顾

GET http://www.example.com/getUsers         // 获取用户列表
GET http://www.example.com/getUser?id=1     // 比如获取某一个用户的信息
POST http://www.example.com/modifyUser      // 修改用户信息
GET http://www.example.com/deleteUser?id=1  // 删除用户信息

RESTful API 概述

一套关于设计请求的规范。
GET： 获取数据
POST： 添加数据
PUT： 更新数据
DELETE： 删除数据
users => /users
articles => /articles

RESTful API 的实现