一个计算机技术爱好者与学习者

0%

前言

首先声明,我们将要写的这个小程序,是属于XMPP客户端的。以后要写的程序,也都是XMPP客户端的。

马上开始第一个XMPP程序了,真有点小激动呢!接下来,各位同学和void一起试试手吧!

准备

编程之前,我们需要准备好环境和依赖的工具。

这个程序,我们需要Tomcat服务器、jquery.js、jquery-ui.js、jquery-ui.css、jquery-ui.theme.css、strophe.js、strophe.flxhr.js、flXHR.js以及依赖的文件。哦,还有一个XMPP账号。

下面简单介绍一下环境的准备和依赖工具的下载,最后提供打包好的工具。

阅读全文 »

XMPP是什么?

XMPP,可扩展消息和出席(存在)协议(eXtensible Messageing and Presence Protocol)。顾名思义,这是一个关于收发消息的规范。

最初研发IMPP(即时信息和出席协议,Instant Messaging and Presence Protocol)是为了创建一种标准化的协议,但是今天,IMPP已经发展成为基本协议单元,定义所有即时通信协议应该支持的核心功能集。

XMPP和SIMPLE(针对即时信息和出席扩展的会话发起协议,Session Initiation Protocol for Instant Messaging and Presence Leveraging Extensions)两种协议是架构,有助于实现IMPP协议所描述的规范。

PRIM(出席和即时信息协议,Presence and Instant Messaging Protocol)最初是基于即时通信的协议,与XMPP 和SIMPLE 类似,但是已经不再使用。

阅读全文 »

显示欢迎信息

Ajax的优点我们已经说过了,上个例子先!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!--显示欢迎信息.html-->
<html>
<head>
<title>显示欢迎信息</title>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$("#submit").click(function(){
var name = $(".uname").val();
var data = "uname=" + name;
$.ajax({
type:"POST",
url:"http://demo.voidking.com/welcome.php",
data:data,
success: function(html){
$("#message").html(html);
}
});
return false;
});
});
</script>
</head>
<body>
<form>
<label>Enter your name</label>
<input type="text" name="uname" class="uname" /><br/>
<input type="submit" id="submit"/>
</form>
<div id="message">
</div>
</body>
</html>
1
2
3
4
5
<!--welcome.php-->
<?php
$name = $_POST['uname'];
echo "welcome ".$name;
?>

把ajax实例01.html、welcome.php、jquery-1.11.1.js上传到自己的服务器。打开浏览器访问“显示欢迎信息.html”,输入一个名字,就能看到效果了。

为什么要上传服务器,搞的这么麻烦?大哥,ajax主要就是用来和服务器交互的好不好?如果你觉得麻烦,可以直接访问我的服务器查看效果:VoidKing编程实例,接下来的例子也可以在这个网页找到。

当然,你也可以直接本地打开“显示欢迎信息.html”,但是提交数据没有反应,因为同源策略限制交互。怎么破?简单点,本地搭建一个php服务器!高大上点,自行百度,修改代码!

阅读全文 »

前言

任何基于GUI的现代应用程序都是基于事件驱动的,Web应用程序也不例外。

所有事件驱动的应用程序都采用相同的工作模式:建立事件机制、等待相关事件发生(比如鼠标单击)、对该事件做出相应。

浏览器事件模型

忆苦思甜,先了解一下传统的事件模型的缺点,我们才能明白改革开放是多么好的政策!

DOM第0级事件模型

也许你听说过网景事件模型、基本事件模型、浏览器事件模型,但是大多数人称其为DOM第0级事件模型。

为什么称其为第0级事件模型呢?因为,虽然该模型并不是一个正式的标准,但是所有主流的浏览器都与之兼容。而且,所有的现代浏览器依然支持这种模型。

阅读全文 »

选择器语法

jQuery选择元素的语法为:$(selector,[content]);

如果第一个参数是选择器,那么第二个参数就是指示该操作的上下文,默认为整个DOM文档。上下文参数可以是DOM元素的引用,也可以包含jQuery选择器的字符串,或者是DOM元素包装集。

上文hello voidking中的html文件内容修改为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
$("p","div#voidking").css("color","red");
});
</script>
</head>
<body>
<div id="voidking">
<p>
welcome to jQuery world !
</p>
</div>
<p>
welcome to jQuery world !
</p>
</body>
</html>
阅读全文 »