ajax篇

最新推荐文章于 2023-03-01 15:46:45 发布

weiweiweb888

最新推荐文章于 2023-03-01 15:46:45 发布

阅读量160

点赞数

文章标签： ajax restful json

本文链接：https://blog.csdn.net/weiweiweb888/article/details/121040948

版权

接口开发规范(RESTful api)

简介

RESTful规范，是目前一种比较流行的互联网软件设计规范。

这个规范约束的就是路由地址应该如何定义，返回的json接口数据应该如何规范。

后端接口：返回的是一个json数据

{ "key":"value" }

优点：

使开发者在进行独立开发或协作开发更能标准，以达到行业的统一。它结构清晰、符合标准、易于理解、扩展方便，越来越多的开发者遵守这种规范。

常用方法规范

(1)GET：SELECT 获取资源

(2)POST：CREATE 创建资源

(3)PUT：UPDATE 更新资源

(4)DELETE：DELETE 删除资源

路由如何定义

返回的json数据如何规范


// 接口项目：是后端工程师做的，指的是后端给前端返回的json数据
// resultful 规范包含两个方法：
//1. 路由如何规范的定义
//2. 返回的json如何规范的定义
/*
    {
        一个消息属性比如：msg/message
        一个对应消息的数字状态码 比如：status/code
        如果有结果，则可以叫 result/data
    }
*/

const express = require('express')
const app = express()
app.listen(3000, function () {
    console.log('3000端口开启了，可以访问: http://localhost:3000')
})

app.use(express.urlencoded({ extended: false }))


/*
    请求方法：
        get:得到
        post:添加、邮寄
        delete:删除
        put:更新，推送
*/

// 以学生数据定义路由

//查询学生：一组。后端数据列表接口复杂。
//只要是返回一组数据：列表数据
//那就一定是分页
app.get('/students', (req, res) => {

    //还要额外的传递一些参数
    let { page = 1, size = 5 } = req.query
    //page:前端用户传递过来的要展示的页码
    //size:每页展示几条
    //start = (page-1)*size
    //LIMIT start,size

    let data = {
        msg: 'OK',
        status: 200,
        result: {
            data: [
                { username: 'zs', age: 20 },
                { username: 'ls', age: 10 },
                { username: 'ww', age: 30 }
            ],
            rows: '总条数',
            totalPage: '总页码',
            page: '当前页'
        }
    }

    res.send(data)
})

//查询学生：一个
app.get('/student', (req, res) => {
    let { id = '' } = req.query
    /*
        我们使用的：id
        表中都有一个唯一的id字段（属性）
        SELECT * FROM student WHERE id = 
    */

    if (!id) {
        let data = {
            msg: '请传递必须参数id',
            status: 10005
        }
        res.send(data)
        return
    }


    let data = {
        msg: 'OK',
        status: 10001,
        result: { 
            username: 'zs', 
            id: 'a0001', 
            age: 20 
        }
    }
    res.send(data)
})

//添加学生
app.post('/student', (req, res) => {

    let { username = '', xuehao = '' } = req.body

    if (username == '') {
        let data = {
            msg: '姓名不能为空',
            status: 10003,//姓名不能为空
        }
        res.send(data)
        return
    }
    if (xuehao.length != 5) {
        let data = {
            msg: '学号必须是5位',
            status: 10002,//学号必须是5位
        }
        res.send(data)
        return
    }


    // let data = {
    //     msg:'学号必须是5位',
    //     status:10002,//学号必须是5位
    // }

    // let data = {
    //     msg:'姓名不能为空',
    //     status:10003,//姓名不能为空
    // }
    //执行sql语句，sql语句也没有问题
    let data = {
        msg: 'OK',
        status: 10001,//成功
    }
    res.send(data)
})

//删除学生
app.delete('/student', (req, res) => {
    res.send('删除学生')
})

//编辑学生
app.put('/student', (req, res) => {
    res.send('编辑学生')
})

接口说明书

