利用ajax技术实现数据get方式与post方式的实时传输与接收实验
利用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+"<br>";//字符串拼接并换行
}
}
}
}
}
</script>
</body>
</html>
php文件源码
$file=fopen("message.txt","r");
$arr=array();
while (feof($file)==false){
$arr[]=trim(fgets($file));
}
echo json_encode($arr);
效果展示
页:
[1]