AJax

在使用XMLHttpRequest进行异步处理之前,需要对改对象进行初始化操作,根据不同的浏览器,初始化方法是不同的.

       IE浏览器的初始化方法:

       var xmlhttp = new ActiveXObject(“Msxml2.XMLHTTP”);

              或者

              var xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);

       括号中的不同参数针对的是不同版本的浏览器,此外还有其他参数类型.

       Mozilla浏览器初始化方法:

              var xmlhttp=new XMLHttpRequest();

      

总的XMLHttpRequest对象初始化程序如下:

       <script language=”javascript” type=”text/javascript”>

       <!—

              var xmlhttp;

              try{

       xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”); //初始化IE浏览器

}catch(e){

       try{

       xmlhttp=new ActiveXObject(“Msxml2.XMLHTTP”); //初始化IE浏览器

}catch(e){

       try{

              xmlhttp=new XMLHttpRequest();               //初始化Mozilla浏览器

              if(xmlhttp.overrideMimeType){

                     xmlhttp.overrideMimeType(“text/xml”);
//因为有些版本的Mozilla浏览器在处理服务器返回的包含XML             　　　　　　　　　　　　　　　　 　　　　　　　mime-type头部信息内容时会出错,所以为了保证返回内容是text/xml信息,则需要这一步.

}

}catch(e){

}

}

}

-->

</script>

 

XMLHttpRequest对象说包含的一般方法如下所示:

      

方法                                                        描述

abort()                                              停止当前的异步请求

getAllResponseHeaders()                     以字符串形式返回完整的HTTP头信息

getResponseHeader(headerLabel)         使用headerLaberl标识来获取指定的HTTP头信息

open(“method”,”URL”[“asyncFlag”,]   设置进行异步请求的URL,请求方法以及其他参数

[“username”,][“password”])                 信息

send(content)                                     发送请求

setRequestHeader(“laber”,”value”)       设置HTTP头信息,并和请求一起发送到服务器

 

其中比较常用的是open()和send()两个方法,其中open()方法在创建完XMLHttpRequest对象之后就可以使用了,它创建一个请求,并准备向服务器发送,基本语法如下:

xmlhttp.open(method,url,asynchronous,uese,password);

例:

xmlhttp.open(“get”,”getData.jsp?key=8”,true);

其中参数含义如下:

method : 指定请求的类型,一般为get和post

url   :     指定请求的地址,可以使用绝对地址或者相对地址,并且可以附带查询字符串

asynchronous : 这是一个可选项,表示请求是同步还是异步,异步请求为false,同步请求为true,默认情况下该参数为true.

user : 可选参数,指定请求用户名,没有则省略.

password : 可选参数,指定请求的密码,没有则省略.

 

在open()方法创建了一个请求之后,就可以使用send()方法向服务器发送该创建的请求,其基本语法如下:

xmlhttp.send(content);

其中的content变量为记录发送的数据,其格式为查询字符串的形式,如下:

content = “username=Johnoson&sex=male&age=”;

其中定义了发送给服务器的3个名/值对,并且它们之间使用&符号隔开,如果在open()方法中method参数指定为get,则这些参数是作为字符串提交的,服务器端使用request.querystring()方法来获取;如果method参数指定为post,则这些参数作为HTTP的post方法提交,在服务器端需要使用request.form()方法来获取,这里的content参数是必须要指定的,如果没有参数值需要传递,可以设置content=null,则xmlhttp.send(null).

       XMLHttpRequest 对象所包含的属性如下:

       属性                                                 描述

 onreadystatechange                           状态改变的事件触发器

 readyState                                        对象状态:

                                                        0=未初始化

                                                        1=读取中

                                                        2=已经读取

                                                        3=交互中

                                                        4=完成

responseText                                      服务器进程返回的文本信息

responseXML                                     服务器进程返回的兼容DOM的xml文档对象

status                                                404 = 文件未找到;

                                                        200 = 成功

statusText                                          服务器返回的状态文本信息

 

