以留言本的开发打开ajax的世界

zoukankan html css js c++ java

以留言本的开发打开ajax的世界

　　之前就一直听后台人员说了ajax的强大的美丽，现在初步涉及，方才知道世界之大，无奇不有，我永远只是其中的一只菜鸟，现在就一个外表非常丑陋的界面来简单的介绍一下ajax制作的简易的留言本。

　　ajax，之前在我的印象中一直就是一个神奇的只可远观不可亵玩的东西，知道今天了解之后，才知道无非就只有一个功能，就是进行扒数据，就是从后台人员所写的文件进行扒数据，至于那文件的书写，就是后台人员的事情了。ajax之需要根据需要传递什么数据，并返回什么值，只要了解这些也就足够了。

　　以下就是ajax所要用到的几个文件，首先必不可少的当然就是html和css文件

　　html文件的代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" style="text/css" href="css.css" />
<script src="ajax.js"></script>
<script src="guestbook1.js"></script>
</head>

<body>
<div id="header"></div>

<div id="container">

<div id="list">

</div>
<div id="showMore">显示更多...</div>

<div id="sidebar">

<div id="user" style="margin-bottom: 10px;">
<h4><span id="userinfo"></span> <a href="" id="logout">退出</a></h4>
</div>


<div id="reg">
<h4>注册</h4>
<div>
<p>用户名：<input type="text" name="username" id="username1"></p>
<p id="verifyUserNameMsg"></p>
<p>密码：<input type="password" name="password" id="password1"></p>
<p><input type="button" value="注册" id="btnReg" /></p>
</div>
</div>


<div id="login">
<h4>登陆</h4>
<div>
<p>用户名：<input type="text" name="username2" id="username2"></p>
<p>密码：<input type="password" name="password2" id="password2"></p>
<p><input type="button" value="登陆" id="btnLogin" /></p>
</div>
</div>


<div id="sendBox">
<h4>发表留言</h4>
<div>
<textarea id="content"></textarea>
<input type="button" value="提交" class="btn1" id="btnPost" />
</div>
</div>
</div>

</div>

</body>
</html>

然后就是css文件，因为本文章主要介绍的就是其利用ajax的功能，所以对于其中的css美化这一方面知识简单的带过而已。

@charset "utf-8";

body {
margin: 0; padding: 0;
background: url("images/bg.gif");
}

h1,h2,h3,h4,h5,h6 { margin: 0; padding: 0;}

a {text-decoration: none; color: #444;}

.hide {
display: none;
}
.show {
display: block;
}

.btn1 {
padding: 0 12px; margin-left: 0px;
display: inline-block;
height: 28px; line-height: 28px; font-size: 14px;
border: 1px solid #D9D9D9; background-color: #FAFAFA;
}

#header {
position: relative;
height: 42px; background-color: #FFF; border-bottom: 1px solid #CCC;
}
#wrapper {
margin: 0 auto; overflow: hidden;
1000px; height: 42px; border-right: 1px solid #EEE;
}
#wrapper a.loginNav {
padding: 0 10px; float: right;
100px; height: 42px; border-left: 1px solid #EEE;
text-align: center; line-height: 42px;
}
#wrapper a.loginNav:hover {
color: #9A0000;
}

#container {
margin: 10px auto; position: relative;
1000px;
}

#sidebar {
padding: 10px; position: absolute; top: 0px; right: 0px;
300px; border: 1px solid #CCC; background-color: white;
}
#sidebar h4 {
padding: 5px;
height: 24px; line-height: 24px; background-color: #CCC;
}

#sendBox {
300px;
}
#sendBox div {
margin: 5px 0;
}
#sendBox textarea {
margin-bottom: 5px;
294px; height: 140px;
}

#list {
660px;
}
#list dl {
margin: 0 0 10px 0; padding: 10px;
border: 1px solid #CCC; background-color: white;
}
#list dt {
height: 30px; line-height: 30px;
}
#list dd.t {
text-align: right;
}

#list dd.t a {margin: 0 5px;}

#showMore {
640px;
margin: 0 0 10px 0; padding: 10px;
border: 1px solid #CCC; background-color: white; text-align: center;
cursor: pointer;
}

在进行完html与css的简单布局之后，现在就开始进入ajax的世界了，无非就是分成几部分，1，创建对象；2写open()方法；其中就是传递几个参数，一个是方法，分get与post两种方法，第二个人技术url，就是要请求服务器的链接网址；3无非就是true或false，代表是不是异步，至于异步这个概念，以后有时间再来详细的介绍。为了方便，便将其封装成一个ajax.js文件，直接在html文件中进行调用。

ajax.js文件内容如下

function ajax(method, url, data, success) {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

if (method == 'get' && data) {
url += '?' + data;
}

xhr.open(method,url,true);
if (method == 'get') {
xhr.send();
} else {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
}

xhr.onreadystatechange = function() {

if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
success && success(xhr.responseText);
} else {
alert('出错了,Err：' + xhr.status);
}
}

}
}

最好就是guestbook.js文件，我的步骤就是在服务器中引进一个guestbook文件，然后里面有一个php文件，提供了每一个功能模块的接口，然后这个guestbook.js文件书写了一些方法来实现具体功能

guestbook.js文件代码

