ajax的基础
去年也是这个时候，开始学了ajax，也是这个技术领我走上了网页制作的道路，于是这样感觉到手写html比之前的dw拖拖拽拽要有意思得多。
话不多说，下面是一个例子：
这个是ajax显示页面：index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>##随笔</title>
<script type="text/javascript">
var xmlHttp;
/*创建对象函数*/
function GetXmlHttpObject()
{
var xmlHttp;
try
{
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
alert("ajax对象创建失败，请安装最新的浏览器。");
return false;
}
}
}
return xmlHttp;
}
/*状态改变函数*/
function stateChanged()
{
if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("showArea").innerHTML += xmlHttp.responseText;
pauseButton();
}
}
/*刷新函数*/
function reflesh()
{
if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("showArea").innerHTML = xmlHttp.responseText;
pauseButton();
}
}
/*显示新博文到页面上*/
function showNewBlog()
{
var title = document.getElementById("title").value;
var content = document.getElementById("content").value;
var action = document.getElementById("action").value;
if(content.length < 1 || content.length >52)
{
alert("内容长度必须大于1并且小于52。");
return;
}
if(title.length == 0)
title="无题";
xmlHttp = GetXmlHttpObject();
if(xmlHttp == null)
{
alert("你的浏览器有问题。");
return;
}
var url = "blog.php";
url = url+"?title="+encodeURIComponent(title);
url = url+"&content="+encodeURIComponent(content);
url = url+"&action="+action;
url = url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function initialPage()
{
var action = "initial";
xmlHttp = GetXmlHttpObject();
if(xmlHttp == null)
{
alert("你的浏览器不支持Ajax。");
return;
}
var url = "blog.php";
url = url+"?action="+action;
url = url+"&sid="+Math.random();
xmlHttp.onreadystatechange=reflesh;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function pauseButton()
{
document.getElementById("submit").disabled=true;
setTimeout("document.getElementById('submit').disabled=false",3000);
}
function deleteBlog(id)
{
var s = confirm("确定删除这篇随笔吗？");
if(s == true)
{
xmlHttp = GetXmlHttpObject();
if(xmlHttp == null)
{
alert("你的浏览器有问题。");
return;
}
var url = "blog.php";
var action= "delete";
url = url+"?id="+id;
url = url+"&action="+action;
url = url+"&sid="+Math.floor(Math.random()*100000);
xmlHttp.onreadystatechange=reflesh;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
else
return;
}
</script>
<style type="text/css">
.main{margin:0 auto; width:985px; font-family:"宋体";}
.clear{ clear:both;}
.form{margin-top:66px;}
.form textarea{}
.showArea{ }
.showArea div{ width:127px; height:160px; border:#000000 1px solid; overflow:hidden; float:left; margin-left:1px; margin-top:1px; cursor:pointer;}
.showArea h3{ font-size:14px; font-weight:bold; background:#CCCCCC; border-bottom:#666666 1px solid;margin:0px; padding:0px; text-align:center; line-height:20px;}
.showArea p{ font-size:12px; text-indent:2em; text-decoration:underline; line-height:18px; margin:3px 3px 0px 3px;}
.showArea i{ font-size:10px; margin-top:18px; text-align:right; margin-right:3px; display:block;}
.showArea span{ font-size:10px; display:block; float:right; margin-right:2px;}
</style>
</head>
<body>
<div class="main">
<div id="showArea" class="showArea"></div>
<div class="clear"></div>
<div class="form">
<form name="edit" id="edit" class="edit">
标题：<input type="text" size="30" id="title" maxlength="6" /><br />
<textarea rows="6" cols="40" id="content"></textarea><br />
<input type="hidden" id="action" value="add" />
<input type="button" id="submit" value="发随笔" onclick="showNewBlog()" />
</form>
</div>
</div>
<script type="text/javascript">
initialPage();
</script>
</body>
</html>
这个是服务端代码以及数据库结构:blog.php
<?php
/*数据表
--
-- 表的结构 `lewyblog`
--
CREATE TABLE `lewyblog` (
`id` int(11) NOT NULL auto_increment,
`title` varchar(20) default NULL,
`content` varchar(70) default NULL,
`dateline` int(11) default NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
*/
/********************************/
//数据库配置部分
$db_host="115.*.*.*";
$db_user="dbuser";
$db_password="dbpass";
$db_name="dbnme";
/********************************/
$con = mysql_connect($db_host,$db_user,$db_password);
mysql_select_db($db_name,$con);
mysql_query("set names utf8");
/****************Fuction Start********************/
function display_one_blog($id=1)
{
$sqlstr = "select * from lewyblog where id=".$id;
$res = mysql_query($sqlstr);
while($arr = mysql_fetch_array($res))
{
$content = "<div id='".$arr['id']."'><h3><span id='".$arr['id']."' onclick='deleteBlog(this.id)'>×</span>".$arr['title']."</h3><p>".$arr['content']."</p><i>".date("y-m-d H:i",$arr['dateline'])."</i></div>";
}
return $content;
}
function initial()
{
$sqlstr = "select * from lewyblog order by dateline asc";
$res = mysql_query($sqlstr);
$content = "";
while($arr = mysql_fetch_array($res))
{
$content .= "<div id=".$arr['id']."><h3><span id='".$arr['id']."' onclick='deleteBlog(this.id)'>×</span>".$arr['title']."</h3><p>".$arr['content']."</p><i>".date("y-m-d H:i",$arr['dateline'])."</i></div>";
}
return $content;
}
function display_new_blog()
{
$sqlstr = "select * from lewyblog order by dateline desc limit 1";
$res = mysql_query($sqlstr);
while($arr = mysql_fetch_array($res))
{
$content = "<div id=".$arr['id']."><h3><span id='".$arr['id']."' onclick='deleteBlog(this.id)'>×</span>".$arr['title']."</h3><p>".$arr['content']."</p><i>".date("y-m-d H:i",$arr['dateline'])."</i></div>";
}
return $content;
}
function insert_new_blog($title="",$content="")
{
$sqlstr = "insert into lewyblog (title, content, dateline) values('$title','$content',".time().")";
$res = mysql_query($sqlstr);
if(!$res)
{
return false;
}
else
return true;
}
function deleteBlog($id=0)
{
if(!$id)
{
return;
}
$sqlstr = "delete from lewyblog where id=".$id;
$res = mysql_query($sqlstr);
return;
}
/************************Function End**************************************/
if($_GET["action"]=="add")
{
$title = $_GET["title"];
$content = $_GET["content"];
if(insert_new_blog($title,$content))
{
echo display_new_blog();
}
else
{
die("插入数据库失败");
}
}
elseif($_GET["action"]=="initial")
{
echo initial();
}
elseif($_GET["action"]=="delete")
{
$id = $_GET["id"];
deleteBlog($id);
echo initial();
}
else
{
die("非法操作");
}
?>
ajax的基础的更多相关文章
- ajax技术基础详解
一.概述 1.什么是ajax 可以与服务器进行[异步]交互的技术,浏览器无需刷新 2.什么时候出现ajax? -- XMLHttp 微软 1999年微软公司发布IE5版本,内嵌了ajax技术 什么时候 ...
- Ajax编程基础
目录 Ajax编程基础 传统网站中存在的问题 Ajax概述 Ajax的应用场景 Ajax的运行环境 Ajax运行原理及实现 Ajax运行原理 Ajax的实现步骤 1.创建Ajax对象 2.告诉Ajax ...
- Ajax 学习 - 基础学习
<AJax - Async Javascript and xml - 异步的JavaScript和XML> 一.基础认识 AJax技术的目的:实现页面无刷新数据动态更改 优点: + 不需 ...
- Ajax之基础总结
一.Ajax 简介 Ajax 由 HTML.JavaScript技术.DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序.在详细探讨 Ajax 是 ...
- Ajax——异步基础知识（一）
基础概念 1.异步请求可以做到偷偷向服务器发送请求,而页面却不刷新 2.get异步请求传递参数是通过url追加键值对的方式 3.post异步请求比较特殊,需要设置请求的类型 User-Agent:浏览 ...
- Ajax之基础
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/liu_yujie2011com/article/details/29812777 几 ...
- Ajax全面基础学习（二）
两种配置ajax的方式 $.ajax('url',{ 配置ajax}); $.ajax({ url : 'url' 其他ajax配置}) ajax的回调函数 $.ajax('url',{ //请求成功 ...
- Ajax全面基础学习（一）
快捷方法: $.get(url,[data],[callback],[type])get方法的[data]将被链在url后面[callback]是请求成功后的回调,可以得到响应数据,如果请求失败,看不 ...
- 《所用到的AJAX技术基础》
来自百度网页,w3cshool网页:AJAX = Asychronous JavaScript and XML,翻译成中文为:异步的JavaScript XML. 异步的意思就是不重新加载整个页面,后 ...
- ajax传输 基础一
一个简单页面的传输 index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
随机推荐
- XSS和CSRF的区别
XSS:攻击者发现XSS漏洞 => 构造代码 => 发送给受害者 => 攻击者获取受害者的cookie => 完成攻击 CSRF:攻击者发现CSRF漏洞 => 构造代码 ...
- python 分词
import jieba text = '我来到北京清华大学' default_mode =jieba.cut(text) full_mode = jieba.cut(text,cut_all=Tru ...
- GIT 命令集
Git图形化界面 下面是我整理的常用 Git 命令清单.几个专用名词的译名如下. Workspace:工作区 Index / Stage:暂存区 Repository:仓库区(或本地仓库) Remot ...
- JAVA高精度模板
刚开始还坚持用C++写高精来着,后来发现JAVA写高精方便太多了,所以也来学习一下JAVA高精度的模板. 参考:https://www.cnblogs.com/imzscilovecode/p/883 ...
- poj3104（二分）
题目链接:http://poj.org/problem?id=3104 题意:有n件衣服,每一件含有a[i]单位的水,每分钟衣服可以自然蒸发1单位的水,也可以在烘干器上每分钟烘干k单位的水,问将所有衣 ...
- 第一个springMVC小程序
1首先配置一个前端控制器,在web.xml文件中配置(dispatcherservlet) <!-- 前端控制器配置 --> <servlet> <servlet-nam ...
- vue 给v-html中的元素设置样式
解决方案:写样式的时候添加>>>
- TZOJ 4871 文化之旅(floyd预处理+dfs剪枝)
描述 有一位使者要游历各国,他每到一个国家,都能学到一种文化,但他不愿意学习任何一种文化超过一次,即如果他学习了某种文化,则他就不能到达其他有这种文化的国家.不同的国家可能有相同的文化.不同文化的国家 ...
- 利用jenkins+saltstack+sh部署项目到多台服务器
jenkins的配置(这里作用只是当做界面使用,利用它来管理执行salt命令,这里以 shop.51ekt.com 这个项目目录为例) 1.利用参数化构建项目,来实现是发布还是回滚操作: 2.构建操作 ...
- linux下rsync+inotify实现服务器之间文件实时同步
先介绍一下rsync与inotify. 1.rsync 与传统的cp.tar备份方式相比,rsync具有安全性高.备份迅速.支持增量备份等优点,通过rsync可以解决对实时性要求不高的数据备份需求,例 ...