Ajax学习中的一些总结

Ajax技术   异步交互技术特点：异步交互 局部刷新Ajax四种关键技术1、javaScript  通用的脚本语言，嵌入某种应用中，web浏览器嵌入的javascript解释器允许浏览器的很多内建功能进行交互，Ajax应用是使用JavaScript编写的2、css  层叠式样式表css为web页面元素 提供了一种可用的可视化样式定义的方法，他提供了简单而又强大的方法，以一致的方法定义和使用可视化样式，在Ajax应用中 用户界面样式可以通过css独立修改3、Dom文档对象模型Dom以一组可以使用javascript操作的可编程对象展现出web页面的结构 通过使用脚本修改Dom Ajax应用程序可以在运行时改变用户界面，或者高效的重绘页面中某个部分4、XmlHttpRequest对象 xmlhttprequest对象允许web程序员，从web服务器以后台的活动方式获取数据，数据格式通常是xml 但是也很好的支持文本数据格式。尽管xmlhttprequest对于完成这种工作，说是最为灵活和通用的工作，但还是其他方法也可以从服务器获取数据。5、xmlHttpRequest    xmlHttpRequest最早在IE5以AtiveX（网络化多媒体对象技术），而其他浏览器支持Active对象，就可以使用Active来创建XmlHttpRequest对象，否则就要使用本地javaScript对象技术来创建该对象。6、XMlHttpREquest对象相关操作和方法    异步操作步骤    1、创建XmlHttpRequest对象    2、建立与服务器端的连接    3、发送数据send()    4、获取相应信息onreadystatechange        xmlHttp.readyState==4        xmlHttp.status==200    5、获取内容        xmlHttp.responseText;        或responseXML    ①创建XMLHttpRequest对象的代码        本地浏览器是否支持ActiveX对象 ，返回对象为true，返回null为false    var xmlHttp;    function createXMLHTTPRequest(){        //本地浏览器是否支持xmlHttprequest对象        if(window.XMLHttpRequest(){            //Mozilla浏览器(将xmlhttp作为本地浏览器来创建)                xmlHttp = new XMLHttpRequest();        }else if(window.ActiveXObject){            //IE浏览器(将XMLHTTPRequest作为Active对象来创建)            xmlHttp = new  ActiveXObject(""Microsoft.XMLHTTP);        }        if(xmlHTTP==null){            alert("不能创建XMLHTTPRequest对象");            return false；        }    }    ②XMLHTTPRequest对象的方法和属性    a、abort（）    停止当前请求    b、getAllResponseHeaders()    把HTTP请求的所有响应首部作为键值对返回    c、getResponseHeader("header")    返回指定首部的串值    d、void  open(String method,String url,boolean asynch)    建立对服务器的调用，method参数可以是get、post或者put    url参数可以是相对url或者绝对url，参数asynch来指示调用。    采用的是同步还是异步，默认为true 采用异步调用，否则为false    处理就会等待知道服务器返回响应为止    e、void send(content)    向服务器发送异步请求，如果请求是异步的，这个方法就会立即返回，否则 他会等待直到接受到服务器的返回响应为止。    输入的content可以是DOM的实例对象、输入流或者字符串，    传入这个方法的内容作为请求体的一部分发送。若send(null)则请求为空    f、void setRequestHeader(String header,String value)这个方法为Http请求中一个给定的首部字段设置值，这个方法必须在调用open()方法之后才能调用。    g、onreadystatechange    每次XMLHttpRequest对象的状态改变时都会触发这个事件处理器，这个事件处理器通常会调用一个JAvaScript函数取执行相关的代码    h、readyState XMLHttpRequest对象的状态变化    0（未初始化）    新的XMLHttpRequest兑现实例已建立，但是尚未初始化（尚未调用open方法）    1、正在加载    新的XMLHttpRequest对象实例已建立 尚未调用send方法。    2、已经加载    send方法已调用，但是当前的response状态未知    3、交互中    客户端已接受部分response中的信息，但是没有全部接受，这时通过responseXML或者responseText获取部分数据    4、完成    数据接收完毕 此时可以通过responseXML或者responseText获取完整的应答信息。    i、status        服务器的http状态码 200=ok  404 not found IE1223        FireFox 204服务器没有信息返回    j、responseText        服务器的响应，表示为一个web文本内容    k、responseXML        服务器的响应，表示为一个xml文档    l、statusText        HTTP状态码的相应文本（ok、或者/NOT found）    3、请求返回到浏览器        Content-Type设置为text/xml，XMLHttpRequest对象只能处理text/html的结果        在另一些复杂的示例中，响应可能涉及更广，还包括JAVascript、DOM管理以及其他相关技术，        response.setHeader("Cache-Control","no-cache");        response.setHeader("Pragma","no-cache");    4、回调函数        对于XMLHTTP对象，onreadystatechang属性存储了回调函数的指针。当XMLHttpRequest对象的内部状态发生变化时，就会调用这个回调函数        function ajaxCallBack(){            if(xmlHttpRequest.readyStatu==4)            if(xmlHttpRequest.status==200){            //拿到接受好的数据            //进行局部刷新            }        }    5、常用提交方式    a、post        xmlHTTP.open("POST",url,true);        xmlHTTP.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");        xmlHttp.onreadystatechange=ajaxCallback;        xmlHttp.send("name="+str);        注意 此时parameter在请求体中    b、get        xmlHttp.open("get",url,true);        xmlHTTP.onreadystatechange=ajaxCallback;        xmlHttp.send(null);    6、使用innerHTML属性创建动态内容        它是一个非标准的属性，最早在IE中实现 这是一个简单的串，表示一组开始标记和结束    7、js中dom解析xml        例如        <message>            <msg>            </msg>        </message>    常用的一些方法        //元素节点的名字        message[i].nodeName;        //元素节点下面第一个节点的值/这个节点必须是文本节点        message[i].getAttribute("name");        //元素的属性集合        返回的集合里面放的是Attr类型的对象        message[i].attributes;        获得集合中的一个Attr对象        有name和value两个属性 可以查看属性名和值        message[i].attributes[i];        获得元素下面所有直接子节点        message[i].childNodes;        元素节点中最后一个子节点        message[i].lastchold;    7.1处理XML文档的DOM元素属性        childNodes            返回当前所有子元素的数组        firstChild            返回当前元素的第一个下级子元素        lastChild            返回当前元素的最后一个子元素        nextSibling            返回紧跟在当前元素后面的元素        nodeValue            指定表示元素的读写属性        parentNode            返回元素的父节点        previousSibling            返回紧邻当前元素之前的元素    7.2 遍历XML文档的DOM元素方法        1、getElementById(id)            获取有指定唯一id属性值文档中的元素        2、getElementByTagName(name)            返回当前元素中指定标记名的子元素的数组        3、hasChildNodes()            返回一个布尔值指定元素是否有子元素        4、getAttribute(name)            返回元素的属性值，属性由name指定，如<option value="1"></option>            getAttribute("value")返回1    7.3 动态创建内容所用的W3c DOM的属性和方法        1、document.createElement(name)        文档对象上createElement方法可以创建由tagName指定的元素。如果以串div作为方法参数，就会生成一个div元素        2、document.createTextNode(text)        文档对象的createTextNode方法会创建一个包含静态文本的节点。        3、<element>.appendChild(childNode)    appendChild方法将指定的节点增加到当前元素的子节点列表 /作为一个新的子节点/例如可以增加一个option元素作为select元素的子节点    4、<element>.getAttribute(name)    <element>.setAttribute(name，value)    这两个方法分别获得和设置元素中属性值    5、<element>.insertBefore(newNode,targetNode)    这个方法将节点 newNode作为当前元素的子节点 插入到targetNode元素前面    6、<element>.removeAttribute(name);    这个方法从元素中删除属性name    7、<element>.removeChild(newNode）    这个方法将删除子元素newNode    8、<element>.replaceChild(newNode,oldNode)    这个方法将节点oldNode替换为节点newNode    9、<element>.hasChildNodes()    这个方法返回一个布尔值，指定元素是否有子元素