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 ...
随机推荐
- python 多线程操作数据库
如果使用多线程操作数据库,容易引起多用户操作锁表 OperationalError: (2013, 'Lost connection to MySQL server during query') 使用 ...
- python模块部分 re模块 之正则表达式
python 全栈开发 1.什么是模块 2.正则表达式 一.什么是模块? 1.模块: 是一组功能的集合 你要和一个东西打交道,但是这个东西本身和python没有关系,这个东西本身就存在, 这时,pyt ...
- JMeter使用中遇到的问题：Jmeter Debug - "Unrecognized VM option '+HeapDumpOnOutOfMemoryError"（转载）
转载自 http://www.cnblogs.com/yangxia-test 启动JMeter.bat的程序时,出现以下出错信息: Unrecognized VM option '+HeapDump ...
- overflow属性的用法
<style type="text/css">div{ background-color:#00FFFF; width:150px; height:150px; ove ...
- 第三章 列表（a）接口与实现
- Python 学习笔记---基础篇
1. 简单测试局域网中的电脑是否连通.这些电脑的ip范围从192.168.0.101到192.168.0.200 import subprocess cmd="cmd.exe" b ...
- 游戏行业的女性拥有强大的新盟友：Facebook
据外媒 TheNextWeb 报道,Facebook 本周宣布其新的游戏行业女性倡议,致力于鼓励更多的女性加入游戏行业.这家社交媒体公司专注于提供榜样和成功故事,而这实际上是一种令人愉快的方式.虽然游 ...
- Java-排序算法-插入排序
一.插入排序的原理 将一个记录插入到一个已经排好序的有序表中,从而得到一个新的,记录数增1的新的有序表.从第一个元素开始,先将第一个元素看做一个排好序的子序列,然后从第二个元素开始起,对第二个元素进行 ...
- 惠普/aruba交换机
1.开启CDP cdp run show cdp neighbors可看到各端口上.下联的AP或交换机 2.配置telnet管理 1)配置IP地址 vlan 77 name "VLAN77 ...
- js 定时执行
代码: 格式例子: setInterval(方法名,1000*60); setInterval("方法名()",1000*60); setInterval(function () ...