此项目的关键点在于使用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、导致用户操作被中断，导致交互性差，用户体验差）
异步请求方式：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.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
,new
Date());
,new
Date());
StringJSON1=JSON.toJSONString(user1);
String JSON2=JSON.toJSONStringWithDateFormat(user1,
);
List<user> users=
new ArrayList<user>();
users.add(user1);
users.add(user2);
String
JSON3=JSON.toJSONStringWithDateFormat(users,
);
);
Ajax_day1
总结
什么是同步请求，异步请求
同步请求的缺点：同步请求刷新整张页面，极大浪费网络资源，导致用户的操作终端，极差的用户体验
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+")");
项目实战思路
实现思路：
实现步骤(指导同上)我已经可以无压力实现了，就是某些东西记不得
现标记如下
jsp页面里
用js记得引用
Js书写，刚开始现全局触发$(function(){})；然后创建xhr对象是分两种情况
相关文章
精彩导读
热门资讯
关注我们
