Ajax技术实战操练课堂学习笔记
来源：互联网 发布：山师教务处网络教育 编辑：程序博客网 时间：2024/06/16 10:00
ajax是什么？
- ajax(asynchronousejavascriptandxml) 异步的javascript和xml
- 是7种技术的综合,它包含了七个技术( javascriptxmlxstlxhtmldomxmlhttprequest , css), ajax是一个粘合剂,
- ajax是一个与服务端语言无关的技术. 即可以使用在(php/javaee/.net网站/ asp)
- ajax可以给客户端返回三种格式数据(文本格式，xml , json格式)
- 无刷新数据交换技术有以下: flash, javaapplet, 框架, iframe, ajax)
- ajax的运行原理分析
看一个需求:
- ajax在什么地方用的多
1 动态加载数据，按需取得数据。【树形菜单、联动菜单.../省市联动】
2 改善用户体验。【输入内容前提示、带进度条文件上传...】
3 电子商务应用。 【购物车、邮件订阅...】
4 访问第三方服务。 【访问搜索服务、rss阅读器】
5. 数据的布局刷新
- 经典的案例
使用ajax与服务器通信的的步骤
- 创建一个XMLHttpRequest对象
- 创建url, data,通过xmlHttpRequest.send()
- 服务器端接收ajax的请求,做相应处理(操作数据库)，然后返回结果(echo语句)
- 客户端通过xmlHttpRequest的属性reponseText , responseXML取的数据，然后就完成局部刷新当前页面任务
使用ajax完成用户名的验证(get方式提交数据)
register.php
<html>
<head>
<title>用户注册</title>
<metahttp-equiv="content-type" content="text/html;charset=utf-8"/>
<scripttype="text/javascript">
//创建ajax引擎
functiongetXmlHttpObject(){
varxmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest对象方法不一样
if(window.ActiveXObject){
xmlHttpRequest=newActiveXObject("Microsoft.XMLHTTP");
}else{
xmlHttpRequest=newXMLHttpRequest();
}
returnxmlHttpRequest;
}
varmyXmlHttpRequest="";
//验证用户名是否存在
functioncheckName(){
myXmlHttpRequest=getXmlHttpObject();
//怎么判断创建ok
if(myXmlHttpRequest){
//通过myXmlHttpRequest对象发送请求到服务器的某个页面
//第一个参数表示请求的方式, "get" / "post"
//第二个参数指定url,对哪个页面发出ajax请求(本质仍然是http请求)
//第三个参数表示true表示使用异步机制,如果false表示不使用异步
varurl="/ajax/registerProcess.php?mytime="+newDate()+"&username="+$("username").value;
//打开请求.
myXmlHttpRequest.open("get",url,true);
//指定回调函数.chuli是函数名
myXmlHttpRequest.onreadystatechange=chuli;
//真的发送请求,如果是get请求则填入null即可
//如果是post请求，则填入实际的数据
myXmlHttpRequest.send(null);
}
}
//回调函数
functionchuli(){
//window.alert("处理函数被调回"+myXmlHttpRequest.readyState);
//我要取出从registerPro.php页面返回的数据
if(myXmlHttpRequest.readyState==4){
//取出值,根据返回信息的格式定.text
//window.alert("服务器返回"+myXmlHttpRequest.responseText);
$('myres').value=myXmlHttpRequest.responseText;
}
}
//这里我们写一个函数
function $(id){
returndocument.getElementById(id);
}
</script>
</head>
<body>
<formaction="???" method="post">
用户名字:<inputtype="text" onkeyup="checkName();" name="username1" id="username"><inputtype="button" onclick="checkName();" value="验证用户名">
<inputstyle="border-width: 0;color: red" type="text" id="myres">
<br/>
用户密码:<inputtype="password" name="password"><br>
电子邮件:<inputtype="text" name="email"><br/>
<inputtype="submit" value="用户注册">
</form>
<formaction="???" method="post">
用户名字:<inputtype="text" name="username2" >
<br/>
用户密码:<inputtype="password" name="password"><br>
电子邮件:<inputtype="text" name="email"><br/>
<inputtype="submit" value="用户注册">
</form>
</body>
</html>
registerpro.php
<?php
//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
header("Content-Type: text/xml;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control: no-cache");
//接收数据
$username=$_GET['username'];
if($username=="shunping"){
echo "用户名不可以用";//注意，这里数据是返回给请求的页面.
}else{
echo "用户名可以用";
}
?>
【相关代码】
【Login.jsp】
<%@ pagelanguage="java" import="java.util.*" pageEncoding="utf-8"%>
<%
Stringpath = request.getContextPath();
StringbasePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPEHTMLPUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN">
<html>
<head>
<basehref="<%=basePath%>">
<title>注册页面</title>
<metahttp-equiv="pragma" content="no-cache">
<metahttp-equiv="cache-control" content="no-cache">
<metahttp-equiv="expires" content="0">
<metahttp-equiv="keywords" content="keyword1,keyword2,keyword3">
<metahttp-equiv="description" content="Thisismypage">
<!--
<linkrel="stylesheet" type="text/css" href="styles.css">
-->
<scripttype="text/javascript" src="myscripts.js" charset="UTF-8"></script>
<scripttype="text/javascript" src="js/ajax.js" charset="UTF-8"></script>
</head>
<body>
<center>
<formaction="" method="post">
用户名：<inputtype="text" name="username1" id="username" onkeyup="checkName()"/><input
type="button" value="验证用户名" onclick="checkName()" /> <input
style="border-width: 0; color:red; font-size: 20px; font-weight: bold;" type=textid="myres" readonly="readonly"/><br />
用户密码：<inputtype="password" name="password" /><br /> 电子邮件： <input
type="text" name="email" /><br /> <inputtype="submit"
value="用户注册" />
</form>
<formaction="" method="post">
用户名：<inputtype="text" name="username1" id="username" /><input
type="button" value="验证用户名" /><br /> 用户密码：<inputtype="password"
name="password" /><br /> 电子邮件： <inputtype="text" name="email" /><br />
<inputtype="submit" value="用户注册" />
</form>
</center>
</body>
</html>
【LoginchuLiServlet.java】
packagecom.web.view;
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
publicclassLoginChuLiServletextendsHttpServlet {
publicvoiddoGet(HttpServletRequestrequest, HttpServletResponseresponse)
throwsServletException, IOException {
response.setContentType("text/html; charset=utf-8");
response.setCharacterEncoding("utf-8");
PrintWriterout = response.getWriter();
//禁用缓存
response.setDateHeader("Expires", -1);
//接受数据
Stringuname = request.getParameter("username");
System.out.println("usernameis "+uname);
//out.write(uname);
//把数据返回出去
//response.sendRedirect("http://www.baidu.com");
//request.getRequestDispatcher("/WEB-INF/login.jsp").forward(request, response);
//*request.setAttribute("name", "color");
//利用该方法可以向浏览器返回数据
//out.print("123456789");
if ("admin".equals(uname))
{
out.println("用户名正确");
}
else
{
out.println("用户名不可用");
}
}
publicvoiddoPost(HttpServletRequestrequest, HttpServletResponseresponse)
throwsServletException, IOException {
this.doGet(request, response);
}
}
【Ajax.js】
//创建Ajax引擎
functiongetXmlHttpRequest() {
varxmlHttpRequest;
// 不同的浏览器获取XmlHttpRequest的方法是不一样的
if (window.ActiveXObject) {
xmlHttpRequest = newActiveXObject("Microsoft.XMLHTTP");
// window.alert("ie");
} else {
xmlHttpRequest = newXMLHttpRequest();
// window.alert("huohu");
}
returnxmlHttpRequest;
}
//全局变量
varmyXmlHttpRequest = "";
functioncheckName() {
myXmlHttpRequest = getXmlHttpRequest();
// 判断是否创建成功
if (myXmlHttpRequest != null) {
//window.alert("创建Ajax引擎成功！");
// 通过myXmlHttpRequest对象发送请求到服务器的某一个页面
//方案一：通过增加一个时间变量让浏览器可以刷新
varurl = "/AjaxProject/LoginChuLiServlet?time="+newDate()+"&username="
+ $("username").value;
//方案二：通过设置浏览器禁用缓存来刷新页面
url = "/AjaxProject/LoginChuLiServlet?username="
+ $("username").value;
//window.alert(url);
// true表示使用异步机制（打开请求）
//1.get/post 2.对那个页面使用Ajax 3.是否使用异步机制
myXmlHttpRequest.open("get", url, true);
// 指定回调函数, chuli是函数名称
myXmlHttpRequest.onreadystatechange = chuli;
//真的发送请求, get请求填入null即可；post请求要填入实际的数据
myXmlHttpRequest.send(null);
} else {
window.alert("创建Ajax引擎失败！");
}
}
//回调函数
functionchuli(){
//window.alert("处理函数被调回"+myXmlHttpRequest.readyState);
//取出从LoginChuLi返回的数值
if (myXmlHttpRequest.readyState == 4){
//4表示已完成的状态
//根据返回信息的格式取出值
//window.alert("服务器返回了数据"+myXmlHttpRequest.responseText);
$("myres").value = myXmlHttpRequest.responseText;
}
}
function $(id) {
returndocument.getElementById(id);
}
ajax的post方式请求
【关键代码：Ajax.js】
functioncheckName() {
myXmlHttpRequest = getXmlHttpRequest();
// 判断是否创建成功
if (myXmlHttpRequest != null) {
// window.alert("创建Ajax引擎成功！");
// 通过myXmlHttpRequest对象发送请求到服务器的某一个页面
// 方案一：通过增加一个时间变量让浏览器可以刷新
varurl = "/AjaxProject/LoginChuLiServlet?time=" + newDate()
+ "&username=" + $("username").value;
// 方案二：通过设置浏览器禁用缓存来刷新页面
url = "/AjaxProject/LoginChuLiServlet?username=" + $("username").value;
// 使用post方式来提交数据
varurl2 = "/AjaxProject/LoginChuLiServlet";
vardata = "username="+$("username").value;
// window.alert(url);
// true表示使用异步机制（打开请求）
// 1.get/post 2.对那个页面使用Ajax 3.是否使用异步机制
//myXmlHttpRequest.open("get", url, true);
//post提交
myXmlHttpRequest.open("post", url2, true);
//这行代码不能少 myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 指定回调函数, chuli是函数名称
myXmlHttpRequest.onreadystatechange = chuli;
// 真的发送请求, get请求填入null即可；post请求要填入实际的数据
//myXmlHttpRequest.send(null);
myXmlHttpRequest.send(data);
} else {
window.alert("创建Ajax引擎失败！");
}
}
在前面案例我们修改一下：
关键代码
register.php
varurl="/ajax/registerProcess.php";
//这个是要发送的数据
vardata="username="+$('username').value;
//打开请求.
myXmlHttpRequest.open("post",url,true);
//还有一句话，这句话必须.
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//指定回调函数.chuli是函数名
myXmlHttpRequest.onreadystatechange=chuli;
//真的发送请求,如果是get请求则填入null即可
//如果是post请求，则填入实际的数据
myXmlHttpRequest.send(data);
registerPro.php关键码：
$username=$_POST['username'];
☞使用get方式发出请求，如果提交的用户名不变化，浏览器将不会真的发请求，而是缓存取数据., url
解决方法
- url后带一个总是变化的参数,比如当前时间
varurl="/ajax/registerProcess.php?mytime="+newDate()+"&username="+$("username").value;
- 在服务器回送结果时，禁用缓存.
//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
header("Content-Type: text/xml;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control: no-cache");
- 有些网站要求及时性很高，因此要求我们不缓存页面
代码：(以下代码适用于股票、基金等即时性网站，取消浏览器缓存)
//指定该页面不缓存Ie
response.setDateHeader("Expires", -1);【针对IE浏览器设置不缓存】
//为了保证兼容性.
response.setHeader("Cache-Control", "no-cache");【针对火狐浏览器等】
response.setHeader("Pragma", "no-cache");【其他浏览器】
- 有些网站要求网页缓存一定时间,比如缓存一个小时（1h=3600s; 1s=1000ms; 1d=24h;）
response.setDateHeader("Expires", System.currentTimeMillis()+3600*1000);后面一个参数表示设置的缓存保持时间，-1表示永远缓存
//方案一：通过增加一个时间变量让浏览器可以刷新
varurl = "/AjaxProject/LoginChuLiServlet?time="+newDate()+"&username="
+ $("username").value;
//方案二：通过设置浏览器禁用缓存来刷新页面
url = "/AjaxProject/LoginChuLiServlet?username="
+ $("username").value;
//实现对用户名的即时验证：
用户名：<inputtype="text" name="username1" id="username" onkeyup="checkName()"/><input
type="button" value="验证用户名" onclick="checkName()" />
ajax如何处理返回的数据格式是xml的情况
register.php
<html>
<head>
<title>用户注册</title>
<metahttp-equiv="content-type" content="text/html;charset=utf-8"/>
<scripttype="text/javascript">
//创建ajax引擎
functiongetXmlHttpObject(){
varxmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest对象方法不一样
if(window.ActiveXObject){
xmlHttpRequest=newActiveXObject("Microsoft.XMLHTTP");
}else{
xmlHttpRequest=newXMLHttpRequest();
}
returnxmlHttpRequest;
}
varmyXmlHttpRequest="";
//验证用户名是否存在
functioncheckName(){
myXmlHttpRequest=getXmlHttpObject();
//怎么判断创建ok
if(myXmlHttpRequest){
//通过myXmlHttpRequest对象发送请求到服务器的某个页面
//第一个参数表示请求的方式, "get" / "post"
//第二个参数指定url,对哪个页面发出ajax请求(本质仍然是http请求)
//第三个参数表示true表示使用异步机制,如果false表示不使用异步
varurl="/ajax/registerProcess.php";
//这个是要发送的数据
vardata="username="+$('username').value;
//打开请求.
myXmlHttpRequest.open("post",url,true);
//还有一句话，这句话必须.
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//指定回调函数.chuli是函数名
myXmlHttpRequest.onreadystatechange=chuli;
//真的发送请求,如果是get请求则填入null即可
//如果是post请求，则填入实际的数据
myXmlHttpRequest.send(data);
}
}
//回调函数
functionchuli(){
//window.alert("处理函数被调回"+myXmlHttpRequest.readyState);
//我要取出从registerPro.php页面返回的数据
if(myXmlHttpRequest.readyState==4){
//取出值,根据返回信息的格式定.text
//window.alert("服务器返回"+myXmlHttpRequest.responseText);
//$('myres').value=myXmlHttpRequest.responseText;
//看看如果取出xml格式数据
//window.alert(myXmlHttpRequest.responseXML);
//获取mes节点
varmes=myXmlHttpRequest.responseXML.getElementsByTagName("mes");
//取出mes节点值
//window.alert(mes.length);
//mes[0]->表示取出第一个mes节点
//mes[0].childNodes[0]->表示第一个mes节点的第一个子节点
varmes_val=mes[0].childNodes[0].nodeValue;
$('myres').value=mes_val;
}
}
//这里我们写一个函数
function $(id){
returndocument.getElementById(id);
}
</script>
</head>
<body>
<formaction="???" method="post">
用户名字:<inputtype="text" name="username1" id="username"><inputtype="button" onclick="checkName();" value="验证用户名">
<inputstyle="border-width: 0;color: red" type="text" id="myres">
<br/>
用户密码:<inputtype="password" name="password"><br>
电子邮件:<inputtype="text" name="email"><br/>
<inputtype="submit" value="用户注册">
</form>
<formaction="???" method="post">
用户名字:<inputtype="text" name="username2" >
<br/>
用户密码:<inputtype="password" name="password"><br>
电子邮件:<inputtype="text" name="email"><br/>
<inputtype="submit" value="用户注册">
</form>
</body>
</html>
regisgerProcess.php
<?php
//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
header("Content-Type: text/xml;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control: no-cache");
//接收数据(这里要和请求方式对于 _POST还是 _GET)
$username=$_POST['username'];
//这里我们看看如何处理格式是xml
$info="";
if($username=="shunping"){
$info.="<res><mes>用户名不可以用,对不起</mes></res>";//注意，这里数据是返回给请求的页面.
}else{
$info.="<res><mes>用户名可以用,恭喜</mes></res>";
}
echo $info;
?>
// window.alert("处理函数被调回"+myXmlHttpRequest.readyState);
// 取出从LoginChuLi返回的数值
if (myXmlHttpRequest.readyState == 4) {
// 4表示已完成的状态
// 根据返回信息的格式取出值
// window.alert("服务器返回了数据"+myXmlHttpRequest.responseText);
// $("myres").value = myXmlHttpRequest.responseText;
// 开始取出XML格式数据, myXmlHttpRequest.responseXML取出的是一个dom对象
// 这里涉及XMLDom和HtmlDom编程
// $("myres").value = myXmlHttpRequest.responseXML;
//window.alert("testing ");
//利用JavaScriptdom编程可解决
// 获取mes节点, 注意getElementsByTagName不要写错了
varmes = myXmlHttpRequest.responseXML.getElementsByTagName("mes");
if (mes != null) {
}
//获取节点下面的数值
//mes[0]表示取出第一个mes节点
//mes[0].childNodes[0]表示取出第一个mes节点下面的第一个子节点
varmes_val = mes[0].childNodes[0].nodeValue;
//window.alert(mes_val);
$("myres").value = mes_val;
}
// 1.开始处理返回内容是xml的格式；text/xml
response.setContentType("text/xml; charset=utf-8");
if ("admin".equals(uname)) {
// out.println("用户名正确");
out.println("<res><mes>用户名已注册，换个用户名吧</mes></res>");
} else {
out.println("<res><mes>共黑你，用户名可以用！</mes></res>");
}
ajax如何处理json数据格式
json的格式如下：
"{属性名:属性值,属性名:属性值,.... }"
因为json数据是原生态数据，因此这种数据格式很稳定，而且描述能力强,我们建议大家使用json格式
<scripttype="text/javascript">
vardog = {"name":"dog", "color":"red"};
//window.alert(typeofdog);
window.alert(dog.name);
window.alert(dog.color);
</script>
//2.处理Json数据格式，也要设置成为文本格式
response.setContentType("text/html; charset=utf-8");
if ("admin".equals(uname)) {
// out.println("用户名正确");
//out.println("<res><mes>用户名已注册，换个用户名吧</mes></res>");
//返回json格式代码数据, value是一个json数据格式的子串
Stringvalue = "{\"res\":\"该用户不可以使用！！！\"}";
Stringaaa = "{'res':'该用户不可以使用才怪呢！！！', 'id':'001'}";
out.println(aaa);
} else {
//out.println("<res><mes>共黑你，用户名可以用！</mes></res>");
//Stringvalue = "{\"res\":\"该用户可以使用！！！\"}";
Stringvalue = "{'res':'该用户是可以使用滴！', 'id':'002'}";
out.println(value);
}
if (myXmlHttpRequest.readyState == 4) {
//开始获取json格式的子串
varmes_val = myXmlHttpRequest.responseText;
//window.alert(typeofmes_val); //String格式
//使用eval函数讲mes_val转换成对应的对象
varmes_obj = eval("("+mes_val+")"); //object对象
//window.alert(typeofmes_obj);
$("myres").value = mes_obj.res+"错误码："+mes_obj.id;
}
json数据格式的扩展
如果服务器返回的json是多组数据，则格式应当如下:
$info="[{"属性名":"属性值",...},{"属性名":"属性值",...},....]";
在xmlhttprequest对象接收到json数据后，应当这样处理
//转成对象数组
varreses=eval("("+xmlHttpRequest.responseText+")");
//通过reses可以取得你希望的任何一个值
reses[?].属性名
if ("admin".equals(uname)) {
// out.println("用户名正确");
//out.println("<res><mes>用户名已注册，换个用户名吧</mes></res>");
//返回json格式代码数据, value是一个json数据格式的子串
Stringvalue = "{\"res\":\"该用户不可以使用！！！\"}";
Stringaaa = "[{'res':'该用户不可以使用才怪呢！！！', 'id':'001'}, {'res':'不可以使用才怪呢！！！', 'id':'004'}]";
out.println(aaa);
} else {
//out.println("<res><mes>共黑你，用户名可以用！</mes></res>");
//Stringvalue = "{\"res\":\"该用户可以使用！！！\"}";
Stringvalue = "[{'res':'该用户是可以使用滴！', 'id':'002'}, {'res':'不可以使用该用户！', 'id':'003'}]";
out.println(value);
}
//开始获取json格式的子串
varmes_val = myXmlHttpRequest.responseText;
//window.alert(typeofmes_val); //String格式
//使用eval函数讲mes_val转换成对应的对象
varmes_obj = eval("("+mes_val+")"); //object对象
//window.alert(typeofmes_obj);
$("myres").value = mes_obj[1].res+"错误码："+mes_obj[1].id;//遍历
<script type="text/javascript">
var dog = [{"name":"dog", "color":"red"}, {"name":"dog1", "color":"blue"}, {"name":"dog3", "color":"yellow"}];
//window.alert(typeof dog);
//window.alert(dog.name);
//window.alert(dog.color);
//window.alert(dog[0].name+" "+dog.length);
//window.alert(dog[1].color)
for (var i=0; i<dog.length; i++)
{
window.alert(dog[i].name+" "+dog[i].color);
}
</script>
更加复杂的json数据格式
<scriptlanguage="JavaScript">
varpeople ={
"programmers":
[
{"firstName": "Brett", "email": "brett@newInstance.com" },
{"firstName": "Jason", "email": "jason@servlets.com" }
],
"writer":
[
{"writer":"宋江","age":"50"},
{"writer":"吴用","age":"30"}
],
"sex":"男"
};
window.alert(people.programmers[0].firstName);
window.alert(people.programmers[1].email);
window.alert(people.writer[1].writer);
window.alert(people.sex);
</script>
小结:
当一个ajax请求到服务器，服务器可以根据需求返回三种格式的数据,那么我们应当选择哪一个?
- 如果你的项目经理没有特殊的要求，建议使用json
- 若应用程序不需要与其他应用程序共享数据的时候, 使用HTML片段来返回数据时最简单的
- 如果数据需要重用, JSON文件是个不错的选择, 其在性能和文件大小方面有优势
- 当远程应用程序未知时, XML文档是首选, 因为XML是web服务领域的 "世界语"(不知道请求是谁发出的就用xml)
ajax的省市联动案例(如何动态的从服务器取得数据)
showCities.php页面
<html>
<head>
<metahttp-equiv="content-type" content="text/html;charset=utf-8"/>
<scripttype="text/javascript">
//创建ajax引擎
functiongetXmlHttpObject(){
varxmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest对象方法不一样
if(window.ActiveXObject){
xmlHttpRequest=newActiveXObject("Microsoft.XMLHTTP");
}else{
xmlHttpRequest=newXMLHttpRequest();
}
returnxmlHttpRequest;
}
varmyXmlHttpRequest="";
functiongetCities(){
myXmlHttpRequest=getXmlHttpObject();
if(myXmlHttpRequest){
varurl="/ajax/showCitiesPro.php";//post
vardata="province="+$('sheng').value;
myXmlHttpRequest.open("post",url,true);//异步方式
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//指定回调函数
myXmlHttpRequest.onreadystatechange=chuli;
//发送
myXmlHttpRequest.send(data);
}
}
functionchuli(){
if(myXmlHttpRequest.readyState==4){
if(myXmlHttpRequest.status==200){
//取出服务器回送的数据
varcities=myXmlHttpRequest.responseXML.getElementsByTagName("city");
$('city').length=0;
varmyOption=document.createElement("option");
myOption.innerText="--城市--";
//添加到
$('city').appendChild(myOption);
//遍历并取出城市
for(vari=0;i<cities.length;i++){
varcity_name=cities[i].childNodes[0].nodeValue;
//创建新的元素option
varmyOption=document.createElement("option");
myOption.value=city_name;
myOption.innerText=city_name;
//添加到
$('city').appendChild(myOption);
}
}
}
}
//这里我们写一个函数
function $(id){
returndocument.getElementById(id);
}
</script>
</head>
<body>
<selectid="sheng" onchange="getCities();">
<optionvalue="">---省---</option>
<optionvalue="zhejiang">浙江</option>
<optionvalue="jiangsu" >江苏</option>
<optionvalue="sichuan" >四川</option>
</select>
<selectid="city">
<optionvalue="">--城市--</option>
</select>
<selectid="county">
<optionvalue="">--县城--</option>
</select>
</body>
</html>
**showCitiesProcess.php**
<?php
//服务器端
//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
header("Content-Type: text/xml;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control: no-cache");
//接收用户的选择的省的名字
$province=$_POST['province'];
file_put_contents("d:/mylog.log",$province."\r\n",FILE_APPEND);
//如何在调试过程中，看到接收到的数据。
//到数据库去查询省有那些城市(现在先不到数据库)
$info="";
if($province=="zhejiang"){
$info="<province><city>杭州</city><city>温州</city><city>宁波</city></province>";
}elseif($province=="jiangsu"){
$info="<province><city>南京</city><city>徐州</city><city>苏州</city></province>";
}
echo $info;
?>
【index.js】
//创建Ajax引擎
function getXmlHttpRequest() {
var xmlHttpRequest;
// 不同的浏览器获取XmlHttpRequest的方法是不一样的
if (window.ActiveXObject) {
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
// window.alert("ie");
} else {
xmlHttpRequest = new XMLHttpRequest();
// window.alert("huohu");
}
return xmlHttpRequest;
}
var myXmlHttpRequest = "";
// 省市联动案例js
function getCities() {
// window.alert("ok");
myXmlHttpRequest = getXmlHttpRequest();
if (myXmlHttpRequest != null) {
// 向服务器发送请求
var url = "/AjaxProject/CityChuLiServlet";
var data = "province=" + $("sheng");
// window.alert(""+data);
myXmlHttpRequest.open("post", url, true);
myXmlHttpRequest.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
// 指定回调函数
myXmlHttpRequest.onreadystatechange = chuli;
// 发送请求
myXmlHttpRequest.send(data);
}
}
JavaScript的XMLDom编程和HTMLDom编程
function chuli() {
// window.alert(myXmlHttpRequest.readyState+" "+myXmlHttpRequest.status);
// window.alert("chuli");
if (myXmlHttpRequest.readyState == 4 && myXmlHttpRequest.status == 200) {
// window.alert("ok");
// window.alert(myXmlHttpRequest.responseXML);
var cities = myXmlHttpRequest.responseXML.getElementsByTagName("city");
//window.alert(cities.length);
//该方法的主要目的是把每次选择以后，把city下拉框的长度清零，防止节点累加
document.getElementById("city").length = 0;
var myoption1 = document.createElement("option");
var str = "--城市--";
myoption1.innerText = str;
document.getElementById("city").appendChild(myoption1);
// 遍历取出数据
for (var i = 0; i < cities.length; i++) {
var city_name = cities[i].childNodes[0].nodeValue;
//window.alert(city_name);
//创建新的元素option
var myoption = document.createElement("option");
myoption.value = city_name;
myoption.innerText = city_name;
//添加属性到对应city的select选项中去
document.getElementById("city").appendChild(myoption);
}
}
}
function $(id) {
return document.getElementById(id).value;
}
【servlet.java】
package com.web.servlet;
import java.io.*;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CityChuLiServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/xml; charset=utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
// 这里是服务器端
String sheng = request.getParameter("province");
//数据库验证
String info = "";
if ("zhejiang".equals(sheng))
{
info = "<province><city>杭州</city> <city>义乌</city> <city>金华</city> </province>";
}
else if ("jiangsu".equals(sheng))
{
info = "<province><city>南京</city> <city>苏州</city> <city>镇江</city> </province>";
}
out.println(info);
this.writeLog(sheng);
System.out.println("" + sheng);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
// 写入日志
public void writeLog(String content) {
FileOutputStream fop = null;
File file;
try {
//D:\JAVACODE2017\AjaxProject\src\com\web\servlet
//file = new File("/src/com/web/servlet/log.txt");
String path = "D://JAVACODE2017//AjaxProject//src//com//web//servlet/log.txt";
file = new File(path);
fop = new FileOutputStream(file);
// if file doesnt exists, then create it
if (!file.exists()) {
file.createNewFile();
}
// get the content in bytes
byte[] contentInBytes = content.getBytes();
fop.write(contentInBytes);
fop.flush();
fop.close();
System.out.println("文件内容写入成功！");
} catch (IOException e) {
e.printStackTrace();
System.out.println("日志文件写入异常！");
} finally {
try {
if (fop != null) {
fop.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
黄金价格波动图
glodPrice.php界面
<html>
<head>
<metahttp-equiv="content-type" content="text/html;charset=utf-8"/>
<linkhref="Untitled-1.css" rel="stylesheet" type="text/css" />
<scriptsrc="my.js" type="text/javascript"></script>
<scripttype="text/javascript">
varmyXmlHttpRequest;
functionupdateGoldPrice(){
myXmlHttpRequest=getXmlHttpObject();
if(myXmlHttpRequest){
//创建ajax引擎成功
varurl="glodPriceProcess.php";
vardata="city[]=dj&city[]=tw&city[]=ld";
myXmlHttpRequest.open("post",url,true);
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
myXmlHttpRequest.onreadystatechange=functionchuli(){
//接收数据json
if(myXmlHttpRequest.readyState==4){
if(myXmlHttpRequest.status==200){
//取出并转成对象数组
varres_objects=eval("("+myXmlHttpRequest.responseText+")");
$('dj').innerText=res_objects[0].price;
$('tw').innerText=res_objects[1].price;
$('ld').innerText=res_objects[2].price;
}
}
}
myXmlHttpRequest.send(data);
}
}
//使用定时器每隔5 秒
window.setInterval("updateGoldPrice()",5000);
</script>
</head>
<center>
<h1>每隔5秒中更新数据(以1000为基数计算涨跌)</h1>
<tableborder=0 class="abc">
<tr><tdcolspan="3"><imgsrc="gjhj_bj_tit.gif" /></td></tr>
<tr ><td>市场</td><td>最新价格$</td><td>涨跌</td></tr>
<tr><td>伦敦</td><tdid="ld">788.7</td><td><imgsrc="down.gif" />211.3</td></tr>
<tr><td>台湾</td><tdid="tw">854.0</td><td><imgsrc="down.gif" />146.0</td></tr>
<tr><td>东京</td><tdid="dj">1791.3</td><td><imgsrc="up.gif" />791.3</td></tr>
</table>
</center>
</html>
glodPriceProcess.php
<?php
//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
header("Content-Type: text/html;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control: no-cache");
//接收
$cities=$_POST['city'];
//随机的生成三个 500-2000间数
//$res='[{"price":"400"},{"price":"1000"},{"price":"1200"}]';
$res='[';
for($i=0;$i<count($cities);$i++){
if($i==count($cities)-1){
$res.='{"cityname":"'.$cities[$i].'" ,"price":"'.rand(500,1500).'"}]';
}else{
$res.='{"cityname":"'.$cities[$i].'" ,"price":"'.rand(500,1500).'"},';
}
}
file_put_contents("d:/mylog.log",$res."\r\n",FILE_APPEND);
echo $res;
?>
晚上的练习
- 把省市联动和数据库
- 把黄金价格波动的上下箭头指示做出来
- 把用户管理系统(信息共享系统)，使用更加规范的mvc模式开发(引入smarty)
【goods.js】
var myXmlHttpRequest = "";
function updateGoldprice() {
myXmlHttpRequest = getXmlHttpRequest();
if (myXmlHttpRequest != null) {
// window.alert("ok");
// 向服务器发送请求
var url = "/AjaxProject/GoldChuLiServlet";
var deleteNum = [];// 定义要传递的数组
deleteNum.push("dj");
deleteNum.push("tw");
deleteNum.push("ld");// 向数组中添加元素
// 注意这里可以通过city[]简化传值步骤
// var data = "city[]=dj&city[]=tw&city[]=ld";
var data = "city=" + deleteNum;
// window.alert(data);
// window.alert(""+data);
myXmlHttpRequest.open("post", url, true);
myXmlHttpRequest.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
// 指定回调函数
myXmlHttpRequest.onreadystatechange = chuli;
// 发送请求
myXmlHttpRequest.send(data);
}
}
// 开始处理业务逻辑
function chuli() {
// 接收数据
if (myXmlHttpRequest.readyState == 4 && myXmlHttpRequest.status == 200) {
// 取出数据，进行处理
// window.alert("ok not null");
// window
// 转换成一个对象
var res_obj = eval("(" + myXmlHttpRequest.responseText + ")");
// 在这里同时计算一下股票的涨跌
// 获取原来的的数据
var djNow = $("dj").innerText;
var twNow = $("tw").innerText;
var ldNow = $("ld").innerText;
// 获取当前的数据
var djNew = res_obj[0].price;
var twNew = res_obj[1].price;
var ldNew = res_obj[2].price;
// window.alert(djNow + " " + djNew);
// window.alert(twNow + " " + twNew);
// window.alert(ldNow + " " + ldNew);
$("djzf").innerText = ((djNew - djNow) / djNew) * 100 + "%";
$("twzf").innerText = ((twNew - twNow) / twNew) * 100 + "%";
$("ldzf").innerText = ((ldNew - ldNow) / ldNew) * 100 + "%";
//$("img1").setAttribute("src","images/down.jpg");
//var img=document.getElementById("demo");
//var aa = $("img1");
window.alert(img.src);
/*
var tables = document.getElementsByTagName("table");
// var trs = tables[0].getElementsByTagName("tr");
var trs = tables[0].getElementsByTagName("tr");
var tds = trs[2].getElementsByTagName("td");
var img = tds[2].getElementsByTagName("img");
//window.alert(img.length);
//window.alert(img[0].getAttribute("src"));
for (var i = 0; i < tds.length; i++) {
//
//window.alert(tds[i].innerText);
window.alert(tds[i].getElementsByTagName("img").getAttribute("src"));
}
*/
//window.alert(trs2.length);
if (djNew > djNow) {
} else {
}
if (twNew > twNow) {
} else {
}
if (ldNew > ldNow) {
} else {
}
$("dj").innerText = res_obj[0].price;
$("tw").innerText = res_obj[1].price;
$("ld").innerText = res_obj[2].price;
// window.alert(value);
}
}
// 使用定时器， 5s一次
window.setInterval("updateGoldprice()", 5000);
【goodsprice.jsp】
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'goldprice.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" charset="utf-8" src="js/gold.js"></script>
<script type="text/javascript" charset="utf-8" src="js/ajaxutils.js"></script>
</head>
<body>
<center>
<h1>每隔5秒中更新数据(以1000为基数计算涨跌)</h1>
<table border=1 class="abc" bordercolor="red">
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td>市场</td>
<td>最新价格$</td>
<td>涨跌</td>
</tr>
<tr>
<td>伦敦</td>
<td id="ld">788.7</td>
<td id="ldzf"><img id="demo" src="images/down.jpg" />211.3</td>
</tr>
<tr>
<td>台湾</td>
<td id="tw">854.0</td>
<td id="twzf"><img id="img2" src="images/down.jpg" />146.0</td>
</tr>
<tr>
<td>东京</td>
<td id="dj">1791.3</td>
<td id="djzf"><img id="img3" src="images/up.jpg" />791.3</td>
</tr>
</table>
</center>
</body>
</html>
【AjaxUtils.js】
//创建Ajax引擎
function getXmlHttpRequest() {
var xmlHttpRequest;
// 不同的浏览器获取XmlHttpRequest的方法是不一样的
if (window.ActiveXObject) {
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
// window.alert("ie");
} else {
xmlHttpRequest = new XMLHttpRequest();
// window.alert("huohu");
}
return xmlHttpRequest;
}
function $(id) {
return document.getElementById(id);
}
如果我们的代码比较复杂，可以通过
file_put_contents来输出信息到某个日志文件.(!!!!!!!)(php中)
ajax实现聊天室的功能
需求如下:
分析实现的思路,如图所示:
- 创建数据库
createdatabasechat;
createtablemessages(
idintunsignedprimarykeyauto_increment,
sendervarchar(64) notnull,
gettervarchar(64) notnull,
contentvarchar(3600) notnull,
sendTimedatetime default now() notnull,
isGettinyintdefault 0)
- 界面
添加如下功能:
1. 增加用户表(通过id登录，并且对身份验证)
2. 防止同一个用户，多次登录.?->session和数据库
3. 公共聊天室.
4. 界面做成(框架->div+css)
5. 数据库的信息，怎么清理(后台管理),发布广告，用户的管理（后台管理程序）
【Login.jsp】
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/user.js" charset="utf-8"></script>
</head>
<body onload="chageWindowSize()">
<center>
<h2>欢迎登录飞Q聊天室</h2>
<form action="/AjaxQQ2018/LoginChuLiServlet" method="post">
用户名：<input type="text" name="username" /><br />
密码：<input type="password" name="password" /><br />
<input type="submit" value="开始登录"/>
<input type="reset" value="重新输入"/>
</form>
</center>
</body>
</html>
【FriendList.jsp】
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'friendlist.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/user.js"></script>
<script type="text/javascript" src="js/ajaxutils.js"></script>
</head>
<body onload="chageWindowSize()">
<h2>好友列表</h2>
<ul>
<li onmouseover="change1('over', this)" onclick="openChatRoom(this)"
onmouseout="change1('out', this)" id="zhangsan">张三</li>
<li onmouseover="change1('over', this)" onclick="openChatRoom(this)"
onmouseout="change1('out', this)" id="zhangsan">李四</li>
<li onmouseover="change1('over', this)" onclick="openChatRoom(this)"
onmouseout="change1('out', this)" id="zhangsan">王五</li>
<li onmouseover="change1('over', this)" onclick="openChatRoom(this)"
onmouseout="change1('out', this)" id="zhangsan">刘能</li>
<li onmouseover="change1('over', this)" onclick="openChatRoom(this)"
onmouseout="change1('out', this)" id="zhangsan">10010</li>
<li onmouseover="change1('over', this)" onclick="openChatRoom(this)"
onmouseout="change1('out', this)" id="zhangsan">10011</li>
<%
for (int i = 10000; i < 10100; i++) {
%>
<li onmouseover="change1('over', this)" onclick="openChatRoom(this)"
onmouseout="change1('out', this)" id="zhangsan"><%=i%></li>
<%
}
%>
</ul>
</body>
</html>
【chatroom.jsp】
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'chatroom.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/ajaxutils.js" charset="utf-8"></script>
<script type="text/javascript" src="js/user.js" charset="utf-8"></script>
</head>
<body>
<center>
<h2>
飞Q聊天室(用户<font color="blue" face="consolas"><span id="sender"><%=session.getAttribute("username")%></span></font>正在和好友<font
color=red face="华文新魏"><span id="getter"><%=request.getAttribute("name")%></span></font>聊天)
</h2>
<textarea rows="20" cols="40" id="cons" style="font-family: '华文新魏'; font-size: 20px;"></textarea>
<br> <input type="text" id="content" size=40 /><input
type="button" value="发送信息" onclick="sendMessage()" />
</center>
</body>
</html>
【LoginChuLiservlet.java】
package com.ajax.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
public class LoginChuLiServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html; charset=utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String username = request.getParameter("username");
String newName = new String(username.getBytes("iso-8859-1"), "utf-8");
String password = request.getParameter("password");
if ("123456".equals(password))
{
HttpSession session = request.getSession();
session.setAttribute("username", newName);
session.setMaxInactiveInterval(1000*60*5);
request.getRequestDispatcher("/WEB-INF/user/friendlist.jsp").forward(request, response);
}
else
{
request.getRequestDispatcher("/WEB-INF/user/login.jsp").forward(request, response);
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
【SendMessageServlet.java】
package com.ajax.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.ajax.service.MessageService;
public class SendMessageServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html; charset=utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
// 用于处理发送信息
// 1.接受信息
// [注意window.open()会以get方式提交数据， Ajax默认是以post方式提交数据]
String sender = (String) request.getSession().getAttribute("username");
String getter = request.getParameter("getter");
String newGetter = new String(getter.getBytes("iso-8859-1"), "utf-8");
String content = request.getParameter("con");
String newContent = new String(content.getBytes("iso-8859-1"), "utf-8");
System.out.println("sender: " + sender + " getter: " + newGetter
+ " content: " + newContent);
// 开始添加
MessageService mService = new MessageService();
if (mService.addMessage(sender, newGetter, newContent)) {
System.out.println("本条消息记录数据添加成功！！！");
// 以XML数据格式返回
// out.println("<mes><sender></getter></mes>");
out.println(newContent + " (本条消息记录数据发送成功！！！)");
}
// 去出去了就把数据库设置为已经取出
//mService.setGetZero(sender, getter);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
【GetMessageServlet.java】
package com.ajax.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.jms.Message;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.ajax.service.MessageService;
public class GetMessageServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/xml; charset=utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String sender = (String) request.getSession().getAttribute("username");
String getter = request.getParameter("sender");
// .getBytes("iso-8859-1"), "utf-8"
String newSender = "";
if (sender != null) {
newSender = new String(sender.getBytes("iso-8859-1"),
"utf-8");
}
System.out.println("接收数据人: 接受者" + getter + " 发送者： " + sender);
// 取出数据
MessageService mService = new MessageService();
String messageInfo = mService.getMessage(newSender, getter);
response.setDateHeader("Expires", -1);
// 把信息返回出去
out.println(messageInfo);
//信息如果发出去就置为0
//mService.setGetZero(newSender, getter);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
【GoChatRoomServlet.java】
package com.ajax.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class GoChatRoomServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String name = request.getParameter("name");
String newName = new String(name.getBytes("iso-8859-1"), "utf-8");
System.out.println(""+name+" "+"1"+newName+"1");
request.setAttribute("name", newName);
request.getRequestDispatcher("/WEB-INF/user/chatroom.jsp").forward(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
【ManageService.java】
package com.ajax.service;
import com.ajax.dao.SqlHelper;
import java.sql.*;
public class MessageService {
// 定义一个全局变量，用于及时返回用户聊天信息
private static String message = "";
public boolean addMessage(String sender, String getter, String content) {
boolean b = true;
System.out.println("insert.getParameter:" + sender + " " + getter + " "
+ content);
String sql = "insert into messages (sender, getter, content) values ('"
+ sender + "', '" + getter + "', '" + content + "')";
try {
SqlHelper.executeUpdate(sql, null);
} catch (Exception e) {
b = false;
// TODO: handle exception
e.printStackTrace();
}
return b;
}
// 取出数据, 把数据组织好返回给客户端
public String getMessage(String sender, String getter) {
// 进来的时候把信息清空
message = "";
System.out.println("SQL: sender" + sender + " getter: " + getter);
String sql = "select * from messages where (getter = '" + sender
+ "' and sender='" + getter + "') and isGet=0";
ResultSet rs = SqlHelper.executeQuery(sql, null);
System.out.println("select sql: " + sql);
// xml格式
// String messageInfo =
// "<mess><messid>1</messid><sender>001</sender><getter>002</getter><con>hello</con><time>20170201</time></mess>";
String messageInfo = "<mess>";
try {
while (rs.next()) {
System.out.println("rs.next info:");
String messid = rs.getObject(1).toString();
String con = rs.getObject(4).toString();
String time = rs.getObject(5).toString();
System.out.println(messid + " " + con + " " + time);
messageInfo += "<messid>" + messid + "</messid><sender>"
+ sender + "</sender><getter>" + getter
+ "</getter><con>" + con + "</con><time>" + time
+ "</time>";
}
messageInfo += "</mess>";
System.out.println("messageInfo: " + messageInfo);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally {
SqlHelper.close(rs, SqlHelper.getPs(), SqlHelper.getCt());
}
// 把信息返回出去
message = messageInfo;
//如果message中没有信息，说明isGet=1
//如果message中有信息，说明isGet=0
System.out.println("message is: "+message);
//<mess></mess>
if (message.equals("<mess></mess>") || message.equals("")){
//isGet=1
System.out.println("-----------------------------我没有拿到数据");
}
else{
//信息走到这里说明信息我已经拿到手了，（不用管其他的）
System.out.println("-----------------------------我已经查到数据");
//this.setGetZero(sender, getter);
// 取完之后设置为1
//[特别重要：注意这里的SQL更新语句的sender和getter是给接受者看的，与上面的SQL语句刚好相反]
sql = "update messages set isGet = 1 where sender = '" + getter
+ "' and getter='" + sender + "'"; //ok
//sql = "update messages set isGet = 1 where sender = '" + getter
//+ "' and getter='" + sender + "'"; //error
System.out.println("update sql: " + sql);
SqlHelper.executeUpdate(sql, null);
}
return messageInfo;（上面的修改操作并不会影响到这里已经拿到的messageInfo）
}
}
【user.js】
function change1(val, obj) {
if (val == 'over') {
obj.style.color = "red";
obj.style.cursor = "hand";
} else if (val == 'out') {
obj.style.color = "black";
}
}
function chageWindowSize() {
// window.alert("12");
window.resizeTo(400, 700);
window.moveTo(400, 190);
}
var getterName = "";
function openChatRoom(obj) {
// window.alert("open new window");
// 默认是get方式提交, encodeURI(obj.innerText)是使用URI编码
window.open("/AjaxQQ2018/GoChatRoomServlet?name="
+ encodeURI(obj.innerText) + "", "_blank");
getterName = obj.innerText;
// window.alert(getterName);
}
var mXmlHttpRequest = "";
// 接受信息者（只要这个函数上线了，就说明信息接收了）
function getMessage() {
mXmlHttpRequest = getXmlHttpRequest();
if (mXmlHttpRequest != null) {
var url = "/AjaxQQ2018/GetMessageServlet";
var data = "sender=" + $("getter").innerText;
// window.alert($("getter").innerText+" "+data);
mXmlHttpRequest.open("post", url, true);
mXmlHttpRequest.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
// 指定处理结果的函数
mXmlHttpRequest.onreadystatechange = function chuli() {
if (mXmlHttpRequest.readyState == 4
&& mXmlHttpRequest.status == 200) {
// 得到返回信息
var message = mXmlHttpRequest.responseXML;
// window.alert(message);
//<mess><messid>71</messid><sender>10011</sender><getter>10010</getter><con>nihoa</con><time>2017-07-31 10:00:24.0</time><messid>72</messid><sender>10011</sender><getter>10010</getter><con>12121212</con><time>2017-07-31 10:01:11.0</time><messid>73</messid><sender>10011</sender><getter>10010</getter><con>12121212</con><time>2017-07-31 10:01:23.0</time><messid>74</messid><sender>10011</sender><getter>10010</getter><con>haha</con><time>2017-07-31 10:04:15.0</time><messid>75</messid><sender>10011</sender><getter>10010</getter><con>121212</con><time>2017-07-31 10:05:06.0</time></mess>
var cons = message.getElementsByTagName("con");
var time = message.getElementsByTagName("time");
// window.alert(cons+" "+time);
//window.alert(cons.length+" "+time.length);
if (cons.length != 0) {
for (var i = 0; i < cons.length; i++) {
var getter = $("getter").innerText;
var sender =$("sender").innerText;
//window.alert(getter+" "+sender);
// window.alert("get: "+getter+" sen:"+sender);
// xx 对 yy 说
//注意在JavaScript中不能出现String, int 等数据类型，所有的数据都用var表示
//生成时间：new Date().toLocaleString()
$("cons").style.color = "blue";
var con = time[i].childNodes[0].nodeValue+" "+getter+" said to "+sender+" :"+ cons[i].childNodes[0].nodeValue;
//利用"\r\n接收一条数据就换行显示"
$("cons").value += con+"\r\n";
//window.alert(con);
//$("content").innerText = "";
}
}
}
};
// window.alert(data);
// window.alert(url);
mXmlHttpRequest.send(data);
}
}
// 开始不断读取数据
// 使用定时器， 5s一次
window.setInterval("getMessage()", 5000);
// 发送信息者
function sendMessage() {
// 发送信息
mXmlHttpRequest = getXmlHttpRequest();
if (mXmlHttpRequest != null) {
var url = "/AjaxQQ2018/SendMessageServlet";
var data = "con=" + $("content").value + "&getter="
+ $("getter").innerText;
// window.alert(url+" "+data);
mXmlHttpRequest.open("post", url, true);
mXmlHttpRequest.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
// 指定回调函数
mXmlHttpRequest.onreadystatechange = function chuli() {
if (mXmlHttpRequest.readyState == 4
&& mXmlHttpRequest.status == 200) {
// 得到返回信息
var con = mXmlHttpRequest.responseText;
//window.alert(con);
$("cons").style.color="red";
$("cons").value = new Date().toLocaleString()+" You have said to "+$("getter").innerText+" :"+con;
$("content").innerText = "";
}
};
// 正式发送请求
mXmlHttpRequest.send(data);
}
}
- Ajax技术实战操练课堂学习笔记
- AJAX技术学习笔记
- DNS与BIND学习笔记 5 （实例操练）
- java学习 课堂笔记
- java学习课堂笔记
- C++课堂学习笔记
- JQuery课堂学习笔记
- Git(二)-Git实战操练
- 操练
- 操练
- AJAX简易实战笔记
- 嵌入式课堂--学习笔记一
- java学习课堂笔记1
- java学习课堂笔记2
- java学习课堂笔记3
- java学习课堂笔记4
- java学习课堂笔记5
- java学习，课堂笔记--4.30
- 写了 15 年代码，总结出提升 10 倍效率的三件事
- 笑话：程序员是如何得到永生的
- 对5种主流编程语言的吐槽
- Java 常用服务的安装与部署
- unique-binary-search-trees Java code
- Ajax技术实战操练课堂学习笔记
- 模式识别-高维空间降维的重要性
- 程序员的九大不幸
- 程序员写在猝死的前一天
- 【知识发现】天池平台新浪微博互动预测-ItemCF推荐方法
- 每天一道LeetCode-----找到第k个排列
- 将java工程打包成jar包
- idea .java文件右下角有个红色j的解决方法
- SAP 项目实施流程