是后端为前端提供的。没有说明书前端进行不下去。

后端给前端只是提供一个接口地址（某个服务地址）+接口说明书。

前端要会看说明书：看人家说明书以后，你通过拼接url地址，能够拿到数据。

接口地址为：http://localhost:3000

获取一个学生
地址

/student
参数说明

参数	说明	备注
id	例如：id=3	必传

完整的示例为

http://localhost:3000/student?id=3

返回的数据

正确的

{
  "msg": "OK",
  "status": 10001,
  "result": {
    "username": "zs",
    "id": "333",
    "age": 20
  }
}

可能失败的

{
  "msg": "请传递必须参数id",
  "status": 10005
}
{
  "msg": "查无此人",
  "status": 10006
}

原生ajax

★★★★★

学习原理：应付面试

在项目中用的：jquery中封装好的

作用：ajax能帮我们发送http请求。为前后端工程师服务，并且前后端工程都需要掌握的。

使用ajax发送的请求，服务器99.99%返回的是json。

介绍

定义

Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

本身js是阻塞的(同步的),但是有些是需要异步处理的,比如xml数据( 后端给前端的 )：前端要去后端发送请求拿数据。

xml了解

它是表示数据的一种方式，和html标签语法特别像，但xml更加严谨。缺点：笨重。

xml必须首尾必合，如果有属性，那属性的值必须是双引号。

https://www.w3school.com.cn/xml/xml_syntax.asp

例如：表示一个学生

<student address="北京">
	<username>张三</username>
    <age>20</age>
</student>

json

{
    "username":"张三",
    "age":20,
    "address":"北京"
}

传统请求的问题

传统请求指的是：通过浏览器地址栏发的http请求。注意：这是同步（如果很忙，要等待，可能会白屏）。

Ajax优势和作用

解决同步，使用异步的方式发请求（不会阻塞），体验会更好。无需刷新页面的局部更新。速度更快

Ajax请求与传统请求的区别：

传统方式请求：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IFH7YMjp-1635505540323)(img/05-1传统请求.jpg)]

ajax方式请求：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5U6npoOT-1635505540325)(img/05-2ajax请求方式.jpg)]

应用场景：

只要是页面中局部更新内容都可以使用ajax进行处理。

表单验证：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V09Gucll-1635505540326)(img/05-3ajax应用表单验证.png)]

数据分页显示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wddoIqww-1635505540327)(img/05-4ajax应用数据分页显示.png)]

原理

方法

2.2.1.1 XMLHttpRequest

语法：

 let xhr =new XMLHttpRequest();  不支持ie6的。
 
 new ActiveXObject() / IE6

描述：创建 ajax对象

open

语法：

xhr.open(method,url,async)

描述：规定请求的类型、URL 以及是否异步处理请求。

send

语法：

xhr.send(string)

描述：将请求发送到服务器。string：仅用于 POST 请求

属性

readyState

语法：

xhr.readyState

描述：在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态值。

包含的状态值：

(1) 0：请求未初始化，还没有调用open

(2) 1：请求已经建立，但是还没有发送send

(3) 2：请求已经发送

(4) 3：请求正在处理中，通常响应中已经有部分数据可以用了

(5) 4：响应已经完成，可以获取并使用服务器的响应

status

语法：

xhr.status

描述：无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，该信息使用“ajax.status”所获得；（由数字1XX,2XX三位数字组成)

常见状态码：200，304，404，500

responseText

语法：

xhr.responseText

描述：获得来自服务器的响应

事件

语法：

xhr.onreadystatechange  = callback

描述：当请求被发送到服务器时，每当 readyState 改变时，就会触发 onreadystatechange 事件

实现步骤

(1)创建Ajax对象

(2)Ajax请求的地址与请求方式

(3)发送请求

(4)获取服务器响应给客户端的数据

(5)处理服务器响应数据JSON.parse和JSON.stringify

ajax的get和post传参

get

语法：

