Ajax基础 --学习记录

Posted 2021-09-14 Emrof

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;
    }
}