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)