Ajax详细介绍
Java开发交流群 677807540 大家可以一起讨论技术欢迎加入
~Asynchronized Javascript And Xml~
~Ajax~
~异步的js和xml~
ajax:
1：荷兰甲级联赛冠军阿贾克斯队
2：web2.0时诞生了异步js技术，大大改变互联网用户的
体验，由一些老技术组成，诞生于2004年
同步技术:
HttpServletRequest
用户发出请求，必须等待响应的返回，在响应返回之前
用户只能傻傻的等待在浏览器前，无法进行任何操作，
当响应返回，整个页面会被刷新。导致不必要的资源损耗
异步技术:
用户发出请求，不需要等待响应的返回，（响应正常情况下应该
返回），用户发出请求后可以继续完成自己的其他操作，
当响应在未来一段时间返回时，仅仅局部渲染页面，不会
导致整个页面的刷新
Ajax使用到的技术：
1:Javascript 核心语法
2:dom4j 解析或者读取xml
3:xml 封装数据
4:dhtml (css和html等前端技术的统称)
5:json 2006年加入ajax技术体系
取代了xml在数据封装解析
领域的统治地位
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//
穿件异步技术的请求
var request;
function create(){
这是level2版本的 如果是 ie 6 7 8 应该使用level1
request = new XMLHttpRequest();
//level1
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject("Microsoft.XMLHttp");
}
}
主函数(即激发事件)
function 方法名(value){
//根据浏览器的不同创建异步请求 readystate =0
create();
//向服务器方式异步请求 readystate =1
username 和userpass 是服务区安全策略,有些容器必须输入正确的用户名和密码才可以接受请求
request.open("提交的方式","提交的目的地","是否使用异步请求,默认true 改为false 浏览器锁死无法进行任何操作","username","userpass");
//设置字符流 get方式默认字符流不需要书写
request.setRequestHeader("content-Type","application/x-wwww-form-urlencoded");
//声明回调函数,声明不带括号 带括号是调用
request.onreadystatechange = callback;
//向服务传输的值 这里的值要和你方法里面的一样 传送到是字符串; readystate = 2
request.send("key="+value); 这里不传值也要书写 写null
}
传到 servlet中 ajax只支持 String xml jeson
编码中的设置
MIME text/xml text/plain
再返回值是 用out.print(值) 这里不能使用println 会多在返回值中加\n
function callback(){
//保证接收数据完整
if(request.readyStata==4){
//保证服务器运转正常
if(request.status==200){ 服务器响应回来的xml.text
var value=request.responseXml/responseText; 看你接受的是什么(String/xml)
}
}
}
在读取xml文件的时候;
doc.getElementsByTagName()
在拿取值得时候由于存在浏览器差异性 getText()
所以使用元素.getElementsByTagName("子元素名")[0].firstChild.nodeValue;获取第一个子元素的节点值
JSON (javascriot Object Notation )
专门用来封装大量数据的一种 特殊格式的字符串
使用json必须先导包 他是java技术
JSON 有俩种格式
1{key1:value1,key2:value2,key:value2...}
2[value1,value2...]
key必须是字符串
value:八种基本数据类型 数组 null json格式1 json格式2
JSON的封装 三种封装方式
1.可以封装任意数据类型,封装以后呈现第一种json类型
即{key,value}
JSONObject jo = new JSONObject();
jo.put(key,value);
2.专门用来封装自定义数据类型和Map
封装之后呈现第一种数据类型
JSONObject jo = JSONObject.fromObject(new user(id,name));
{"id":1,"name":"王欣光"}
还可以对自定义的数据类型进行
选择某些属性不封装
JSONConfig jc = new JSONConfig();
jc.setExcludes(new String[]("name","simplechinese"));
JSONObject jo = new JSONObject(new User(id,name,simplechinese),jc)
{"id":1};
3.专门用来封装数组 set 和 list 封装之后呈现第二种json格式
JSONArray ja = JSONArray.fromObject(list);
["济南","济宁","青岛"]
用json来传输数据取代xml
将异步请求传回来的String 类型的字符串接收;
通过json2.js转换器装换成javascript可以识别的dom对象
json的key转换成dom对象的属性名
json的value转换成dom对象的值;
引入json2.js需要在webroot下创建script包
然后
按住ctrl 出现小手可以点进去说明可以使用;
接收回调函数传来的字符串
var text = request.responseText;
通过json2.js转换dom模型
var value = JSON.parse(text);
value相当于dom文档对象.etoak就可以得到对应的值;
var array = value.etoak;
还要拿取选择框对应的id 为了进行赋值
(如果是第二个选择框,就要在在第一激发事件写出删除第二个选择框内容
得到第二个选择框的值(数组)
item 删除第一个值;
//删除城市下拉列表框中的下拉选项
while(dom_select.length>1){
dom_select.removeChild(dom_select.item(1));
}
)
开始遍历array;
var 对象 = array[i];
var 属性名 = 对象.属性名;
然后对得到的值放入选择框中
等号左边 o小写 [] 等号右边 O大写 name是显示内容 id放入数据库持久化的值 带便选择框的值;
对象.options[i+1] =new Option(name,id)