一、ajax:(asynchronous javascript and xml)异步的javascript和xml
1.使用到js和xml
2.实现异步
ajax就是使用js实现异步请求和局部刷新的,而xml是ajax和服务器交互的
一种数据格式(还有字符串文件 json)。
异步交互和同步交互:
1.同步交互:
1>浏览器向服务器发起一个请求,就要等待服务器给浏览器响应结束后,
然后浏览器才能向服务器发起第二个请求,中间这段时间只能等待。
2>刷新的话也是整个页面,也就是说服务器向浏览器响应的是整个html页面
1>客户端向服务器发送的是同步请求
2>服务器向浏览器做出的是全局刷新(对整个页面都进行了刷新)
2.异步交互:
1>浏览器向服务器发起一个请求后,无需等待服务器的响应,浏览器就可以
向服务器再发起第二个请求。
2>可以对页面的局部内容进行刷新,就是可以使用javascript接收服务器的
响应数据,然后使用javascript对页面的局部内容进行刷新,页面的其它
内容不变。
1>浏览器向服务器发出的请求是异步请求(靠的也是js)
2>ajax可以使用js接收到服务器响应的数据并对页面只做局部刷新
二、ajax的特点:
1>ajax能使用javascript请求服务器,而且是异步请求。
2>服务器向浏览器一般响应的是整个页面,即一个完整的html页面。
而ajax可以使用javascript接收服务器的响应数据,并使用javascript对
页面做局部刷新。
ajax:是异步请求和局部刷新
1>使用js进行异步请求
使用javascript请求服务器,而且是异步请求。
2>也是使用js对页面进行局部刷新
javascript接收服务器的响应数据,并使用javascript对
页面做局部刷新
3>ajax可接收的服务器响应的数据的类型:
1>text:字符出串文本
2>xml
3>json:js提供的数据格式(ajax中使用最多)。
三、ajax的应用场景:
1>表单校验
2>百度搜索引擎
四、ajax的操作步骤:
1.第一步:得到XMLHttpRequest对象:
ajax主要就是通过XMLHttpRequest对象来实现异步交互的。
得到XMLHttpRequest对象对于不同的浏览器的方式是不一样的:
1>大多数浏览器都支持:
var xmlHttp = new XMLHttpRequest();
2>IE6.0:
var xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);
3>IE5.5以及更早版本的IE:
var xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
2.第二步:调用XMLHttpRequest对象的open()方法打开与服务器的连接:
xmlHttp.open();
1>参数一:请求方式,get或post。
2>参数二:请求的URL地址,即请求的服务器资源。
3>参数三:请求是否为异步,true表示发送异步请求,false表示发送同步请求。
xmlHttp.open(“GET” , “/ajaxTest/ServletA” , true);
(3).如果是post请求,还需调用xmlHttp对象的setRequestHeader()方法,设置请求头:
Content-Type,值是application/x-www-form-urlencoded,告诉服务器浏览器使
用url编码传递的数据
xmlHttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
4.第三步:调用XMLHttpRequest对象的send()方法发送请求:
xmlHttp.send();
当是post请求方式时,参数就是请求体内容;
而当是get请求方式,参数必须是null,且在open()方法的参数url地址之后连接上参数;
如果post和get请求方式都没有请求参数,则也为null。
5.第四步:在XMLHttpRequest对象的onreadystatechange事件上注册监听器,
获取XMLHttpRequest对象的状态和服务器的响应状态码并进行判断,进
而获取服务器的响应数据。
onreadystatechange事件是当XMLHttpRequest对象的状态发生变化时被触发的。
1>得到XMLHttpRequest对象的状态:
var state = xmlHttp.readyState ;
1) 0状态:初始化未完成状态。只是创建了XMLHttpRequest对象,还未调用open()方法。
2) 1状态:请求已开始。open()方法调用了,还没有调用send()方法。
3) 2状态:请求发送完整状态。send()方法也已经调用了。
4) 3状态:开始读取服务器响应,但服务器响应未结束。
5) 4状态:读取服务器响应结束。(合法状态)
2>得到服务器响应的状态码:
var status = xmlHttp.status ;
(合法状态码200)
3>得到服务器的响应数据:
1)得到服务器响应的文本格式的内容:
var content = xmlHttp.responseText ;
2)得到服务器响应的xml格式的内容,且返回的是将xml文本进行封装的Document对象:
var content = xmlHttp.responseXML;
五、获取服务器响应数据的XML文本:
1、服务器端:
设置响应头:Content-Type,值为:text/xml;charset=utf-8
告诉浏览器服务器响应的正文为xml文本,以及响应数据的编码格式为utf-8
2、客户端:
通过xmlHttp对象的responseXML属性获取响应数据,且返回值是封装了xml文档的
document对象:
var doc = xmlHttp.responseXML;
"<stus>" +
"<stu sno='101'>"+
"<name>张三</name>"+
"<age>20</age>"+
"</stu>"+
"</stus>";
浏览器判断:
window对象的addEventListener事件的值为false表示是IE浏览器,值为
true表示是其他浏览器。
XStream技术:
1、作用:
把javaBean转换成(序列化)xml格式字符串
2、所需jar包:
xstream-1.4.7.jar、xpp3_min-1.1.4c.jar
3、操作步骤:
1>创建XStream对象:XStream xs = new XStream();
2>将指定javaBean转成xml字符串:String str = xs.toXML(javaBean);
4、其它方法:
1>将生成的xml中指定类型对应生成的标签名进行修改:
xs.alias(“china” , List.class);将List类型生成的标签名改为china
xs.alias(“province” , Province.class);将Province类型生成的标签名改为province
2>类的成员默认生成的是类对应标签的子标签,让类的成员生成类对应生成标签的属性:
xs.useAttributeFor(Province.class , "name");
把Province类的name成员属性,修改生成Province类生成的标签<province>的name属性,
而不是Province类生成的标签<province>的子标签<name>
3>当javaBean的成员是Collection集合时,只需要将Collection集合的内容生成标签,而
Collection集合不生成标签:
xs.addImplicitCollection(Province.class , "cities");
让Province类的成员List集合cities不生成标签,只让cities集合的内容生成标签
4>让指定类的成员不生成标签:
xs.omitField(City.class , "description");
让City类的成员description不生成标签