1 ajax
asynchronzied javascript and xml 异步的js和xml
它能使用js访问服务器,而且是异步访问
服务器给客户端的响应一般是整个页面,一个html完整页面,但在ajax中因为是局部刷新,那么服务器就不再响应整个页面!而只是数据
text:纯文本
xml
json:它是js提供的数据交互格式
2 异步交互与同步交互
同步:发一个请求,就要等待服务器的响应结束 ,然后才能发第二个请求
刷新的是整个页面
异步:发一个请求后,无需等待服务器的响应,然后就可以发第二个请求
可以使用js接收服务器的响应,然后使用js局部刷新
3 ajax应用场景
百度搜索框
用户注册时
4 ajax的优缺点
优点:异步交互,增强了用户的体验
性能:因为服务器无需再响应整个页面,只需要响应部分内容,所以服务器的压力减轻了
缺点:
不能应用在所有场景
ajax无端的增多了对服务器的访问次数
5 ajax发送异步请求(四步操作)
1 第一步:ajax其实只需要学习一个对象:XMLHttpRequest,如果掌握了它,就掌握了ajax
得到XMLHttpRequest
大多数浏览器都支持: var xnlHttp = new XNLHttpRequest()
IE 6.0 : var xmlHttp = new ActiveXObject("Msxml12.XMLHTTP");
IE5.5 以及更早的版本:var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
编写创建 XMLHttpRequest对象的函数
function createXMLHttpRequest(){
try{
return new XMLHttpRequest()
}catch(e){
try{
return new ActvieXObject("Msxml12.XMLHTTP");
}catch(e){
try{
return new ActvieXObject("Microsoft.XMLHTTP");
}catch(e){
alert("错误");
throw e;
}
}
}
}
2 第二步(打开与服务器的链接)
xmlHttp.open(): 用来打开与服务器的连接,它需要三个参数:
请求方式:可以是GET或POST
请求的URL:指定服务器端资源,例如:/project/AServlet、
请求是否为同步:如果为true,表示发送异步请求,否则同步请求
xmlHttp.open("GET","/project/AServlet",true)
3 第三步(发送请求)
xmlHttp.send(null):如果不给可能会造成部分浏览器无法发送
参数:就是请求体内容!如果是GET请求,必须给出null
4 第四步
在xmlHttp对象的一个事件上注册监听器:onreadystatechange
xml对象一共有5个状态
0:刚创建,还没有调用open(0方法
1: 请求开始,调用了open()方法,但还没有调用send()方法
2:调用完了send()方法
3:服务器已经开始响应
4:服务器响应结束(通常只关心这个状态)
得到xmlHttp对象的状态
var state = xmlHttp.readyState
得到服务器响应的状态码:
var status = xmlHttp.status;
得到服务器响应的内容
var content = xmlHttp.responseText; 得到服务器响应的文本格式的内容
var content = xmlHttp.responseXML 得到服务器的响应的xml响应的内容,它是Document对象
xmlHttp.onreadystatechange = funtion(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 20){
var text = xmlHttp.responseText();
}
}
发送POST请求
open:xmlHttp.open('POST',....)
添加一步:设置Content-Type请求头
xmlHttp.setRequestHeader("Content-Type","applcation/x-www-form-urlencode")
send:xmlHttp.send("username=zhangsan&password=123") 发送请求时指定请求体
案例:
注册表单之校验用户是否注册
1 编写注册表单页面
给用户名文本框添加onblur事件的监听
获取文本框的内容,通过ajax四步发送给服务器,得到响应结果
如果为1:在文本框后显示"用户名已被注册"
如果为0:什么都不做
2 编写Servlet
获取客户端传递的用户参数
判断是否itcas
是:返回1
否:返回0
响应内容为xml数据
服务器端:
设置响应头:ContentType,其值为: text/xml;charset=utf-8
客户端:
var doc = xmlHttp.responseXML 得到的是Document
省市联动:
1 页面
<select name="province">
<option>===请选择省份===</opyion>
</select>
<select name="city">
<option>====请选择城市====</option>
</select>
2 Servlet
ProvinceServlet:当页面加载完毕后马上请求这个Servlet
它需要加载china.xml文件,把所有的省的名称使用字符串发送给客户端
3 页面的工作
获取这个字符串,使用逗号分隔,得到数组
循环遍历每个字符串(省份的名称),使用每个字符串创建一个<option>元素添加到<select name="province">这个元素中
4 CityServlet
当页面选择某个省时,发送请求,得到省份的名称,加载china.xml文件,查询出该省份对应的元素对象,
把这个元素转换成xml字符串,发送给客户端
5 页面的工作得到服务器的响应结果
把<select name="city">中的所有子元素删除,但不要删除<option>====请选择城市===</option>
获取所有的<city>子元素,循环遍历,得到<city>的内容
使用每个<city>的内容创建一个<option>元素,添加到<select name="city">
6 XStream
1 作用 可以把javaBean转换为(序列化)xml
2 jar包 xstream-1.4.7.jar xpp3_min-1.1.4c
3 XStream xstream = new XStream()
String xmlStr = xstream.toXML(javabean(List集合))
alias("chaina",List.class) 改List类型指定别名为china
默认javabean都会生成子元素,而现在希望生成元素 的属性 useAttributeFor(Province.class,"name")
去除集合属性 例如<citys>, 为List<city>生成的, addImplicitCollection(Province.class,"cities")
去除不想要的javabean属性,就是让某引起javabean的属性,不生成对应的xml元素 omitField(City,class,"description")
7 json 是js提供的一种数据交换格式
1 语法
{} : 表示为对象
属性名必须使用双引号括起来!单引不行
属性值:null ,数值 ,字符串,数组:[]括起来 boolean值:true false
2 应用json var person = {"name":"zhangsan","age":18}
3 json与xml比较
可读性:XML较好
解析难度:json较好
流行度:XML流行,在AJAX领域,JSON更受欢迎
4 json-lib
可以把javabean转换成json串
jar包 略
JSONObject -->Map
方法 toString() 转换为json串
put()
已经有一个javabean时 JSONObject.fromObject(javabean); :把对象转换成JSONObject对象
JSONArray --->List
方法 toString()
add(javabean)
已经有一个list时 JSONObject.fromObject(list) :把list对象转换成JSONArray对象