onreadystatechange 事件捕获请求的状态变化

在向服务器端发送了一个请求后,往往是不指定请求什么时候完成,所以必须使用一种机制来获取请求处理的状态,onreadystatechange状态变量就是XMLHttpRequest对象用来实现这一功能的.

onreadystatechange事件可以指定一个事件处理函数用来处理XMLHttpRequest对象的执行结果,例如:

       xmlhttp.onreadystatechange=function(){

              //此处将对异步请求返回的结果进行处理

}

xmlhttp.open();      xmlhttp.send();

注意: 这里将事件绑定在调用了open()和send()方法之后进行,这是因为这两个方法都会出发readystatechange事件,如果该事件在其后定义,则可能引起该事件指定的处理代码得不到执行.

使用readyState属性判断请求状态

       Onreadystatechange事件是在readyState属性发生改变的时候出发执行的,该属性记录着当前请求的状态,然后在程序中可以根据不同请求状态进行不同的处理,

       readyState属性值                       描述

0                                        这是readyState开始时具有的值,表示对象已经建立,但还未
                                           初始化,这时尚未调用open()方法

1                                        表示open已经调用,但是尚未调用send方法

2                                        表示send方法已经调用,但是其他数据还未知

3                                        表示请求已经发送,正在接受数据过程中

4                                        表示数据已经被成功接受

在整个过程中,readystatechange事件在每次readyState属性发送改变的时候都会执行一次,所以通常在事件中判断readyState值,然后根据不同状态来进行适当的处理 例:

xmlhtpp.onreadystatechange=function(){

              if(xmlhttp.readystate==4)

              {

                     //请求完毕时的执行处理代码

}

}

这里的readyState仅仅表示请求的状态,并不表示请求的结果.

使用status属性判断请求的结果

status属性存储服务器端返回的http请求响应状态码, 以下是常见的状态码含义

              http响应状态码                         描述

200                                                                          请求成功

202                                     请求被接受,但是尚未完成
400                                     错误的请求

404                                     请求资源未找到

500                                     内部服务器错误,例如后台jsp处理文件语法错误

 

在使用readyState属性判断请求完成之后,可以使用status属性判断请求处理结果,在Ajax开发过程中,最为常见的响应代码为200,它表示请求处理成功, 例:

xmlhttp.onreadystatechange=function(){

        if(xmlhttp.readystate=4){

       //判断请求成功完成

       if(xmlhttp.status==200){

              //判断请求操作成功    

       }else{

       //操作错误或者未完成

}    

}

}

//以上代码是一个比较完整的XMLHttpRequest对象请求处理代码

使用responseText获得返回的文本

当服务器已经成功处理完请求之后,就可以使用XMLHttpRequest对象中的responseText属性来获取返回的文本或者html页面数据了,例如下面的一段html页面代码,该页面文件名为responsetText.html

<script language=”javascript”>

       var xmlhttp;

              try{

       xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”); //初始化IE浏览器

}catch(e){

       try{

       xmlhttp=new ActiveXObject(“Msxml2.XMLHTTP”); //初始化IE浏览器

}catch(e){

       try{

              xmlhttp=new XMLHttpRequest();               //初始化Mozilla浏览器

}catch(e){}

}

}

//下面定义XMLHttpRequest对象事件处理程序

Xmlhttp.onreadystatechange=function(){

        if(xml.readystate==4){

               if(xmlhttp.status==200){

                      var showHtml=xml.responseText;

                      alert(showHtml);

}else{

       alert(“处理错误”);

}

}

}

//创建一个请求连接

xmlhttp.open(“get”,”a.html”,true);

xmlhttp.send(null);

</script>

其中a.html页面代码如下:

<html>

<head><title>new Document</title></head>

<body>hello,ajax!</body>

</html>

运行responseText.html页面后,弹出的对话框会显示a.html中的所有内容(将a.html中的内容完整的显示出来,包括所有的标签和其他内容);

