ajax入门
Ajax入门
1.ajax是什么？
ajax全称“Asynchronous Javascript And XML”，并不是一种新技术，是由javascript、xml、XMLHttpRequest组合在一起、能实现异步提交的功能，是一种创建交互式网页应用的网页开发技术
它能使用js访问服务器，而且是异步的访问
2.异步交互和同步交互？
· 同步：
>发一个请求，就要等待服务器的响应结束，然后才能发第二个请求！等待时间”卡“
>刷新的是整个页面
异步：
>发一个请求，无需等待服务器的响应，就可以发第二个请求
>可以使用js接收服务器的响应，然后使用js来局部刷新
3.ajax优缺点
优点：
>异步交互：增强用户体验
>性能：因为服务器无需响应整个页面，只需要响应部分内容，所以服务器的压力减轻了
缺点：
>ajax不能应用于所以场景
>ajax无端的增多了对服务器的访问次数，给服务器带来了压力
==========================================================================
ajax发送异步请求（四步操作）
1.第一步（得到XMLHttpRequest）
ajax只需要学习一个对象：XMLHttpRequest
得到XMLHTTPRequest
>大多数浏览器：var xmlHttp = new XMLHttpRequest();
>IE6.0：var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")
>IE5.5及之前：var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
编写创建XMLHttpRequest对象的函数
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();
}catch(e){
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
throw e;
}
}
}
}
2.第二步（打开与服务器的连接）
xmlHttp.open():用来打开与服务器的连接，它需要三个参数
>请求方式：可以是GET或POST
>请求的URL：指定服务端资源，例如：/day23_1/AServlet
>请求是否为异步：如果为true表示发送异步请求，否则同步请求
xmlHttp.open("GET","/day23_1/AServlet",true);
3.第三步（发送请求）
xmlHttp.send(null)：如果不给可能会造成部分浏览器无法发送
>参数：就是请求体内容！如果是GET请求，必须给出null
if("POST" == option.method){
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
4.第四步（得到响应）
在xmlHttp对象的一个事件上注册监听器：onreadystatechange
xmlHttp对象一共有5个状态：
>0状态：刚创建，还没有调用open()方法
>1状态：请求开始：调用了open()方法，但是还没有调用send()方法
>2状态：调用完了send()方法
>3状态：服务器开始响应，但不表示响应结束了
>4状态：服务器响应结束！（通常我们只关心这个状态！）
得到xmlHttp对象的状态：
>var state = xmlHttp.readyState; 0,1,2,3,4
得到服务器响应的状态码：
>var states = xmlHttp.states; 200,404,500
得到服务器响应的内容
>var content = xmlHttp.responseText;得到服务器的响应的文本格式的内容
>var content = xmlHttp.responseXML;得到服务器的响应的xml响应的内容
xmlHttp.onreadystatechange = function(){ //xmlHttp的五种状态都会调用本方法
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){//双重判断，只有状态为4响应码为200时才行
var text = xmlHttp.responseText;
}
}
第二例：发送post请求
open：xmlHttp.open("POST"...);
添加一步：设置Content-Type请求头：
>xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
send:xmlHttp.send("username=zhangsan&password=123");
第三例：注册表单之校验用户是否注册！
1.编写页面
>给出注册表单页面
>给用户名文本框添加onblur时间的监听
>获取文本框的内容，通过ajax4步发送给服务器，得到响应结果
>如果为1：在文本框后显示”用户名已被注册“
>如果为0：什么都不做
2.编写Servlet
ValidateUsernameServlet
>获取客户端传递的用户名参数
>判断是否为itcast
>是：返回1
>否：返回0
Xstream
1.什么作用
可以把JavaBean转换为(序列化为)xml
2.Xstream核心jar包
核心jar包：Xstream-1.4.7.jar
必须依赖jar包：xpp3_min-1.1.4c(XML Pull Parser,一款速度很快的XML解析器)
3.使用步骤
Xstream xstream = new XStream();
String xmlStr = xstream.toXML(javabean);
4.使用细节
别名：把类型对应的元素名修改了
>xstream.alias("china",List.class):让List类型生成的元素名为china
>xstream.alias("province",Province.class);让Province类型生成的元素名为province
使用属性：默认类的成员，生成的是元素的子元素！我们希望让类的成员生成元素的属性
>xstream.useAttributeFor(Province.class,"name");把province类的名为name成员，生成<province>元素的name属性
去除Collection类型的成名：我们只需要Collection的内容，而不希望Collection本身也生成一个元素
>xstream.addImplicitCollection(Province.class,"cities"):让Province类的名为cities
去除类的指定成名，让其不生成xml元素
>xstream.omitField(City.class,"description"):在生成的xml中不会出现City类的名为description的对应的元素
Json
1.json是什么
它是js提供的一种数据交换格式！
2.json的语法
{}:是对象
>属性名必须使用双引号括起来！
>属性值：
null
数值
字符串
数组：使用[]括起来
Boolean值：true和false
json-lib
1.是什么？
它可以把javabean转换成json串
2.jar包
3.核心类
JSONObject --> Map
> toString()
JSONObject map = JSONObject.fromObject(person);
把对象转换成JSONObject对象
JSONArray --> List
> toString()
JSONArray jsonArray = JSONObject.fromObject(list);
把list转换成JSONArray对象
option对象有如下属性
请求方式 method
请求的url url
是否异步 asyn
请求体 params
回调方法 callback
服务器响应数据转换成什么类型 type
注册监听
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var data;
//获取服务器的响应数据，进行转换
if(!option.type){//如果type没有赋值，那么默认为文本
data = xmlHttp.responseText;
}else if(option.type == "xml"){
data = xmlHttp.responseXML;
}else if(option.type == "text"){
data = xmlHttp.responseText;
}else if(option.type == "json"){
var text = xmlHttp.responseText;
data = eval("("+ text + ")");
}
//调用回调方法
option.callback(data);
}
}
