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 ...
随机推荐
- 【scrapy】关于xpath helper中能匹配，但是在程序里匹配为none的问题
原本使用xpath helper匹配的时候还是好好的,然鹅,把这个.//*[@id='novelInfo']/table/tbody/tr[3]/td[1]/复制到代码里就不行了,debug的时候显示 ...
- Centos7 下的NTP-server（Chorny） 部署及客户端时间同步配置
一.介绍 1.本博客以 ceph 集群搭建时的NTP-server 为例. 2.hosts # vim /etc/hosts 10.6.32.20 ceph1 (作为时间服务器) 10. ...
- 分布式处理框架MapReduce的深入简出
1).MapReduce的概述 2).MapReduce 编程模型 3).MapReduce架构 4).MapReduce编程 Google MapReduce论文,论文发表于2004年 Hadoop ...
- http://www.bugku.com：Bugku——jsfuckWEB5（http://120.24.86.145:8002/web5/index.php）
今天又做了bugku上面的一道题.使用到了jsfuck,它是什么捏? 它是Javascript原子化的一种简易表达方式,用[]()!+就可以表示所有的Javascript字符,不依赖于浏览器. ...
- python 中 类型转换 bytes
https://www.cnblogs.com/sesshoumaru/p/5980090.html
- java获取电脑部分信息
获取mac地址与cpu序列号 参考博客:https://www.jb51.net/article/94793.htm 另一篇参考地址没记录下来 package util; import java.io ...
- MVC报错：找到多个与名为“Home”的控制器匹配的类型。
错误原因是:在根目录中的Controller中有HomeController,而在Areas中也有一个HomeController,只是他们的命名空间不一样. 这样的话,只需要在对应的路由注册中加入命 ...
- 序列化、模块 day21
一 序列化 什么叫序列化——将原本的字典.列表等内容转换成一个字符串的过程就叫做序列化. 字典示例 import json d={'a':1,'b':2} ret = json.dumps(d)# ...
- java的几个日志框架log4j、logback、common-logging
开发工作中每个系统都需要记录日志,常见的日志工具有log4j(用的最多),slf4j,commons-loging,以及最近比较流行的logback 以前只是在项目中用log4j,更多的是参考下配置文 ...
- jQuery Dom对象操作 增、删、改、复制、包裹
1. 增(插入) 内部插入 //向每个匹配的元素内部追加内容,为最后一个子元素$('.violet').append('<div></div>'); //把所有匹配的元素追加到 ...