原始的Ajax 直接使用XmlHttpRequest

前端之家收集整理的这篇文章主要介绍了原始的Ajax 直接使用XmlHttpRequest前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

//定义XMLHttp实例var xmlHttp;function createXMLHttpRequest(){//开始初始化XMLHttpRequest对象if(window.ActiveXObject){//IE浏览器xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}else if(window.XMLHttpRequest){//Mozilla浏览器xmlHttp = new XMLHttpRequest();}if(xmlHttp){xmlHttp.open("GET",url,false);xmlHttp.onreadystatechange=function(){setState(greens,reds,contains)};xmlHttp.send(null);}}//回调函数举例//返回的4种状态function setState(greens,contains){var contains = document.getElementById("contain");if(xmlHttp.readyState == 0){contains.innerHTML = "正在初始化";}if(xmlHttp.readyState == 1){contains.innerHTML = "正在准备发送请求";}if(xmlHttp.readyState == 2){contains.innerHTML = "正在发送请求";}if(xmlHttp.readyState == 3){contains.innerHTML = "正在接收数据";}if(xmlHttp.readyState == 4){//信息已经成功返回,开始处理信息if(xmlHttp.status == 200){contains.innerHTML = xmlHttp.responstText; //返回值}}} (1)设置在从服务器返回数据的同时,还要进行设置,使浏览器不会在本地缓存结果,response.setHeader("Cache-Control","no-cache");response.setHeader("pragma","no-cache");XMLHttpRequest对象提供2个可以用来访问服务器响应的属性,一个是responseText将响应提供一个串,结合HTML元素的 innerHTML属性,非常有用. (document.getElementById("results").innerHTML=xmlHttp.responseText).一个是 responseXML将响应提供为一个XML对象.(2)DOM元素的一些有用的属性  childNodes--------------------------------------返回当前元素所有子元素的数组  firstChild --------------------------------------返回当前元素的第一个下级子元素  lastChild ---------------------------------------返回当前元素的最后一个子元素  nextSibling---------------------------------------返回紧跟在当前元素后面的元素  nodeValue----------------------------------------指定表示元素值的读/写属性  parentNode --------------------------------------返回元素的父节点  prevIoUsSibling----------------------------------返回紧邻当前元素之前的元素  (3)用于遍历XML文档的DOM元素方法(document)  getElementById(id)-----------------------------获取有指定唯一ID属性值文档中的元素  getElementsByTagName(name)--------------返回当前元素中有指定标记名的子元素的数组  hasChildNodes()--------------------------------返回一个布尔值,指定元素是否有子元素  getAttribute(name)------------------------------返回元素的属性值,属性由name指定(4)动态创建内容时所用的W3C DOM属性方法  document.createElement(tagName)----------文档对象上的createElement方法可以创建由tagName指定的元素  document.createTextNode(text)--------------文档对象的createTextNode方法会创建一个包含静态文本的节点.  <element>.appendChild(childNode)---------该方法将指定的节点增加到当前元素的子节点列表.  <element>.getAttribute(name)|.setAttribute(name,value)-----------------获得和设置元素中name属性的值<element>.insertBefore(newNode,targetNode)-----这个方法将节点newNode作为当前元素的子节点插到targetNode元素前面。<element>.removeAttribute(name)-----这个方法从元素中删除属性name<element>.removeChild(childNode)-----这个方法从元素中删除子元素childNode<element>.replaceChild(newNode,oldNode)-----这个方法将节点oldNode替换为节点newNode<element>.hasChildNodes()这个方法返回一个布尔值,指示元素是否有子元素XMLHttpRequest对象的一些典型方法:(1)、void open(String method,String url,boolean asynch);这个方法会建立对服务器的调用。第一个参数表示要提供调用的特定方法(get,post,put)第二个参数表示要提供所调用资源的url第三个参数表示是异步(true)还是同步(false)(2)、void send(content):这个方法会向具体服务器发出请求。可选参数会作为请求体的一部分发送。(3)、void setRequestHeader(String header,String value):这个方法为HTTP请求中一个给定的首部设置值第一个参数表示要设置的首部。第二个参数表示要 在首部中放置的值。这个方法必须在调用open()之后才能调用。XMLHttpRequest对象的一些典型属性:(1)、onreadystatechange:每个状态改变时都会触发这个事件处理器,通常会调用一个javascript函数,用来处理返回时要调用函数。(2)、readyState:请求的状态。有5个值:0=未初始化,1=正在加载,2=已经加载,3=交互中,4=完成。(3)、responseText:服务器的响应,表示为一个串(4)、responseXML:服务器的响应,表示为一个XML,这个对象可以解析为一个DOM对象。(5)、status:服务器的Http状态码(200对应ok,404对应Not Found(未找到))以上为转载:http://hi.baidu.com/dreamsun2008/blog/item/c997835587360f1a3a293593.html如上所述,Ajax 的核心是JavaScript对象XmlHttpRequest。下面的示例文章评价系统将带您熟悉Ajax的底层基本知识:http://tearesolutions.com/ajax-demo/raw-ajax.html。注:如果您已经在本地WebLogic容器中安装了ajax-demo.war,可以导航到http://localhost:7001/ajax-demo/raw-ajax.html,  浏览应用程序,参与投票,并亲眼看它如何运转。熟悉了该应用程序之后,继续阅读,进一步了解其工作原理细节。  首先,您拥有一些简单的定位点标记,它连接到一个JavaScriptcastVote(rank)函数。function castVote(rank) { var url = "/ajax-demo/static-article-ranking.html"; var callback = processAjaxResponse; executeXhr(callback,url);}  该函数为您想要与之通信的服务器资源创建一个URL并调用内部函数executeXhr,提供一个回调JavaScript函数,一旦服务器响应可用,该函数就被执行。由于我希望它运行在一个简单的Apache环境中,“cast vote URL”只是一个简单的HTML页面。在实际情况中,被调用的URL将记录票数并动态地呈现包含投票总数的响应。  下一步是发出一个XmlHttpRequest请求:function executeXhr(callback,url) { // branch for native XMLHttpRequest object if (window.XMLHttpRequest){ req = new XMLHttpRequest(); req.onreadystatechange = callback; req.open("GET",true); req.send(null); }// branch for IE/Windows ActiveX version else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP");if (req) { req.onreadystatechange = callback; req.open("GET",true); req.send(); } }}  如您所见,执行一个XmlHttpRequest并不简单,但非常直观。和平常一样,在JavaScript领域,大部分的工作量都花在确保浏览器兼容方面。在这种情况下,首先要确定XmlHttpRequest是否可用。如果不能用,很可能要使用Internet Explorer,这样就要使用所提供的ActiveX实现。executeXhr()方法中最关键的部分是这两行:req.onreadystatechange = callback;req.open("GET",true);  第一行定义了JavaScript回调函数,您希望一旦响应就绪它就自动执行,而req.open()方法中所指定的“true”标志说明您想要异步执行该请求。  一旦服务器处理完XmlHttpRequest并返回给浏览器,使用req.onreadystatechange指派所设置的回调方法将被自动调用。function processAjaxResponse(){ // only if req shows "loaded" if (req.readyState == 4){ // only if "OK" if (req.status == 200) { 502 502'votes').innerHTML = req.responseText; }else { alert("There was a problem retrieving the XML data:" + req.statusText); } }}该代码相当简洁,并且使用了几个幻数,这使得难以一下子看出发生了什么。为了弄清楚这一点,下面的表格(引用自 http://developer.apple.com/internet/webcontent/xmlhttpreq.html)列举了常用的 XmlHttpRequest对象属性属性描述onreadystatechange每次状态改变所触发事件的事件处理程序readyState对象状态值:* 0 = 未初始化(uninitialized)* 1 = 正在加载(loading)* 2 = 加载完毕(loaded)* 3 = 交互(interactive)* 4 = 完成(complete)responseText从服务器进程返回的数据的字符串形式responseXML从服务器进程返回的DOM兼容的文档数据对象status从服务器返回的数字代码,比如404(未找到)或200(就绪)statusText伴随状态码的字符串信息  现在processVoteResponse()函数开始显示出其意义了。它首先检查XmlHttpRequest的整体状态以保证它已经完成(readyStatus == 4),然后根据服务器的设定询问请求状态。如果一切正常(status == 200),就使用innerHTML属性重写DOM的“votes”节点的内容。  既然您亲眼看到了XmlHttpRequest对象是如何工作的,就让我们利用一个旨在简化JavaScript与Java应用程序之间的异步通信的框架来对具体的细节进行抽象。

原文链接:https://www.f2er.com/ajax/163897.html

猜你在找的Ajax相关文章