关于ajax:Ajax基础-学习记录三

jQuery 中的 Ajax

$.ajax()

$.ajax()办法概述

作用：发送 Ajax 申请。

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

beforeSend 办法阐明

$.ajax({
    // 申请形式
    type: 'post',
    // 申请地址
    url: '/user',
    // 在申请发送之前调用
    beforeSend: function () {alert('申请不会被发送')
        // 申请不会被发送
        return false;
    },
    // 申请胜利当前函数被调用
    success: function (response) {
        // response 为服务器端返回的数据
        // 办法外部会主动将 json 字符串转换为 json 对象
        console.log(response);
    }
})

作用：发送 jsonp 申请。

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

serialize 办法

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

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

$.get()、$.post

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

jQuery 中 Ajax 全局事件

只有页面中有 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：删除数据

RESTful API 的实现

每一个申请地址都要对应资源
users => /users
articles => /articles

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 的用户信息

留神：传统的 html 表单提交不反对 put 和 delete，在 Ajax 中反对

服务器端:

// 获取用户列表信息
app.get('/users', (req, res) => {res.send('以后是获取用户列表信息的路由');
});

// 获取某一个用户具体信息的路由
app.get('/users/:id', (req, res) => {
    // 获取客户端传递过去的用户 id
    const id = req.params.id;
    res.send(` 以后咱们是在获取 id 为 ${id}用户信息 `);
});

// 删除某一个用户
app.delete('/users/:id', (req, res) => {
    // 获取客户端传递过去的用户 id
    const id = req.params.id;
    res.send(` 以后咱们是在删除 id 为 ${id}用户信息 `);
});

// 批改某一个用户的信息
app.put('/users/:id', (req, res) => {
    // 获取客户端传递过去的用户 id
    const id = req.params.id;
    res.send(` 以后咱们是在批改 id 为 ${id}用户信息 `);
});

客户端：

<script type="text/javascript">
    // 获取用户列表信息
    $.ajax({
        type: 'get',
        url: '/users',
        success: function (response) {console.log(response)
        }
    })

    // 获取 id 为 1 的用户信息
    $.ajax({
        type: 'get',
        url: '/users/1',
        success: function (response) {console.log(response)
        }
    })

    // 删除 id 为 10 的用户信息
    $.ajax({
        type: 'delete',
        url: '/users/10',
        success: function (response) {console.log(response)
        }
    })

    // 批改 id 为 1 的用户信息
    $.ajax({
        type: 'put',
        url: '/users/10',
        success: function (response) {console.log(response)
        }
    })
</script>

XML 根底

XML 是什么

XML 的全称是 extensible markup language，代表可扩大标记语言，它的作用是传输和存储数据。

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

app.get('/xml', (req, res) => {res.header('content-type', 'text/xml');
    res.send('<message><title> 音讯题目 </title><content> 音讯内容 </content></message>')
});

XML DOM

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

btn.onclick = function () {var xhr = new XMLHttpRequest();
    xhr.open('get', '/xml');
    xhr.send();
    xhr.onload = function () {
        // xhr.responseXML 获取服务器端返回的 xml 数据
        var xmlDocument = xhr.responseXML;
        var title = xmlDocument.getElementsByTagName('title')[0].innerHTML;
        container.innerHTML = title;
    }
}