使用XMLHttpRequest对象中的responseText属性可以获取到请求页面的纯文本信息,而不经过任何处理,并不是每次都要求返回html页面代码,有时可以使用json数据格式来返回需要的数据.

 

 

使用responseXML属性来获取XML文档信息

除了可以使用responseText属性来获取纯文本信息之外,还可以使用其中的responseXML属性来获取服务器返回的XML文档对象,在使用responseText属性来获取返回的纯文本信息时,后台服务器是不需要进行额外操作的,但是responseXML属性不同,它需要服务器返回的必须是一个严格符合XML格式的文档,这就要求返回的HTTP头的content-type设置为text/xml.

获取的responseXML属性实际上是一个DOM文档对象模型所规定的文档对象,具有DOM模型的操作规范,这里将a.html改为a.xml,然后修改上面实例中的事件触发器函数代码,其他部分不需要修改.

 

xmlhttp.onreadystatechange=function(){

        if(xmlhttp.readyState == 4){

               if(xmlhttp.status==200){

       var xmlobj=xmlhttp.responseXML;

       var title=xmlobj.getElementByTagName(“title”)[0].text;

       alert(title);

}else{

       alert(“处理错误!”);

}

}

}

//重新运行该页面,则只会显示a.html中的 title 中的内容 new Document 

 

 

DOM文档对象模型

DOM全程为Document Object Module(文档对象模型),它定义了操作文档对象(例如XML文档)的接口,实际上DOM模型更多的是一个对象模型,它并不依赖于对象的结构,树形结构只是它其中的一个实现,DOM规定了每个对象具有哪些接口,例如添加节点,删除节点等,在Ajax中,通常使用这些接口来改变文档的状态,从而达到动态显示页面的目的.

选择的DOM模型主要有3个部分:

        核心:这部分包括最低层的文档操作接口,适合HTML和xml文档类型.

        HTML:这部分是针对HTML进行操作的接口

        XML:这部分是针对XML进行操作的接口

在Ajax中,DOM模型是非常重要的,是所有Ajax开发的基础结构,如果没有DOM模型,就没办法在客户端改变页面内容,没有掌握DOM模型的相关技术是不能真正掌握Ajax开发精髓的.

  

 

处理DOM中的节点

在DOM模型中引用一个节点对象可以有多种方法,其中包括:

 

        1. document.getElementById()引用指定id的节点
               在Html或者Xml中,每一个节点对象都可以定义一个id属性,但是每个节点定                   义的id属性必须在整个文档中是唯一的,另外可以使用document中的              getElementById()方法来获取到改节点对象,例如:

<html>

<head>

        <title>document.getElementById()方法</title>

        <script language=”javascript”>

               var divItem=document.getElementById(“div1”);

               alert(divItem.innerHTML);

        </script>

</head>

<body>

      <div id=”div1”>hello ajax!</div>

</body>

</html>

//该代码将输出id为”div1”的div节点对象中的文本信息

       2. document.getElementByTagName()引用指定标签名的节点对象

            使用document.getElementByTagName()可以返回某文档所有指定标签名的节点对象组,例:

<html>

<head>

        <title>document.getElementById()方法</title>

        <script language=”javascript”>

               var divItem=document.getElementByTagName(“div”);

               for(var i=0;i<divItem.length;i++)

               alert(divItem[i].innerHTML);

        </script>

</head>

<body>

      <div id=”div1”>hello ajax!</div>

      <div id=”div2”>hello ajax!</div>

</body>

</html>

//该代码将输出div 标签内的内容,因为存在两个节点div 所以需要使用循环来进行输出

间接引用节点对象

1.使用childNodes结合属性引用子节点

