概念
AJAX即Asynchronous JavaScript and XML，异步JavaScript和XML，是指一种创建交互式网页应用的网页开发技术。
今天我们利用AJAX来完成form表单的提交
众所周知，web运行的原理就是发送一次请求，对应一个页面，刷新整体，我们可以使用AJAX使页面局部刷新如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。
今天做一个AJAX提交form表单完成简单弹幕操作的小demo。效果如下：
image.png
我们先来看这个弹幕的需求：
- 需要这个弹幕从右到左出现，并且每次从不同的高度top值出现
- 弹幕不允许换行
- 每次输入文字，点击发送，存入后台，之后从后台拿出数据在屏幕上显示
- 弹幕文字到左边出边界后消失
现在开始书写代码
先搭建一个简单html页面，完善下CSS代码
<style>
#danmu{
width: 500px;
height: 500px;
background: #000;
position: relative;
overflow: hidden;
}
.word{
font-size: 15px;
color: #fff;
position: absolute;
top: 0;
left: 500px;
white-space: nowrap;//强制不换行
}
</style>
<div id="danmu">
</div>
<input type="text" id="word" name="word"/>
<input type="button" name="btn" id="btn" value="发送" />
让弹幕出现前，我们前台需要向后台发送请求，使用AJAX，就需要用到创建一个XMLHTTRequest对象
var xhr = new XMLHTTPRequest();
然后我们需要输入文字，点击发送，将文字发送到后台存储，这时候需要在点击事件创建formData对象来模拟表单提交。
var btn = document.getElementById('btn');
btn.onclick = function() {
//从文本框获得用户的输入；
var word = document.getElementById('word').value;
document.getElementById('word').value="";//每次弹幕清零
var formData = new FormData();
formData.append("word",word);//调用append()方法来添加数据
//发送数据给后台
xhr.open("post","弹幕.php");
xhr.send(formData);
}
写一段让文字移动代码，并用函数封装成方法
var words = [];
function moverWords(){
for(i in words){
words[i].style.left = parseInt(words[i].style.left) - 5 + "px";
//如果超出边界，删除该元素
if(parseInt(words[i].style.left)<-words[i].offsetWidth){
//删除该字块
words[i].remove();
//同时删除数组里的元素
words.splice(i,1);
}
}
}
向弹幕添加文字，并封装成一个方法
//封装一个随机数方法
function getRand(max,min){
return Math.floor(Math.random()*(max-min)+min);
}
function addWord(word) {
var div = document.createElement('div');
div.innerHTML = word;//从后台拿去的数据
div.className = "word";
div.style.left = "510px";
div.style.color = "rgb("+getRand(255,0)+","+getRand(255,0)+","+getRand(255,0)+")";
div.style.fontSize = getRand(40,16)+"px";
//随机设置一个高度
div.style.top = getRand(10,450)+"px";
document.getElementById('danmu').appendChild(div);
words.push(div);
}
向后台提取数据，xhr.onload相当于xhr.onreadyState =4;
XML readyState
| onreadyState | 状态 | 作用 |
|---|---|---|
| 0 | 未初始化。 | 尚未调用open()方法。 |
| 1 | 启动。 | 已经调用open()方法，但尚未调用send()方法。 |
| 2 | 发送， | 已经调用send()方法，未接受到响应。 |
| 3 | 接受。 | 已经接受部分响应数据。 |
| 4 | 完成。 | 全部接受响应的数据，并且可以在客户端使用。 |
xhr.onload = function(){
var data = JSON.parse(this.responseText);//得到后台的返回值
for(i in data) {
//调用addWord方法像弹幕添加文字
addWord(data[i]);
}
}
//弹幕需要定时刷新，该函数为刷新数据
function reloadWord(){
xhr.open("get","get弹幕.php");
xhr.send();
}
使用定时器
//设置一个定时器，执行文字移动
setInterval("moverWords()",50);
//设置一个定时器，每秒执行一次添加文字操作
setInterval("reloadWord()",1000);
这样我们的前台工作就完成了，下面开始完成后台的数据存储和读取
创建一个弹幕.php存储数据，在创建一个get弹幕.php方便读取数据
首先开始存储数据的书写。
<?php
//save
if(!empty($_POST['word'])){
$word = htmlspecialchars($_POST['word']);
$fp = fopen("danmu.txt","a+");
fwrite($fp,$word."\n");
fclose($fp);
echo json_encode(array($word));
}
?>
之后开始书写读取数据
<?php
//为前台提供全部的弹幕数据
$fp = fopen("danmu.txt","r");
$danmu = array();
while(!feof($fp)){
$line = fgets($fp);
if($line){
$danmu[] = $line;
}
}
fclose($fp);
echo json_encode($danmu);
?>
这样就完成了，但是有个bug，弹幕是从第一次书写的到最后一次书写的一直更新，就像请了水军一样，做不到实时更新，输一次弹幕弹出来一次，我做了一个小改动，在读取页面后台的while循环中的时候添加了一段代码
fseek($fp,0,SEEK_END);
image.png
这样将文件指针纸质放在最后就可以完成只有输入才出现弹幕的试试效果，希望大家喜欢！
网友评论