xhr.open('get', 'http://www.api.com?username=ujiuye&password=123456')

描述：get传参只需要在url地址后按照?key=value格式进行传递

代码案例：

let xhr = new XMLHttpRequest()

xhr.open( 'get',`http://localhost:3000/checkuser?username=${username}&age=20`,true )
           
xhr.send()
           
xhr.onreadystatechange = function(){
       
                if( xhr.readyState == 4 && xhr.status == 200 ){
                    console.log( xhr.responseText,'我是结果' )
                    oTips.innerHTML = xhr.responseText
                }
                
            }

        }

post

语法1:

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') 
xhr.send(querystring|jsonstring);//字符串

语法2：

xhr.setRequestHeader('Content-Type', 'application/json') 
let data = {username:'ujiuye',password:'123456'}
xhr.send(JSON.stringify(data))

描述：使用setRequestHeader设置响应头，并传递对应的post参数

Jquery之Ajax

get

语法：

$.get(URL,callback)

描述：发送get请求

$.get( '/demo?username=ls',(res)=>{
    console.log('执行了成功的回调',res)
  } )

post

语法：

$.post(URL,{data},callback) //默认设置application/x-www-form-urlencoded请求头

描述：发送post请求，data为请求时传递的参数

$.post({
       url:'/demo',
       data:{ username:'qq',age:22 },
       success:function(res){
           console.log('请求了post',res)
         },
        error:function(err){
     
        }

ajax

语法：

$.ajax({
   method:'post/get/put/deldet',//不写默认get
   url: '',  
   data: { },
   success: function(res) { } 
   error: function(res) { } 
})

描述：可以发送get和post请求

<button id="btn1">发送ajax-get请求</button>
    <button id="btn2">发送ajax-post请求</button>
    <button id="btn3">发送ajax-delete请求</button>
    <button id="btn4">发送ajax-put请求</button>
    <button id="btn5">发送ajax请求</button>
   
    <script>

//1、$.get( url,successCB ) //使用ajax发送get请求
$('#btn1').on('click',function(){

            // $.get( 'http://localhost:3000/demo?username=zs',(res)=>{
            //     console.log('执行了成功的回调',res)
            // } )

            //关于地址的补充说明： http://localhost:3000可以省略
            $.get( '/demo?username=ls',(res)=>{
                console.log('执行了成功的回调',res)
            } )
        })

//2、$.post( url[,{}],successCB ) //使用ajax发送get请求 //第2个参数为对象
 $('#btn2').on('click',function(){
            // $.post('/demo',{ username:'ww',age:30 },(res)=>{
            //     console.log('执行了成功的回调',res)
            // })

            $.ajax({
                url:'/demo',
                method:'put',
                data:{ username:'qq',age:22 },
                success:function(res){
                    console.log('请求了post',res)
                },
                error:function(err){
                    console.log(err,'失败的回调')
                }
            })

        })
       
    })
   </script>

个参数为对象
$(’#btn2’).on(‘click’,function(){
// $.post(’/demo’,{ username:‘ww’,age:30 },(res)=>{
// console.log(‘执行了成功的回调’,res)
// })

        $.ajax({
            url:'/demo',
            method:'put',
            data:{ username:'qq',age:22 },
            success:function(res){
                console.log('请求了post',res)
            },
            error:function(err){
                console.log(err,'失败的回调')
            }
        })

    })
   
})

```

weiweiweb888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax篇

接口开发规范(RESTful api)简介RESTful规范，是目前一种比较流行的互联网软件设计规范。这个规范约束的就是路由地址应该如何定义，返回的json接口数据应该如何规范。后端接口：返回的是一个json数据{ "key":"value" }优点：使开发者在进行独立开发或协作开发更能标准，以达到行业的统一。它结构清晰、符合标准、易于理解、扩展方便，越来越多的开发者遵守这种规范。常用方法规范(1)GET：SELECT 获取资源(2)POST：CREATE 创建资源(3)PUT：UP
复制链接

扫一扫