其实在javascript中,每个节点都有一个childNodes集合属性,它以数组形式存储着该节点下所有的子节点信息,这些子节点的顺序是按照在页面文档中出现的先后顺序排列的,因此可以通过数组索引来引用一个节点下的所有子节点对象,例如获取HTML文档根节点的代码如下:

               Document.childNodes[0]

               除了使用childNodes属性外,还可以使用firstChild和lastChild属性来获取第一个子节点和最后一个子节点对象

                      element.firstChild //获取element节点对象中的第一个子节点对象

                      element.lastChild  //获取element节点对象中的最后一个子节点对象

            例如:

<html>

<head>

        <title>document.getElementById()方法</title>

        <script language=”javascript”>

               var divItem=document.getElementById(“div1”);

               alert(divItem.firstChild.childNodes[0]);              //输出 Ajax1

               alert(divItem.firstChild.lastChild);              //输出 Ajax2

        </script>

</head>

<body>

      <div id=”div1”><span>Ajax1</span><span>Ajax2</span></div>

</body>

</html>

 

2.使用parentNode属性获取父节点

在类似于HTML文档结构中,除了根节点之外,每个节点都有一个唯一的父节点,并可以使用parentNode属性来获取,语法如下:

            element.parentNode

3.获取兄弟节点对象

定义在同一层次上的所有节点成为兄弟节点,使用下面的两个属性可以引用兄弟节点,具体语法如下:

               element.nextSibling              //引用上一个兄弟节点

               element.previousSibling        //引用下一个兄弟节点

 

获取节点信息

其实获取一个节点对象就是为了要获取该节点下的文本信息,具体方法如下:

            1.使用nodeName属性获取节点名称
          该属性语法如:      node.nodeName 但是针对不同的节点类型,nodeName属性将返回不同的值:

                      (a)元素节点:返回标签名称,例如对<span></span>,则返回”span”;

                      (b)属性节点:返回属性名称,例如 id=”span1”则返回”span1”.

                      (c)文本节点,返回文本内容

            2.使用nodeType属性获取节点类型

                      使用该属性的语法如下:node.nodeType 对应不同类型的节点,nodeType属性返回不同的值:

(a)    元素节点:返回1

(b)    属性节点:返回2

(c)    文本节点:返回3

3.使用nodeValue属性来获取节点的值:

                      该属性的语法如下: node.nodeValue 不同类型的节点返回不同的值:

(a)    元素节点: 返回null

(b)    属性节点: undefinded

(c)    文本节点: 返回文本内容

4.使用hasChildNodes()属性来判断该节点是否包含子节点

       该属性的语法如下: node.hasChildNodes()

       如果node节点有子节点,则返回true,否则返回false.

5.使用tagName属性返回某节点的标签名称

       该属性仅仅为元素类型的节点独有,与nodeName具有相同的返回值,即返回节点标签名

 

 处理属性节点

        1.获取和设置属性节点的值  例:

               <img id=”img1” src=”hello.jpg” alt=”demo”/>

               编写javascript 代码来操作此节点

               <script language=”javascript”>

                      var itemImg=document.getElementById(“img1”);//获取节点对象

                      alert(itemImg.src);        //输出节点对象中的src属性值

                             itemImg.src=”ok.jpg”; //设置节点对象中的src属性值

                      alert(itemImg.src); //将输出新的属性值,并且页面中的img图片也将更换;

               </script>

        2.使用setAttribute()方法添加一个新属性

               该方法的语法如下:

                      Element.setAttribute(attributeName,attributeValue);

               其中element为某一节点对象:attributeName为新添加的属性名,attributeValue为给新添加的attributeName属性设置的值

     3.使用getAttribute()方法来获取一个属性值

               该方法的语法代码如下:     

               Element.getAttribute(attributeName);

               其中element为某节点对象,attributeName为该节点对象的某个属性名.

 

处理文本节点

通过获取一个节点内的文本信息使用innerHTML属性,例如对于如下一节点:

      <span id=”span1”>hello,Ajax</span>

使用innerHTML属性获取该节点内的”hello,Ajax”文本信息的方法如下:

      Document.getElementById(“span1”).innerHTML;

