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 ...
随机推荐
- JMeter学习（十五）JMeter测试Java（转载）
转载自 http://www.cnblogs.com/yangxia-test 目的:对Java程序进行测试 目录 一.核心步骤 二.实例 三.JMeter Java Sampler介绍 四.自带Ja ...
- 一、Blender/Python 快速入门
原文:https://docs.blender.org/api/blender_python_api_current/info_quickstart.html#native-types 1 前言 可以 ...
- Django的几种缓存的配置
1.缓存的简介 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑,最后生成用户看到的页面. 当一个网站的用户访问量很大的时候,每一次的的后台操作,都会 ...
- JavaScript各种继承方式（六）：寄生组合继承
一 原理 用寄生继承来改造组合继承. function Fruit(name){ this.name = name; } Fruit.prototype.eat = function(){ conso ...
- xadmin系列之单实例模式
先看下单实例的定义 python的模块实现单例模式是python语言特有的,python的模块天然就是单例的,因为python有个pyc文件,导入一次后,第二次导入直接从pyc中取数据了 这里我们主要 ...
- java类封装成dll
@参考文章1,@参考文章2,@参考文章3 1,建立测试类,注意英文注释部分,用汉语直接编译会乱码 public class Hello { //native method is used for ca ...
- day 21 封装，多态，类的其他属性
封装 封装:将一些数据,重要的信息等等放到一个地方(空间中) class A: country = 'China' area = '深圳' def __init__(self,name,age): s ...
- 设置TextFiled输入长度限制
#pragma mark - 显示超过11位不让输入 - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange: ...
- java_15 System类
1.System类 2.System类方法 (1)currentTimeMillis() public static void main(String[] args) { long start = S ...
- Java_7.1 ArrayList应用点名器
1.ArrayList同样可以添加自定义的类 将学生类添加到ArrayList集合中,其中学生类包括学生姓名,年龄 自定义学生类 package demo1; public class Student ...