利用ajax技术实现数据get方式与post方式的实时传输与接收实验
2023-09-11 14:17:07 时间
利用ajax技术实现数据get方式与post方式的实时传输与接收实验
1.通过ajax在html中利用get方式进行提交数据,将数据存储到message.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<textarea name="" id="ta" cols="30" rows="10"></textarea> <!--留言输入框-->
<input type="button" value="提交" id="btn"> <!--提交按钮-->
<?php
@$message = $_REQUEST["message"];
$f = fopen("message.txt","a");
$r = fwrite($f,$message);
$data = ["data"=>"chenggong"];
$data1 = ["data"=>"shibai"];
if($r == false){
echo json_encode($data);
}
?>
<script>
var obtn = document.getElementById("btn");
var ota = document.getElementById("ta");
obtn.onclick = function () { //添加点击事件
var xhr = null;
//兼容ie
if (window.XMLHttpRequest) { //window.XMLHttpRequest表示该类存在
var xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
var message = ota.value; // 在提交过程中没提交换行符
message = encodeURI(message); //为了保证换行符能够提交 需要对数据进行url编码
xhr.open("get", "ajax.php?message="+message, true); //构造请求
xhr.send(); //发送请求
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
ota.value = "";
alert(data["data"]); }
}
}
}
</script>
</body>
</html>
2.通过ajax在html中利用post方式进行提交数据,将数据存储到message.txt
html文件源码
<!--//2.通过ajax在html中利用post方式进行提交数据,将数据存储到message.txt-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<textarea name="" id="ta" cols="30" rows="10"></textarea> <!--留言输入框-->
<input type="button" value="提交" id="btn"> <!--提交按钮-->
<script>
var obtn = document.getElementById("btn");
var ota = document.getElementById("ta");
obtn.onclick = function () { //添加点击事件
var xhr = null;
//兼容ie
if (window.XMLHttpRequest) { //window.XMLHttpRequest表示该类存在
var xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
// 通过post 进行提交数据
xhr.open("post","ajax.php",true);
// 需要提交的数据
var message = ota.value;
// 按照需要的提交格式进行拼接
var data = "message="+message;
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send(data);
xhr.onreadystatechange=function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
// 问题 当点击完之后没有交互 不友好
// 需要提示
var data = JSON.parse(xhr.responseText);
// 清空 输入框
ota.value = "";
alert(data["data"]);}
}
}
}
</script>
</body>
</html>
php文件源码
$message = $_REQUEST["message"];
$f = fopen("message.txt","a");
$r = fwrite($f,$message);
$data = ["data"=>"chenggong"];
$data1 = ["data"=>"shibai"];
if($r == false){
echo json_encode($data1);
}else{
echo json_encode($data);
}
效果展示
3.通过ajax在html中显示message. txt中的内容
html文件源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li id="li"></li>
<input type="button" value="请求数据" id="btn">
</ul>
<script>
var obtn=document.getElementById("btn");
obtn.onclick = function () {
var xhr = null;
//兼容ie
if (window.XMLHttpRequest) { //window.XMLHttpRequest表示该类存在
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open("get", "ajax.php", true); //构造请求
xhr.send(); //发送请求
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
odiv = document.getElementById("li");
var arr = JSON.parse( xhr.responseText); // 将json字符串转换成数组
// 将数组中的三个元素循环放到div中
odiv.innerHTML = ""; //在下次点击之前返回空值,从而不重复获取
for (var i =0;i<arr.length;i++){
odiv.innerHTML += arr[i]+"<br>"; //字符串拼接并换行
}
}
}
}
}
</script>
</body>
</html>
php文件源码
$file=fopen("message.txt","r");
$arr=array();
while (feof($file)==false){
$arr[]=trim(fgets($file));
}
echo json_encode($arr);
效果展示
相关文章
- asp.net signalR 专题—— 第一篇 你需要好好掌握的实时通讯利器
- Jmeter函数作用域实时取值覆盖[针对HTTP Request等控制器]
- EasyDarwin流媒体云平台:EasyCamera开源摄像机接入海康威视摄像机实时视频
- 利用动态图层实现数据的实时显示(arcEngine IDynamiclayer)
- NLP之ASR:基于python和机器学习算法带你玩转的语音实时识别技术
- 1800 字带你了解视频会议、视频聊天底层技术:WebRTC 网页实时通信
- 前端音视频WebRTC实时通讯的核心
- python 实时显示声音
- 【Linux 内核】进程管理 - 进程优先级 ② ( prio 调度优先级 | static_prio 静态优先级 | normal_prio 正常优先级 | rt_priority 实时优先级 )
- Facebook的实时流处理技术——Scuba是Facebook的一个非常快速、分布式的内存数据库,用于实时分析和查询
- 异步通信技术AJAX | 原理剖析、发送Ajax请求四步
- 实时流处理架构与技术选型