window.onload=function(){
var oUsername=document.getElementById("username1");
var overifyUserNameMsg=document.getElementById("verifyUserNameMsg");
var ouser=document.getElementById("user");
var ouserinfo=document.getElementById("userinfo");
var oreg=document.getElementById("reg");
var ologin=document.getElementById("login");
var olist=document.getElementById("list")
var oshowList=document.getElementById("showMore");
var iPage=1;
oUsername.onblur=function(){
ajax('get','guestbook/index.php','m=index&a=verifyUserName&&username='+this.value,function(data){
var d=JSON.parse(data);
overifyUserNameMsg.innerHTML=d.message;
if(d.code){
overifyUserNameMsg.style.color='red';
}
else{
overifyUserNameMsg.style.color='green';
}
})
}
var oPassword1 = document.getElementById('password1');
var oRegBtn = document.getElementById('btnReg');
oRegBtn.onclick=function(){
ajax('post','guestbook/index.php','m=index&a=reg&username='+encodeURI(oUsername.value)+'&password='+oPassword1.value,function(data){
var d=JSON.parse(data);
alert(d.message);
})
}
var oUsername2=document.getElementById("username2");
var oPassword2 = document.getElementById('password2');
var obtnLogin = document.getElementById('btnLogin');
obtnLogin.onclick=function(){
ajax('post','guestbook/index.php','m=index&a=login&username='+encodeURI(oUsername2.value)+'&password='+oPassword2.value,function(data){
var d=JSON.parse(data);
alert(d.message);
if(!d.code){
UpDateUsernameStates()
}
})
}
function getCookie(key) {
var arr1 = document.cookie.split('; ');
for (var i=0; i<arr1.length; i++) {
var arr2 = arr1[i].split('=');
if (arr2[0]==key) {
return arr2[1];
}
}
}
UpDateUsernameStates();
function UpDateUsernameStates(){
var uid=getCookie('uid');
var username=getCookie('username');
if(uid){
ouser.style.display="block";
ouserinfo.innerHTML=username;
oreg.style.display="none";
ologin.style.display="none";
}
else{
ouser.style.display="block";
ouserinfo.innerHTML="";
oreg.style.display="block";
ologin.style.display="block";
}
}
var oLogout = document.getElementById('logout');
oLogout.onclick = function() {

ajax('get', 'guestbook/index.php', 'm=index&a=logout', function(data) {

var d = JSON.parse(data);
alert(d.message);

if (!d.code) {
//退出成功
UpDateUsernameStates();
}

});

return false;

}
var ocontent=document.getElementById('content');
var obtnPost=document.getElementById('btnPost');
obtnPost.onclick=function(){
ajax('post','guestbook/index.php','m=index&a=send&content='+ocontent.value,function(data){
var d=JSON.parse(data);
alert(d.message);
if(!d.code){
createList(d.data,true);
}
})
}
function createList(data,insert){
var odl=document.createElement('dl');
var odt=document.createElement('dt');
var ostrong=document.createElement('strong');
ostrong.innerHTML=data.username;
odt.appendChild(ostrong);
var odd1=document.createElement('dd');
odd1.innerHTML=data.content;
var odd2=document.createElement('dd');
odd2.className='t';
var oa1=document.createElement('a');
var oa2=document.createElement('a');
oa1.innerHTML = '顶(<span>'+data.support+'</span>)';
oa2.innerHTML = '踩(<span>'+data.oppose+'</span>)';
odd2.appendChild(oa1);
odd2.appendChild(oa2);
odl.appendChild(odt);
odl.appendChild(odd1);
odl.appendChild(odd2);
if(insert&&olist.children[0]){
olist.insertBefore(odl,olist.children[0])}
else{
olist.appendChild(odl)
}
}

oshowList.onclick=function(){

showList();
iPage++;
}
function showList(){
ajax('get', 'guestbook/index.php', 'm=index&a=getList&n=2&page=' + iPage, function(data) {

var d = JSON.parse(data);

var data = d.data;

if (data) {
for (var i=0; i<data.list.length; i++) {
createList(data.list[i]);
}
}
else {

oshowList.style.display ="none";
}

});
}

}

关于这个php文件则是后端人员书写，所以对于具体的功能与代码这里不再进行详细的解释。

二：几个功能模块的解释

主要就是用户注册，登录，退出，留言，加载更多这五大模块，主要做法基本都是大同小异，都是根据需要传递什么参数就在ajax()中进行传递，并留意返回的数据。

这个就是刚开始出现的右边关于注册登录的界面

上面的这个就是登录自己的账号之后出现的界面，之所以自己的名字会出现成这种情况，是因为登录的名字是中文字符，因为来不及进行装换，所以出现上面这种情况，之后有时间就会进行改进。

上面显示的就是关于留言的界面，第一次只会显示两天留言，因为他默认的留言显示的是n=10,这里为了方便显示看到效果，所以将guestbook.js中的n=2,不断的点击加载更多，便会每次不停的加载两条留言，知道数据库中的留言没有了，显示更多的这个栏便也会消失了。

最后的这就是整体界面。

好了，关于ajax的应用就讲述到这里，具体后期的关于制作实例的会等后期再进行介绍。

查看全文

相关阅读:
java 生成12位随机数，解决The literal 9999999999999 of type int is out of range 问题
 使用loadrunner 12 手动关联
 解析xml文件，修改Jenkins的配置
 自定义报告，用Java写一个html文件
 解决Jenkins的错误“The Server rejected the connection: None of the protocols were accepted”
selenium项目--读取测试用例
 header("Location:login.php")
详细设计说明书(转）
Visual EmbedLinux Tools：让vs支持嵌入式Linux开发(转）
phpstorm集成phpunit（转）

原文地址：https://www.cnblogs.com/jtxn/p/4907486.html