`

原始的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,reds,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", url, 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", url, true); req.send(); } }}

  如您所见,执行一个XmlHttpRequest并不简单,但非常直观。和平常一样,在JavaScript领域,大部分的工作量都花在确保浏览器兼容方面。在这种情况下,首先要确定XmlHttpRequest是否可用。如果不能用,很可能要使用Internet Explorer,这样就要使用所提供的ActiveX实现。

executeXhr()方法中最关键的部分是这两行:

req.onreadystatechange = callback;req.open("GET", url, 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应用程序之间的异步通信的框架来对具体的细节进行抽象。
 
分享到:
评论

相关推荐

    Ajax简单实例 XMLHttpRequest

    发送请求则使用`send()`方法,对于`GET`请求,直接调用即可: ```javascript xhr.send(); ``` 对于`POST`请求,需要传递数据作为参数: ```javascript xhr.send('key1=value1&key2=value2'); ``` 在实际应用中,...

    VS2008 AJAX控件介绍 AJAX组成及XMLHttpRequest对象

    在VS2008中,开发者可以直接使用AJAX控件,它们封装了XMLHttpRequest对象的复杂操作,简化了开发流程。例如,UpdatePanel控件背后的实现就是基于XMLHttpRequest对象的,它自动处理了请求和响应的处理逻辑,使得...

    ajax原理,xmlHttpRequest

    AJAX的主要工作原理是利用`XMLHttpRequest`对象来向服务器发送异步请求,并从服务器获取数据,随后使用JavaScript操作DOM来更新页面中的内容。这种方式使得用户可以在不离开当前页面的情况下与服务器进行交互,大大...

    ajax之核心XMLHttpRequest中文参考手册

    以上内容涵盖了XMLHttpRequest的基本使用和相关概念,通过深入理解和实践,可以有效地利用Ajax技术来提升网页的用户体验。在实际开发中,还可以结合jQuery、axios、fetch等库,简化Ajax的使用流程。

    全面剖析 Ajax XMLHttpRequest对象

    XMLHttpRequest对象是Ajax技术的核心,它是现代Web应用中用于实现客户端与服务器间异步数据交换的关键组件。在不刷新整个页面的情况下,XMLHttpRequest允许开发者通过JavaScript动态更新网页内容,极大地提升了用户...

    xmlHttpRequest用法示例ajax

    XMLHttpRequest(简称XHR)是JavaScript中的一个对象,用于在不刷新整个页面的情况下,与服务器进行异步数据交换,这是实现Ajax(Asynchronous JavaScript and XML)技术的基础。在本示例中,我们将深入探讨...

    AjaxXMLHttpRequest_Demo02.zip

    XMLHttpRequest(XHR)是实现Ajax的核心对象,它允许JavaScript与服务器进行通信,接收或发送数据,实现页面的动态更新。本Demo02着重展示了如何利用XMLHttpRequest对象实现Ajax的基本用法。 在AjaxXMLHttpRequest_...

    Ajax Demo Ajax 示例 XMLHttpRequest 异步 静态

    Ajax 示例展示了如何使用 XMLHttpRequest 对象异步获取静态内容,如系统当前时间,而无需刷新整个页面。这种技术在现代 Web 开发中广泛应用于表单提交、动态加载内容、实时聊天等场景,极大地提高了用户体验和交互...

    XMLHttpRequest中文参考手册(学习Ajax必备)

    由于同源策略限制,XMLHttpRequest不能直接向不同源发起请求。为实现跨域,可以使用JSONP或者CORS(跨源资源共享)技术。JSONP通过动态插入`&lt;script&gt;`标签实现,CORS则需要服务器返回特定的Access-Control-Allow-...

    js ajax XMLHttpRequest的使用

    在本篇内容中,我们将深入探讨XMLHttpRequest对象的使用,它是实现AJAX的核心。 首先,XMLHttpRequest(简称XHR)对象是JavaScript内置的一个对象,用于在后台与服务器进行异步数据通信。它的工作原理是创建一个XHR...

    AJAX XMLHttpRequest慨述

    如果运行在非IE浏览器中,则直接使用`new XMLHttpRequest()`创建对象。 #### 四、XMLHttpRequest对象的方法与属性 XMLHttpRequest对象提供了多个方法和属性,用于控制请求的发送、接收服务器响应以及处理数据。 -...

    ajax客户端XMLHttpRequest 实例

    **Ajax 客户端 XMLHttpRequest 实例详解** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使得网页实现了异步更新。...

    ajax-proxy:拦截es6代理重构XMLHTTPRequest的Ajax代理

    ajax-proxy使用起来十分简单,只有两个方法proxyAjax和unProxyAjax ,只要您对XMLHttpRequest有所了解,就能很快上手使用。 proxyAjax(proxyMap) proxyMap :代理对象, key为需要代理的属性或方法, value具体...

    ajax原始实现

    综上所述,Ajax的原始实现主要涉及XMLHttpRequest对象的使用,包括初始化请求、发送请求、处理响应等步骤。在实际应用中,还需考虑跨域、兼容性和UI更新等问题。随着技术进步,开发者可以选择更现代的API和工具来...

    XMLHttpRequest使用小例子

    以上就是一个简单的XMLHttpRequest使用示例,通过这个例子,我们可以实现异步地向服务器发送数据,获取并处理返回的数据,而无需刷新整个页面。在实际项目中,XMLHttpRequest常常被用于AJAX(Asynchronous ...

    XmlHttpRequest对象直接访问与通过Soap协议访问WebSevice详解示例

    本示例将深入探讨如何使用XMLHttpRequest直接访问Web服务以及通过SOAP(Simple Object Access Protocol)协议进行访问。 首先,让我们了解XMLHttpRequest的基本用法。创建一个XMLHttpRequest实例,然后设置其...

    XMLHttpRequest对象的使用

    王兴魁老师的Ajax核心技术教程中,可能详细讲解了如何使用XMLHttpRequest对象来实现这一功能。 首先,XMLHttpRequest对象是JavaScript内置的对象,通过创建实例化对象来使用。通常,我们会在JavaScript代码中这样...

    ajax测试使用实例,简单代码

    在这个"ajax测试使用实例,简单代码"中,我们将探讨如何利用Ajax进行基本的交互。 一、Ajax基础概念 Ajax的核心是JavaScript对象XMLHttpRequest,它允许JavaScript在后台与服务器通信。通过创建XMLHttpRequest对象...

    创建XMLHttpRequest对象的方法.rar

    总结,"创建XMLHttpRequest对象的方法.rar"这个资源主要介绍了如何在JavaScript中创建并使用XMLHttpRequest对象进行AJAX通信,包括对象创建、状态监听、请求初始化和发送、以及响应处理等关键步骤。在实际项目中,...

    Net下使用Ajax

    虽然可以直接使用XMLHttpRequest对象,但jQuery库提供了更简洁的API来处理Ajax请求。例如,`$.ajax()`、`$.get()`和`$.post()`函数使得编写Ajax代码更为简单易懂。例如,使用`$.get()`发送GET请求: ```javascript...

Global site tag (gtag.js) - Google Analytics