其实,”hello,Ajax”这个文本信息也可以单独看做一个文本节点,因此可以通过通用的节点处理方法来获取它的值,具体代码如下:

            Document.getElementById(“span1”).childNodes[0].nodeValue;

      Document.getElementById(“span1”).childNodes[0]获取到”hello,Ajax”这个文本节点对象,然后再调用这个节点对象的nodeValue属性来获取值,

      但在有些情况下必须使用文本节点处理方法来获取一段文本信息,例:

      <div id=”div1”>

            <img src=”xx.gif” alt=”xx”/>

                   Hello,Ajax!

      </div>

      以上的div节点内包含了两个节点对象,一个是img属性节点,另外一个就是”Hello,Ajax” 文本节点,可以使用以下代码来获取文本信息

      document.getElementById(“div1”).childNodes[1].nodeValue;

 

注意:IE浏览器会忽略各标签之间的空白文本节点,而firefox浏览器则会认为标签之间的空白也是一个文本节点,所以尽量不要在各标签之间留空格

使用innerHTML属性修改节点的文本信息

<div id=”div1”> hello world</div>

 

<script language=”javascript”>

      Var itemDiv = document.getElementById(“div1”);

      itemDiv.innerHTML=”修改后的内容”;

</script>

 

执行完后,div中的 hello world 就变成了 “修改后的内容”

 

修改文档的层次结构

1.       使用document.createElement()方法创建一个元素节点
创建一个元素节点的语法
document.createElement(newElement)
其中newElement为要创建的节点标签名称:例:
var divElement=document.createElement(“div”);   //以上代码创建了一个标签名为div的节点对象

2.       使用document.createTextNode()方法创建文本节点
创建一个文本节点对象的语法如下
document.createTextNode(text);
其中text为文本信息,该方法返回的是一个文本节点对象,例:
var TextElement =document.createTextNode(“this is textNode”);
//创建了一个文本信息为”this is textNode”的文本节点对象,并赋值给TextElement变量

3.       使用appendChild方法在文档中添加已经创建好的节点
使用document.createElement()或者document.createTextNode()方法创建一个节点对象之后,还需要使用appendChild()方法将该节点添加到文档的适当位置,语法如下:  parentElement.appendChild(childElement);
其中parentElement为新创建节点childElement的父节点,即将childElement节点添加到parentElement节点的子节点中(排在最后)

4.       使用insertBefore()方法插入子节点
另外一个插入节点的方法是insertBefore(),该方法可以将节点插入到指定节点的前面,语法代码如下:
parentNode.insertBefore(newNode,referenceNode);
其中parentNode为新插入节点的父节点,newNode为待插入的新节点,referenceNode为父节点已经存在的节点,最终会把newNode节点插入到referenceNode节点的前面

5.       使用replaceChild方法取代子节点
语法如下:
parentNode.replaceChild(newNode,oldNode);
其中parentNode为父急诶但,newNode为待插入节点,oldNode是将被取代的节点,该方法将返回被取台的节点对象,但此时这个节点已经不存在于该文档中了

6.       使用cloneNode复制节点
在使用DOM进行节点操作时,有时会需要将一个节点复制到另外一个位置,这时,就会使用cloneNode()方法进行节点的复制操作,语法如下:
node.cloneNode(IsIncludeChildren);
其中node为被赋值节点对象,而IsIncludeChildren为一个布尔值类型,true表示也复制它所有的子节点,false表示不复制子节点.

7.       使用removeChild()方法删除一个子节点
该方法用来删除一个指定的节点对象,语法如下
parentNode.removeChild(childNode);
其中parentNode节点是需要删除节点的父节点对象,而childNode为将被删除的节点.

 

表格操作

1.            创建一个表格对象
创建一个表格对象的方法和生成其他节点对象的方法一样,语法如下:
var table=document.createElement(“table”);

2.            添加一行
添加一行的方法是调用表格对象(例如上面创建的table对象)的inserRow方法,var row1=table.insertRow(index);
其中index为插入表格table的指定索引,0表示第一行,1表示第二行,依次类推,如果没有指定索引,则IE浏览器会自动插入到表格的最后一行,而firefox浏览器会报错.

