首页 > 代码库 > ajax小结

ajax小结

一)回顾传统Web应用请求和响应特点
【显示当前时间】
1)浏览器发送请求时,会将原来页面的全部数据丢弃,等待服务端的响应结果
2)服务端根据业务逻辑的处理情况,可能会影响速度
3)浏览器接到响应结果后,再次重新整个页面
即使只有一小处地方有变化,其它地方无变化,这时浏览器也需要重新全部加载
传统方式下,浏览器的加载数据的压力会比较大,加载时间相对比较慢

二)什么是AJAX(异步JavaScript和Xml)
(1)同步:当一个请求发送后,必须等待刚刚那个请求的响应;只有响应完毕后,才能发送下一个请求
请求1->响应1->请求1->响应1->... ... 单线程 WEB1.0时代 传统WEB应用 有规律
(2)异步:当一个请求发送后,不必等待刚刚那个请求的响应,就可以发送下一个请求。
请求1->请求2->响应1->请求3->响应2->响应3... ... 多线程 WEB2.0时代 现代WEB应用 有规律
总之,所有请求,最终都会响应
注意:现代WEB项目全是以1.0为主,2.0为辅。
(3)AJAX
就是WEB2.0时代是技术体现,所有的浏览器请求,都是以异步的方式发送到服务器。
(4)AJAX技术体系结构
参见<<AJAX技术体系结构.JPG>>

三)为什么使用AJAX
(1)减轻浏览器和服务器的发送和响应压力与提高速度时,可以使用AJAX技术
(2)让用户休验无刷新的浏览器与服务端交互的话,可以使用AJAX技术
(3)以异步方式提交浏览器的数据时,可以使用AJAX
[本质]:AJAX本质是属于B/S结构的,
效果:C/S结构。

*四)AJAX的特点
1)有些浏览器(例如IE)会缓存上一次发送URL请求和对应的结果,如果第二次请求与第一次一样的话,
这类浏览器直接使用上次缓存的结果,而不会发送到服务器。 因此最好在URL请求后,加上一次时间随机数,
以确保每次请求有不同的URL。
2)对于GET请求,非英文和非数字,都要进行URL编码,服务端也要进行URL解码
3)AJAX技术,只限于WEB页面(jsp,html), 与服务端技术无关。

*五)AJAX实战
(1)无刷新显示服务器响应的当前时间
(2)基于HTML普通字符串,以GET和POST方式检查注册用户名是否存在
(3)基于XML,二级下拉联动
(4)基于JSON,二级下拉联动
(5)基于第三方工具生成JSON,二级下拉联动

**六)XMLHttpRequest(即:AJAX引擎)对象常用事件,方法和属性
(1)事件:
xhr.onreadystatechange:当AJAX引警的状态一旦改变,由系统触发,不是由程序员触发

(2)属性:
xhr.readyState==0:已创建AJAX引警,但未调用open()方法
xhr.readyState==1:已调用open()方法,但未调用send()方法
xhr.readyState==2:已调用send()方法,请求正发往服务端的路上
xhr.readyState==3:已接收到请求,处理完毕后,正在响应浏览器
*xhr.readyState==4:浏览器已完全彻底接收到了服务端的响应
注意状态4,只强调了浏览器接收到了响应,但并未说明响应是正确的
*xhr.status==200:响应完全正确
xhr.status==404
xhr.status==500
xhr.status==304:服务端要求浏览器找缓存
这些状态码与WEB状态码一样
xhr.responseText:表示接收服务端以普通字符串响应的数据

(3)方法:
xhr.open(method,url,可选的boolean值)
method表示方式请求的方式,常用的GET和POST
url表示方送到哪个地方去,通常是Servlet&Struts2
可选的boolean值:
true:表示以异步的方式发送,默认
false:表示以同步的方式发送,即又回到WEB1.0时代
xhr.send(发送在请求体中的数据)
如果是GET请求:请求体为null,就算带数据,服务端也不能接收到
如果是POST请求:请求体为非null,格式:username=jack&password=123&role=admin
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
如果是POST的请求的话,一定要设置请求头,目的是让浏览器自动进行URL编码
这句话,一定要放在open()和send()之间才有作用

规则:如果无数据传统,才用GET请求;如果有数据传统,才用POST请求

*七)JSON的使用
(1)什么是JSON(JavaScript原始生态的对象)
JSON本质是就一JS的另一种表现形式而言,JS完全可以直接操作JSON,而不需要第三方的jar包
(2)JSON的作用
(3)JSON的语法
(4)使用第三方工具,将JavaBean或集合转成JSON字符串

//-------------------------------------------------------面试题
xhr.open(method,url,TRUE);//多线程,提倡,true小写
xhr.send(null);
xhr.onreadystatechange=function(){}

xhr.open(method,url,FALSE);//单线程,false小写
xhr.send(null);
xhr.onreadystatechange=function(){}