前端学习笔记二十一-jQuery 中的 Ajax以及RESTfu

一、$.ajax()

作用一：发送Ajax请求。

 $.ajax({
     type: 'get',
     url: 'http://www.example.com',
     data: { name: 'zhangsan', age: '20' },
     contentType: 'application/x-www-form-urlencoded',//默认，对应的是'name=zhangsan&age=20'格式
     beforeSend: function () { 
         //返回false则取消这次发送
         return false
     },
     success: function (response) {},
     error: function (xhr) {}
});

其中data字段也可以传拼接好的字符串

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

如果服务器要求传json数据格式，可以设置参数格式类型为application/json

 {
     contentType: 'application/json'
 }

同时data要传如下的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) {} 
})

serialize方法

自动拼接表单中输入内容的键=值对字符串，用&隔开
FormData是html5才支持的，因此需要兼容低版本浏览器的时候我们可以用这个方法

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

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

二、Todo案例

为todo数据库添加账号

1. 使用mongo命令进入mongodb数据库
2. 使用use admin命令进入到admin数据中
3. 使用db.auth(‘root’, ‘root’)命令登录数据库
4. 使用use todo命令切换到todo数据库
5. 使用db.createUser({user: ‘itcast’, pwd: ‘itcast’, roles: [‘readWrite’]})创建todo数据库账号
6. 使用exit命令退出mongodo数据库

展示任务列表

1. 准备一个放置任务列表的数组
2. 向服务器端发送请求，获取已存在的任务
3. 将已存在的任务存储在任务列表数组中
4. 通过模板引擎将任务列表数组中的任务显示在页面中

添加任务

1. 为文本框绑定键盘抬起事件，在事件处理函数中判断当前用户敲击的是否是回车键
2. 当用户敲击回车键的时候，判断用户在文本框中是否输入了任务名称
3. 向服务器端发送请求，将用户输入的任务名称添加到数据库中，同时将任务添加到任务数组中
4. 通过模板引擎将任务列表数组中的任务显示在页面中

删除任务

1. 为删除按钮添加点击事件
2. 在事件处理函数中获取到要删任务的id
3. 向服务器端发送请求，根据ID删除任务，同时将任务数组中的相同任务删除
4. 通过模板引擎将任务列表数组中的任务重新显示在页面中

更改任务状态

1. 为任务复选框添加onchange事件
2. 在事件处理函数中获取复选框是否选中
3. 向服务器端发送请求，将当前复选框的是否选中状态提交到服务器端
4. 将任务状态同时也更新到任务列表数组中
5. 通过模板引擎将任务列表数组中的任务重新显示在页面中并且根据任务是否完成为li元素添加completed类名

修改任务名称

1. 为任务名称外层的label标签添加双击事件，同时为当前任务外层的li标签添加editing类名，开启编辑状态
2. 将任务名称显示在文本框中并让文本框获取焦点
3. 当文本框离开焦点时，将用户在文本框中输入值提交到服务器端，并且将最新的任务名称更新到任务列表数组中
4. 使用模板引擎重新渲染页面中的任务列表。

计算未完成任务数量

1. 准备一个用于存储未完成任务数量的变量
2. 将未完成任务从任务数组中过滤出来
3. 将过滤结果数组的长度赋值给任务数量变量
4. 将结果更新到页面中

显示未完成任务

1. 为active按钮添加点击事件
2. 从任务列表数组中将未完成任务过滤出来
3. 使用模板引擎将过滤结果显示在页面中

清除已完成任务

1. 为clear completed按钮添加点击事件
2. 向服务器端发送请求将数据库中的已完成任务删除掉
3. 将任务列表中的已完成任务删除调用
4. 使用模板引擎将任务列表中的最后结果显示在页面中

三、全局事件

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

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

四、NProgress

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

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

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

五、RESTful 风格的 API

传统请求地址回顾

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 的实现

GET：http://www.example.com/users 获取用户列表数据
POST：http://www.example.com/users 创建(添加)用户数据
GET：http://www.example.com/users/1 获取用户ID为1的用户信息
PUT：http://www.example.com/users/1 修改用户ID为1的用户信息
DELETE：http://www.example.com/users/1 删除用户ID为1的用户信息

六、XML 基础

XML 的全称是 extensible markup language，代表可扩展标记语言，它的作用是传输和存储数据。
它的标签都是开发者自定义的。

 <students> 
     <student>
         <sid>001</sid>
         <name>张三</name>
         </student>
     <student>
         <sid>002</sid>
         <name>王二丫</name>
         </student>
 </students>

XML DOM（了解即可）

XML DOM 即 XML 文档对象模型，是 w3c 组织定义的一套操作 XML 文档对象的API。浏览器会将 XML 文档解析成文档对象模型。

服务器端

app.get('/xml', (req, res) => {
    //必须指定响应头，告诉客户端响应的数据是xml格式
    res.header('content-type', 'text/xml');
    res.send('<message><title>消息标题</title><content>消息内容</content></message>')
});

客户端

var btn = document.getElementById('btn');
var container = document.getElementById('container');

btn.onclick = function() {
    var xhr = new XMLHttpRequest();
    xhr.open('get', '/xml');
    xhr.send();
    xhr.onload = function() {
        // 服务器端返回xml格式的数据，就不能再用xhr.responseText接收
        // xhr.responseXML 获取服务器端返回的xml数据，获取的内容就是xml的Document对象
        var xmlDocument = xhr.responseXML;
        // 因此可以用XML DOM方法获取里面的DOM及标签内容
        var title = xmlDocument.getElementsByTagName('title')[0].innerHTML;
            container.innerHTML = title;
        }
}