本文详细介绍了AJAX的工作原理，包括同步与异步请求的区别，以及如何使用AJAX实现网页局部刷新。并通过实例展示了如何创建AJAX请求，处理服务器响应，并解析JSON数据。
此项目的关键点在于使用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");
});
});
Eclipse快捷键
ctrl+shift+r：打开资源就是打开用到的资源，是全部的
ctrl+shift+T：打开已经打开项目的资源
ctrl+o：快速outline，快速查看类的结构，有什么方法，有什么属性
ctrl+e，如果打开的文件太多，都占满了，使用这个快捷键快去切换
ctrl+L，快速去第几行
alt+shift+r，这不是一个重命名，会一下重命名所有的关于这个变量的
ctrl+1，快速修正
ctrl+m，大屏幕
也有单独的 getJson请求，25:36
省市县三级联动竟然用了 SSM框架
**************************************************************************
1、 ajax 是什么？（异步的 javascript 和 XMl |json）
Xml 解析方式（dom sax），xml是可扩展标记语言传输数据
2、什么是同步请求，异步请求？
同步：提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事
异步:请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕
同步——使用者通过单个线程调用服务；该线程发送请求，在服务运行时阻塞，并且等待响应。
异步——使用者通过两个线程调用服务；一个线程发送请求，而另一个单独的线程接收响应。
Ajax也可发送同步请求，但是ajaj不可以
但是基于ajax发送的请求是和传统的同步请求现象不一样的
Ajax同步请求将会锁住浏览器，用户必须等待其相应完成后，才能继续操作。
传统的同步是刷新页面，响应成功后，才能继续
3、Ajax不能取到作用域中的数据，只能认XML和String，可以在action设置向作用域里存值
**************************************************************************
①为什么不可用取已经存在的作用域的值（猜想，可以）
① 结果：是可以从当前jsp页面取出作用域的对象的。
但是如果存入对象，因为当前jsp页面没有刷新，是存不进去的，可以往application存吗？
其实是可以往作用域存东西的，只是当前页面获取不到，必须刷新后，或者其他页面才能获取到，但是没有什么意义吧？
②如果javascript 和 jsp代码相混合，是什么现象，晚上试试（猜想，先执行ajax，也就是javascript代码）
②结果：查看网页源代码时 js代码只是和html代码一样，jsp引擎会先将jsp代码发送到客户端成为静态代码，也就是说jsp代码先执行
IBM
小型机
数据库（DB2 银行联通）高隔离性
Oracle 数据库（128核） 2 或300 万刀
EMC（存储设备美国）
Oracle ---à mysql（集群，负载均衡）（主从复制，读写分离，水平拆分，库表伞列）
扫一扫
1000
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