3.            添加一个单元格
添加单元格的方法是使用表格行(例如前面创建的row1)的inserRow方法,语法如下:           row1.insertRow(index);
其中,row1为表格行对象,index为插入表格行中的索引

4.            引用单元格方法
在DOM中可以根据表格某个单元格所在行和列的索引位置来引用某个单元格对象,然后在对其进行相应操作,引用一个单元格的语法如:
table.rows[i].cells[j];
其中,table为表格对象,i为行的索引值,j为单元格的索引位置,i和j都是从0开始的,与数组一样,当需要使用单元格中的文本信息时,同样是使用DOM中定义的innerHTML属性

5.            删除行和单元格的方法
删除一个表格中某一行的语法如下:
table.deleteRow(index);
其中,index为要删除行的索引位置,
删除一个表格中某一单元格的语法如下:
table.deleteCell(index);
其中,index为一个表格中某一个单元格的索引位置.

 

XML/JSON数据表示技术

例:

       创建放置在服务器端的data.text格式的数据

       Hello world!

       创建客户端的helloworld.htm文件,详细代码如下:

<html>

<head>

<title>

<script language=”javascript”>

       var xmlHttp;

       function createXMLHttpRequest(){

        if(window.ActiveXObject)

        xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);

}else if(window.XMLHttpRequest){

 xmlHttp=new XMLHttpRequest();

}

}

function startRequest(){

 createXMLHttpRequest();

 try{

     xmlHttp.onreadystatechange=handleStateChange;

     xmlHttp.open(“GET”,”data.text”,true);

     xmlHttp.send(null);

}catch(exception){

   alert(“您要访问的资源不存在”);

}

}

function handleStateChange(){

       if(xmlHttp.readyState==4){

              if(xmlHttp.status==200 || xmlHttp.status==0){

                     //显示返回结果

                     alert(“responseText’s value:”+xmlHttp.responseText);

}

}

}

</script>

</head>

<body>

<div>

       <input type=”button” value=”return ajax responseText’s value” οnclick=”startRequest();”>

</div>

              </body>

       </html>

       //运行此页面后,可以查看到data.text中的内容

 

用Ajax读取XML格式的数据

用Ajax读取XML格式的数据需要读取XMLHttpRequest对象返回的responseXML属性.

创建放置在服务器端的XML文件data.xml内容如下:

<?xml version=”1.0” encoding=”gb2312” ?>

<root>

       <info>hello word!</info>

</root>

创建客户端文件hellword.htm,详细代码如下:

 

<html>

<head>

<title>

<script language=”javascript”>

       var xmlHttp;

       function createXMLHttpRequest(){

        if(window.ActiveXObject)

        xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);

}else if(window.XMLHttpRequest){

 xmlHttp=new XMLHttpRequest();

}

}

function startRequest(){

 createXMLHttpRequest();

 try{

     xmlHttp.onreadystatechange=handleStateChange;

     xmlHttp.open(“GET”,”data.xml”,true);

     xmlHttp.send(null);

}catch(exception){

   alert(“您要访问的资源不存在”);

}

}

function handleStateChange(){

       if(xmlHttp.readyState==4){

              if(xmlHttp.status==200 || xmlHttp.status==0){

                     //取得xml的DOM对象

                     var xmlDOM=xmlHttp.responseXML;

                     //取得xml文档的根

                     var root=xmlDOM.documentElement;

                     try{

                     //取得<info>结果

                     var info=root.getElementByTagName(‘info’);

                     alert(“responseXML’s value:”+info[0].firstChild.data);

                     }catch(exception){

}

}

}

}

</script>

</head>

<body>

<div>

       <input type=”button” value=”return ajax responseXML’s value” οnclick=”startRequest();”>

</div>

              </body>

       </html>

       //运行此页面后,可以查看到data.xml中的内容

