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 ...
随机推荐
- WINDOW 2008多人访问设置
gpedit.msc,在组策略中对位于“计算机配置->策略->管理模板->Windows 组件->远程桌面服务->远程桌面会话主机->连接”中,限制连接数量中进行配 ...
- 无法连接mysql，请检查mysql是否已启动及用户密码是否设置正确
安装好后,登录后台提示 无法连接mysql,请检查mysql是否已启动及用户密码是否设置正确 检查mysql是否启动netstat -lnpt是否有3306端口? 一 有A 检查/www/wdlinu ...
- 安卓下H5弹窗display:table的bug
表单以弹窗的形式弹出时,若设置了表单的div:display:table下,安卓打开页面输入法的时候,表单顶到屏幕顶部之后,再也无法上滑,键盘遮住了下面的输入框.在ios下,一切显示正常,因为iOS会 ...
- L2与L1正则化理解
https://www.zhihu.com/question/37096933/answer/70507353 https://blog.csdn.net/red_stone1/article/det ...
- Mac idea error=13, Permission denied
问题 12:26 Error running 'rs8080': Cannot run program "/Users/xxx/software/apache-tomcat-8.5.37/b ...
- STL-stack和顺序栈实现括号匹配
2018-11-11-14:28:31 1.顺序栈 下面是我用数组实现的顺序栈,包含的函数有出入栈,查看栈顶元素,栈的大小,栈是否空等函数,当栈空间不够用时,对应的数组会自动增长. /******** ...
- JMeter快速入门之Badboy录制
1. 前言 JMeter录制有两种方式,一种是JMeter自带录制方法,另一种是下面要学习的Badboy录制,个人推荐使用此方法 下面教程不设计Badboy安装,可以百度一下. 2. 录制步骤: 2. ...
- Vue Baidu Map 插件的使用
最近在做一个项目,技术采用的是Vue.js套餐,有个百度地图的需求,当时,大脑宕机,立马去引入百度地图API,当时想到两种方法,一种是在index.html中全局引入js,此法吾不喜,就采用了第二种异 ...
- vue 引用公共方法（例子：截取字符串固定字数，其余显示...）
1.写公共js 2.main.js引入公共js 3.在组件中用this.common.方法名 引用
- js常用的数组,,字符串,,Math..正则方法
数组 slice[start,end] 返回从原数组中指定开始下标到结束下标之间的项目组成新数组(不会影响原数组) splice() 1.删除功能:2个参数 , 起始位置 , 删除的项目 2.插入功能 ...