2012暑假Ajax学习笔记

Ajax：（Asynchronout JavaScript And XML）
1.开发工具  Eclipse、IntelliJ
使用XHTML和CSS基于标准的表示技术、DOM进行动态显示和交互、
XML和XSLT数据交换和处理(到后面就主要用JSON)、XMLHttpRequest进行一部数据检索、JavaScript将以上技术融合在一起。
所以说啊，JavaScript的学习是关键 再利用JQuery Library（库）进行开发

能实现Ajax的框架：dojo、DWR、ext JS、JQuery、mootools、prototype、rico

2.Ajax实现简单的用户验证
    -获取文本框中的内容
    -将文本框中的数据发送给服务器端的Servlet
    -接收服务器端返回的数据
    -将服务器端返回的数据动态的显示在页面
3.DOM(Document Object Module) 
    一切都是节点(元素节点(类型值=1)、文本节点(类型值=3)、属性节点(类型值=2))
    nodeName,nodeType,nodeValue
    replaceNode();
    window.onload=function(){   //当文档加载完成后点击事件才会被执行
        Document.getElementById("id").onclick=function(){
            
        }
    }
    setAttributr/getAttribute设置属性/获取属性值
    创建新元素节点：Document.createElement("li");
    创建新文本节点：Document.createTextNode("aaa");
    插入节点：parentNode.insertBefore(newNode,targetNode),parentNode.
4.建立模式对话框显示指定的文档
    window.showModelessDialog(sURL,VArguments,sFeatures);
  建立模式对话框显示指定的文档,其实就是在指定的区域内加载指定的目标URL中的内容
    window.showModelDialog(sURL,VArguments,sFeatures);
        sURL:目标网址
        VArguments:常用window(代表sURL页面)
        sFeatures:字符串参数 设置显示页面的参数（包括页面大小,是否显示工具栏，页面位置）
5.Ajax信息补充：
    创建XMLHttpRequest对象（其中要注意浏览器兼容性的问题）具体代码：

        function createAjax（）｛

        var xmlhttp;

            try{

                xmlhttp = new XMLHttpRequest();

            }catch{

                try{

                    xmlhttp = new ActiveXObject("MSXML2.XMLHttp");

                }catch{

                    try{

                        xmlhttp = new ActiveXObject("Micrsoft.XMLHttp);

                    }

                }

            }

            return xmlhttp;

    ｝

 

    注册回调函数：
        xmlhttp.onreadystatechange = callback;
    设置连接信息：
        xmlhttp.open("GET","URL",true);
    发送数据，开始和服务器端交互
        xmlhttp.send(null);
        //注意：用Get方式发送数据,send方式中的参数不能传送到服务器端
    
    POST方式：
        发送数据时设置头信息：
        xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //该方法必须放置在open之后，作用：告知服务器正在发送数据
        xmlhttp.send("usename='aaaaa'&password=99999");
6.JQuery信息补充
    DOM对象和JQuery对象之间的转换
      DOM对象转为Jquery对象  使用$(DOM对象);
        var username = Document.getElementById("id"); //DOM对象
        var $username = $(username);  //JQuery对象
      JQuery对象转为Dom对象  其实Jquery对象相当于一个数组
        var $username = $("#username");     //
        var username = $username[0]; 或者$username.get(0);

      JQuery选择器：$("input:disabled");查找input中不带有enabled属性的input
                    $("body > div")body下的div子类元素
                    $("body div")body下所有div元素
                    $("body + div")div下一个兄弟元素
                    $("body ~ div")后面兄弟div元素

                    $("input[type=text]:disabled") 属性过滤选择器

                $.each($("input[type=checkbox]:checked"),function(index,domEle){
                        //$.each是对集合进行遍历
                            alert($(this).val());
                        });
                $.each($("select option:selected"),function(index,domEle));
                //遍历下拉框中被选中的选项
        内部插入节点：