用Ajax读取JSON格式的数据

JSON全名为 Java Script Object Notaion ,是一种轻量级的数据交换格式,它是基于JavaScript规范开发出来的,与JavaScript形成完美组合,也可以说,它是JavaScript的一个子集,其目的就是形成一种便于阅读和解析的数据交换语言,它实际上是一种结构化的数据,充分利用了JavaScript语言的动态性以及对象定义的灵活性,使数据无需额外的解析就能够使用,JSON数据格式的编写非常简单.

创建服务器端的JSON数据格式文件data.txt,详细内容如下:

{

       info: “hello world!”,

       version: “2.0”

}

创建客户端文件helloworld.htm,详细内容如下:

<html>

<head>

<title>

<script language=”javascript”>

       var xmlHttp;

       function createXMLHttpRequest(){

        if(window.ActiveXObject)

        xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);

}else if(window.XMLHttpRequest){

 xmlHttp=new XMLHttpRequest();

}

}

function startRequest(){

 createXMLHttpRequest();

 try{

     xmlHttp.onreadystatechange=handleStateChange;

     xmlHttp.open(“GET”,”data.txt”,true);

     xmlHttp.send(null);

}catch(exception){

   alert(“您要访问的资源不存在”);

}

}

function handleStateChange(){

       if(xmlHttp.readyState==4){

              if(xmlHttp.status==200 || xmlHttp.status==0){

                     //取回返回字符串

                     var resp=xmlHttp.responseText;

                     var json=eval(resp);

                     alert(“JSON’s value:”+json.info+”(”+json.version+”v)”);

}

}

}

</script>

</head>

<body>

<div>

       <input type=”button” value=”return ajax JSON’s value” οnclick=”startRequest();”>

</div>

              </body>

       </html>

       //运行此页面后,可以查看到data.txt中的内容

 

发送HTTP请求

       在指定完onreadystatechange事件的处理函数之后,就可以调用XMLHttpRequest对象中的open()和send()方法来向服务器发送一个HTTP请求,具体语法如下:

       xmlhttp.open(‘get’,’http://www.example.com/check.jsp’,true);

       xmlhttp.send(null);

其中,open()方法的第一个参数用来定义HTTP请求类型,可以为get,post或者head,第二个参数是请求服务器的URL地址,基于安全的考虑,这个URL只能是同一个网域的,否则会给出”没有权限”的错误,第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的程序,如果设置为true,则不会继续执行,直到服务器返回信息为止,默认设置为true.

Open方法执行完之后,紧接着需要执行send方法,send方法是正式向服务器端发送请求,它只是一有一个参数,该参数指定需要传给服务器的数据().

如果像form表单那样传递数据文件时,则需要调用setRequestHeader()方法修改MIME类型,具体语法如下:

       Xmlhttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

处理服务器返回信息

处理服务器返回信息的代码写在onreadystatechange事件指定的函数内,在处理之前一般需要readystate属性以及status属性来判断响应状态,其中readystate属性为4时,表示服务器已经返回所有信息并可以开始处理返回数据了,语法如下:

if(xmlhttp.readyState==4)

              //信息已经返回,可以正式处理

       else

              //信息没有返回,等待

除了需要判断服务器端处理状态之外,还需要使用status属性来判断返回的http状态码,从而确认返回的页面或者数据没有错误,所有状态码都可以在W3C的官方网站上面查到,其中使用最多的是200,表示返回信息正常,基本判断语法如下:

       if(xmlhttp.status==200) {

              //返回数据正常,可以进行处理

}else{

       //数据有问题

}

使用XMLHttpRequest对象返回处理信息有两种方法:

1.       responseText : 将创汇的信息当成简单的字符串处理,一般需要返回txt文件,JSON数据或者html页面文件时使用,如果返回的JSON数据,则需要使用 eval() 方法对返回的数据进行处理.

       2.   responseXML : 将返回的信息作为xml文档处理,这时需要使用DOM进行解析.