轻语言网站：发送网络请求与接口请求

文档概述

网络操作是现代网站程序开发中不可或缺的一部分，通过网络操作可以实现在前端对后端数据的链接，使程序更强大、功能更丰富。

在轻语言网站开发中，同样也支持网络操作，即在页面中与后端通信。

学习目标

阅读本文档后，你应当能够掌握以下内容：

  • 发送GET请求 的用法：单个请求与批量请求
  • 发送POST数据 的用法：单个请求与批量请求
  • 请求接口 函数：仅支持请求当前项目中的 .sph 后端脚本
  • 通过子函数 + 标记（标记）实现批量请求的统一回调
  • 拉姆达表达式接收请求结果的写法
  • 跨域（CORS）限制与同源策略
  • 部署到 PHP 环境才能看到效果的注意事项

涉及函数

函数作用参数说明
发送GET请求(地址, 回调)单个 GET 请求地址、回调（拉姆达或子函数名）
发送GET请求(地址, 子函数名, 标记)批量 GET 请求地址、子函数名、标记
发送POST数据(地址, 数据, 回调)单个 POST 请求地址、数据、回调
发送POST数据(地址, 数据, 子函数名, "", 标记)批量 POST 请求地址、数据、子函数名、空串、标记
请求接口(脚本名, 函数名, 回调)请求项目内 .sph（GET）脚本名、函数名、回调
请求接口(脚本名, 函数名, 回调, 数据)请求项目内 .sph（POST）脚本名、函数名、回调、数据

回调函数签名： (请求结果, 标记) => { ... } 或 函数 子函数名(请求结果, 标记)

函数：发送GET请求

代码示例：

事件 按钮1.被单击(源对象,事件源)
    ' 单个请求可以直接使用 拉姆达表达式 接收请求结果
    变量 目标地址 = "http://localhost/dny/Api.php?a=测试输出"
    发送GET请求(目标地址,(请求结果,标记)=>{
        编辑框1.内容 = "单次GET请求：" + 请求结果
    })
结束 事件

事件 按钮3.被单击(源对象,事件源)
    ' 同时发送多个请求、可采用子函数接收请求结果，并通过标记区分
    变量 目标主机地址 = "http://localhost/dny/Api.php?a="
    发送GET请求(目标主机地址 + "Test2",接收GET请求子函数,"Test2")
    发送GET请求(目标主机地址 + "Test3",接收GET请求子函数,"Test3")
结束 事件

' 将请求集中到一个子函数中处理，通过标记区分
' 这个函数需要手动创建，函数名可以任意起名，但参数必须为：请求结果，标记
函数 接收GET请求子函数(请求结果,标记)
    编辑框1.追加文本行("批量GET请求标记：" + 标记 + "，请求结果：" + 请求结果)
结束 函数

GET 请求要点

  • 单个请求：使用拉姆达表达式 (请求结果,标记) => { ... } 接收结果
  • 批量请求：使用子函数名 + 标记，统一在子函数中通过标记区分来源
  • 回调参数：固定为 (请求结果, 标记)，即使不用也不能省略参数位置
  • 标记用途：批量请求时区分不同请求的来源

函数：发送POST数据

代码示例：

事件 按钮2.被单击(源对象,事件源)
    变量 目标地址 = "http://localhost/dny/Api.php?a=Post1"
    发送POST数据(目标地址,"key=VcnStudio666",(请求结果,标记)=>{
        编辑框1.内容 = "POST1：" + 请求结果
    })
结束 事件

事件 按钮4.被单击(源对象,事件源)
    变量 目标主机地址 = "http://localhost/dny/Api.php?a="
    发送POST数据(目标主机地址 + "Post1","key=123",接收POST请求子函数,"","Post1")
    发送POST数据(目标主机地址 + "Post2","sign=123456",接收POST请求子函数,"","Post2")
结束 事件

' 与接收GET请求的回调一样，其实可以直接回调函数指向GET请求子函数接收
' 但是为了便于区分，因此POST采用单独的子函数处理回调
函数 接收POST请求子函数(请求结果,标记)
    编辑框1.追加文本行("批量POST请求标记" + 标记 + "，请求结果：" + 请求结果)
结束 函数

POST 请求要点

  • 数据格式：键值对字符串，如 "key=VcnStudio666" 或 "key=123&sign=abc"
  • 批量请求：发送POST数据(地址, 数据, 子函数名, "", 标记)，第 4 个参数为空串占位
  • 回调与 GET 一致：参数固定为 (请求结果, 标记)

函数：请求接口

"请求接口"函数仅支持请求当前项目中使用轻语言编写的后端脚本文件，不支持请求外部网站。

代码示例：

请求接口测试页面.spl

事件 按钮5.被单击(源对象,事件源)
    ' 请求接口 函数是对 GET与POST 请求的一个封装
    ' 仅支持直接访问当前程序中编写的后端接口中的函数，例如：分别访问GET与POST
    ' 发送GET请求
    请求接口("Api","Test1",(请求结果,标记)=>{
        编辑框1.追加文本行("通过接口请求发送GET请求：" + 请求结果)
    })
    ' 发送POST请求
    请求接口("Api","Post1",(请求结果,标记)=>{
        编辑框1.追加文本行("通过接口请求发送POST请求：" + 请求结果)
    },"key=123")
结束 事件

Api.sph

