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("非法操作");

}

?>

收藏于 2009-02-23

来自于百度空间

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 ...

随机推荐

MVC005之页面调用控制器中的方法
描述:控制器在传给页面数据时,有时我们需要对传过来的数据进行二次处理如: 1:传过来部门编码,但页面上要显示为部门名称 2:格式转换等我们在写aspx时一般在cs文件中写一个protected的方 ...
veil-evasion免杀处理
veil-evasion 开启 y 配置安装安装好之后,再次运行veil-evasion 有50个payload模块 update 升级 list 查看有哪些payload 选一个payload 它 ...
java.net.UnknownHostException: www.terracotta.org
异常日志: java.net.UnknownHostException: www.terracotta.org at java.net.PlainSocketImpl.connect(PlainSoc ...
webpack 打包问题2
spring mybatis springmvc整合
使用SSM(Spring.SpringMVC和Mybatis)已经有三个多月了,项目在技术上已经没有什么难点了,基于现有的技术就可以实现想要的功能,当然肯定有很多可以改进的地方.之前没有记录SSM整合 ...
安装tensorflow ubuntu18.04
1.首先安装环境是ubuntu18.04. $sudo apt-get install python-pip python-dev python-virtualenv2.安装virtualenv虚拟环 ...
了解Queue
在并发队列上JDK提供了两套实现,一个是以ConcurrentLinkedQueue为代表的高性能队列,一个是以BlockingQueue接口为代表的阻塞队列,无论哪种都继承自Queue, 可以对应着 ...
Unicode编码字符范围和具体文字
1)标准CJK文字 http://www.unicode.org/Public/UNIDATA/Unihan.html 2)全角ASCII.全角中英文标点.半宽片假名.半宽平假名.半宽韩文字母:FF0 ...
c#: UrlDecode()
1.源起: KV需要解析从插件传来的URL网址,因为其可能经过编码,所以需要解码. 初用System.Web.HttpUtility.UrlDecode()这个函数,但根据用户环境crash场景,发现 ...
C++ map中使用erase应该注意到的问题
注意:此程序在win环境下会出现上述描述的问题:在mac环境下第一种方式是正常运行的.Map.erase有3个重载函数: void erase(iterator position); size_typ ...

ajax的基础

ajax的基础的更多相关文章

随机推荐

热门专题