此项目的关键点在于使用ajax实现请求服务器信息
具体代码如下
<script type="text/JavaScript">
var num=2;
window.onload = function(){
//当进入窗口是自动执行此方法
sayHi();// 执行 sayHi()方法,先加载第一次
}
function focusbody(){// 又定义一个 focusbody()方法,
setInterval('sayHi();', 1000);// 执行自动无线循环方法 1000为1秒
}
function sayHi(){
//3. 创建一个XMLHttpRequest对象
var request = new XMLHttpRequest();
//4.准备发送请求数据:url
var url= "showMsg1.jsp";// 这点是我自己想到的,中间建立一个媒介 showMsg1.jsp,让showMsg1.jsp的内容是从网页上 Java Bean 里的Linkedlist打印的聊天消息
showMsg1.jsp的内容
<%@ page language="Java" import="java.util.*" contentType="text/html" pageEncoding="GBK"%>
<jsp:useBean id="msgs" class="java.util.LinkedList" scope="application" /> -->
<%
java.util.Iterator ite= msgs.iterator();
while(ite.hasNext()){
out.println(ite.next());
}
%>
var method="GET";// 设置请求方法为get
//5.调用XMLHttpRequest 对象的open方法
request.open(method,url);// 如上
//6. 调用XMLHttpRequest 对象的send方法
request.send(null);//参数为0
//7.为XMLHttpRequest 对象添加 onreadystatechange 响应函数
request.onreadystatechange = function(){//XMLHttpRequest对象的onreadystatechange事件,如下,一旦改变执行方法
onreadystatechange | 存储函数(或函数名),每当 readyState属性改变时,就会调用该函数。 |
//8. 判断响应是否完成: XMLHttpRequest 对象的readyState 属性值为4的时候
if(request.readyState == 4){//XMLHttpRequest对象的readyState属性等于4时是响应已经完成
//9.再判断响应是否可用 XMLHttpRequest 对象的status属性为200时
if(request.status == 200 || request.status== 304){
//XMLHttpRequest对象的status属性等于200或304时是响应已经完成
//10.打印响应结果 responseText
document.getElementById("divbox").innerHTML =request.responseText+num;
//XMLHttpRequest对象responseText属性即接收到的值,输出在 ID为divbox的 div中
}
}}
num++;//参数而已
}
Ajax 不是一中新的语言,是异步的javascript 和Xml ,是指一种对网页
的某部分的刷新
什么是同步请求,什么是异步请求
同步请求(特点,请求之后,刷新了整个页面,弊端 1、刷新整个页面,极大的浪费了资源。 2、导致用户操作被中断,导致交互性差,用户体验差)
- 向服务器请求一个html页面 2、 form 表单 3、地址栏,超链接
异步请求方式:ajax(局部更新页面的技术)
特点:多个事件并行发生,事件互不影响,请求之后,不刷新整张页面,页面不动,只刷新页面的局部
核心对象: XMLHttpRequest 是一个 javascript 对象,但是存在浏览器差异,简称xhr
所以,在进行编程时,需要消除浏览器差异
同步请求过程
- 发送请求,传递参数
- 处理响应,发送返回
异步请求过程
-
创建XMLHttpRequest (xhr)
Webkit核和IE 核
Window.XMLHttpRequest *****>返回值true 是 webkit核
False 是(IE内核)
If(window.XMLHttpRequest){
// webkit 核
Xhr = new XMLHttpRequest();
}else{
// IE 核
Xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
2 发送请求传递参数
Xhr.open("method"(get||post),"url");
Xhr.send();发送请求
Get 传参数是在地址栏传递,
-
处理响应,接受响应信息
// xhr.readyState 是一个属性,属性不停变化
属性值有
- :xhr没有初始化
- : xhr 已经初始化
- :请求发送调用了send方法
- :代表请求开始,返回响应()但是不完整
- :响应完成,是一个完整的响应
Xhr.onreadystatechange= function(){//监听变化,当变化时执行方法
// 404 505 等等
完整响应处理一个正确且完整和的响应 xhr.status
If(xhr.readyState==4&& xhr.status==200){
//后台一定不能有跳转页面,只认字符串
//处理响应
xhr.responseText; //接受响应结果
}
}
如何通过XMLHttpRequest请求对象或集合,然后传给前台页面,不刷新
如果是同步请求,请求一个新页面,然后放在session域中,再在当前页面中取出就好,但是ajax请求的页面不能这样做
一个思路,把集合打成特殊的字符串,传递给前台,然后还原集合,便利取对象
请求到的对象是java对象
需要接受后利用的是转成 jQuery对象就是 var student={属性,方法,方法套属性};
例如 var student = {"id":21,"name":"张三","age":18};
如何拿到属性,对象名.属性名
但是如何创建集合呢?
Var students = [{"id":21,"name":"张三","age":18},{"id":22,"name":"李四","age":28}];
如何遍历
for(var i =0;i<students.length;i++){
alert(student[i].id);
alert(student[i].name);
alert(student[i].age);
}
javascript只认jquery对象,
java第三方API提供的有方法,可以把对象编程jquery对象形式的字符串
续看提示第四个 30.58
Fastjson 阿里巴巴的API
38.58
user user1=new user(1,"张三",new Date());
user user2=new user(2,"李四",new Date());
String JSON1=JSON.toJSONString(user1);
System.out.println(JSON1);
String JSON2=JSON.toJSONStringWithDateFormat(user1,"yyyy年MM月dd日");
System.out.println(JSON2);
List<user> users=new ArrayList<user>();
users.add(user1);
users.add(user2);
StringJSON3=JSON.toJSONStringWithDateFormat(users,"yyyy年MM月dd日");
System.out.println(JSON3);
{"dir":1479381680709,"id":1,"name":"张三"}
{"dir":"2016年11月17日","id":1,"name":"张三"}
[{"dir":"2016年11月17日","id":1,"name":"张三"},{"dir":"2016年11月17日","id":2,"name":"李四"}]
Ajax_day1总结
- 什么是ajax , 异步的javascript 和 xml
-
什么是同步请求,异步请求
同步请求的缺点:同步请求刷新整张页面,极大浪费网络资源,导致用户的操作终端,极差的用户体验
Ajax异步请求好处:不会刷新整张页面,刷新页面的局部
-
重点(ajax 的GET 、 POST 的方式编程)
Get url?传递参数
Post
Xhr.setRequestHeader("contend-type","application/x-ww-form-urlencoded");
Xhr.send("参数")
-
ajax 对象的类型数据传递机制
uesr -----Json 字符串
String json = JSON.toJsonStringWithFormat(对象);
//设置相应类型
Response.setContentType("application/json;charset=utf-8");
//前台
Var js对象|数组 =eval("("+xhr.responseText+")");
项目实战思路
实现思路:
- 设置button按钮,通过javascript触发建立ajax对象
- Xhr发送请求,接受请求。接收action响应
- 对于action响应,将对象添加至list,list用alibaba API fastJson转成jquery字符串。
- 接收action 的 jquery字符串,转成jquery对象
- 遍历,操作,打印,或者显示在div
实现步骤(指导同上)我已经可以无压力实现了,就是某些东西记不得
现标记如下
jsp页面里
用js记得引用
<scripttype="text/javascript"src="js/jquery-1.7.2.js"></script>
Js书写,刚开始现全局触发$(function(){});然后创建xhr对象是分两种情况
拼写记不住,分别是 XMMHttpRequest 和ActiveX Object("Microsoft.XMLHTTP)
- open 时的url拼写可以用 jsp表达式,也可以用js代码获取,
- 如果用post方式必须写头部文件 xhr.setRequestHeader("contend-type",这个是form表单的enctype属性)
-
然后发送请求,处理响应时先触发一个事件 xhr.onreadystatechange=function(){};
然后还要判断 status(状态就是页面的请求状态400 404 500 什么的)正确是200,成功的状态, readyState(准备状态,是xhr的自己属性,分1 2 3 4 分别代表这个对象的请求状态)正确属性是4
- 还原 jquery 对象是用的是jquery =eval("("+jsonString+")");方法,记得加(),
- 对于在div 或者其他 html元素中用js填写内容,要注意,js控制的始终是最内层的元素如一个div中有一个 table ,不能往 div中通过js 写table元素,
- 而且对于字符串拼接,里面不能出现类似于这种情况 var aa="a="a""这种,要么转义,要么不加""
javaAction页面里
- 方法返回是null
-
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("application/json;charset=utf-8");
PrintWriter writer = response.getWriter();
不熟练
Struts.xlm页面里
1、 <packagename="user"extends="struts-default"namespace="/user">包名是/user是链接地址
2、<actionname="jqueryAction"class="zwl.jquery.jqueryAction"method="queryAll"/>
Name 是链接中的方法,对应的是method中的方法
重写struts后要重启tomcat
ajax2am1.lxe
两个好用的快捷键
Ctrl+shift+L 快捷键功能提示
Alt+shift+LEclipse自动生成返回值对象的快捷键
其他转json API Gson 和 Jackson
对象转json 的回环现象
双向关联
User里面有oder,oder里有user,
例如 toString 时, user的toString里有order的,会跳转到order中,order又有user,又会回来,无限循环,栈溢出
Fastjson 自动规避回环现象
Jquery框架对ajax的封装
$.ajax({
Type:"GET|POST",
data:"username=zhangsan&password=123"或者{"username":"zhangsan","password":"123"}, (对象的形式)
success:function(data){
// data相当于 xhr.responseText
}
});
用jquery框架可以这样简写
<scripttype="text/javascript">
$(function() {
//给用户名文本绑定失去焦点事件
$("#btn").click(function() {
//获取用户输入的用户名
varusername=$("#username").val();
varpassword=$("#password").val();
//使用jquery框架的ajax方法
$.ajax({
//设置请求类型 xhr.open(method,url)
type:"GET",
//设置请求地址 xhr.open(method,url)
url:"${pageContext.request.contextPath}/user/checkUserName",
//设置请求参数可以是是对象,也可以是字符串拼接的形式
//data:"username="+username,
// data:{"username":username},
data:{username:username,password:password},
//以上三种都可以
/* success就相当于成功返回的方法自动写了onreadystatechange=function()和
if(xhr.readyState==4 && xhr.status==200){
res是形参,可以是任何名字相当于 xhr.responseText
*/ success:function(res){
alert(res);
//$("#usernameMessage").html(res);
}
});
});
});
</script>
单独的get请求
$("#btn").click(function() {
$.get("<%=basePath%>user/jqueryAction",function(data){
for(vari=0;i<data.length;i++){
alert(data[i].id+" "+data[i].name+" "+data[i].dir);
}
},"JSON");
});
});