' ****************************************************************************
' 版权说明：Copyright（C） All Rights Reserved VcnStudio
' 程序版本：V1.0
' 文件描述：服务端脚本文件、最终将会编译成 PHP 源代码，
' 　　　　　可在该文件中操作数据库增删改查、读写服务器中的文件。
' 修改日志：
' ****************************************************************************
' 向客户端发送服务器的响应报头（Response Header）
置响应头("Content-Type: text/html; charset=utf-8")
置响应头("Content-Language: zh-CN")

' 引用轻语言封装的PHP核心库，注：如果要删除该引用请确保当前文件中未使用轻语言封装的函数
引用 "library/qing.core.php"

' 调用主函数："文件被访问"、即当在任何前端中访问该文件时，地址中不带任何参数名，都将会先调用该函数
文件被访问()

' 入口函数，函数名可自定义命名，主要作用：
' 当本文件被访问时，获取其前端传来的请求参数值，根据请求参数值调用当前文件中的函数
函数 文件被访问()
    ' 通过URL中的键参获取要执行的函数，这里我们默认规定键名为"a"，例如：
    ' 前端请求地址为：http://xxx.com/本文件名.php?a=测试输出
    ' 其"a"后面的值"测试输出"即为我们要执行的函数，使用"取请求值"函数将其取出后，然后执行。
    变量 待执行函数名 = 取请求值("a")
    如果(为空(待执行函数名))
        输出 "待执行函数不能为空"
    否则
        ' 增加安全验证，只允许执行我们定义的函数
        变量 可被执行的函数列表 = [ "Test1", "Post1" ]
        如果(取成员是否存在(可被执行的函数列表,待执行函数名) == 真)
            输出 执行函数(待执行函数名)
        否则
            输出 "请求执行非法的函数"
        结束 如果
    结束 如果
结束 函数

' 在前端通过发送GET、POST请求、或使用"请求接口"函数调用该函数，或直接在浏览器中访问下面地址
' 地址：http://xxx.com/Api.php?a=Test1
函数 Test1()
    输出 "你发送的请求接收成功；这是反馈信息！"
结束 函数

' 向前端输出当前格式化后的时间信息
' 地址：http://xxx.com/Api.php?a=Post1
函数 获取时间()
    输出 "收到的POST参数：" + 取请求值("key")
结束 函数

请求接口 要点

  • 仅限项目内：请求接口 只能请求当前项目中用轻语言编写的 .sph 文件
  • 参数1（脚本名）：对应 .sph 文件名（不带扩展名），如 "Api"
  • 参数2（函数名）：要调用的后端函数名（会被赋值给 URL 的 a 参数）
  • GET 请求：请求接口("Api", "Test1", 回调)
  • POST 请求：请求接口("Api", "Post1", 回调, "key=123")
  • 回調签名：(请求结果, 标记) => { ... }

三种请求方式对比

函数跨域限制请求目标适用场景
发送GET请求受同源策略限制任意 URL请求外部 GET 接口
发送POST数据受同源策略限制任意 URL请求外部 POST 接口
请求接口不受跨域限制（同源）仅项目内 .sph请求本项目后端

注意事项

  • 需部署到 PHP 环境：在页面中发送网络请求，需要将编译输出的程序部署到支持 PHP 环境的本地 WEB 环境或上传到服务器中，然后打开网页才能看到效果。
  • 同源策略与跨域：发送GET请求/发送POST数据 受浏览器同源策略限制，请求非同源地址会报 Access-Control-Allow-Origin 错误。若需跨域，服务端需配置 CORS 响应头。
  • 请求接口 无跨域问题：由于 请求接口 请求的是当前项目内的后端脚本，属于同源请求，不存在跨域问题。
  • 批量请求的回调签名：子函数的参数必须为 (请求结果, 标记)，即使不使用标记也必须保留参数位置。
  • POST 数据格式：键值对字符串 "key=value"，多个参数用 & 连接："key1=value1&key2=value2"。
  • 异步请求：所有请求均为异步，通过回调接收结果，不能直接在请求后立即使用结果。
  • 拉姆达回调：单次请求可用拉姆达表达式接收；批量请求建议用子函数统一处理。

学习要点总结

知识点关键代码适用场景
单次 GET发送GET请求(地址, (结果,标记) => {...})单个 GET 请求
批量 GET发送GET请求(地址, 子函数名, 标记)多个 GET 请求统一处理
单次 POST发送POST数据(地址, 数据, (结果,标记) => {...})单个 POST 请求
批量 POST发送POST数据(地址, 数据, 子函数名, "", 标记)多个 POST 请求统一处理
项目内接口请求接口("脚本名", "函数名", 回调)请求 .sph（GET）
项目内 POST请求接口("脚本名", "函数名", 回调, 数据)请求 .sph（POST）
回调签名(请求结果, 标记)接收结果
跨域限制同源策略 / CORS外部请求需配置 CORS

相关文档

  • 文档轻语言网站：服务端脚本程序API接口 —— .sph 后端脚本写法
  • 文档轻语言网站：与原生JS混合开发 —— 使用 $.get 等 jQuery 网络请求
  • 文档轻语言网站：轻语言语法速查 —— 拉姆达表达式语法
  • 文档前端(JavaScript)函数_网络请求 —— 网络请求函数详解
  • 文档综合演示：网页留言板开发 —— 前后端联调实战
  • 文档综合演示：MySQL数据库操作 —— 后端接口操作数据库
  • 文档综合演示：WebSocket使用演示 —— WebSocket 实时通信