Ajax学习(三)——XMLHttpRequest对象的五步使用法

    Ajax的核心技术是XMLHttpRequest对象,它可以在不向服务器提交整个页面的情况下,实现局部更新网页。通过这个对象,Ajax可以像桌面应用程序那样只与服务器进行数据层的交换,而不必每次都刷新界面,也不必每次将数据处理的工作都交给服务器来做。这样既减轻了服务器负担又提高了响应速度,还缩短了用户的等待时间。通常一个Ajax的实现过程有五步,下面我们以上篇博客中的小实例为例来逐步学习。

1.建立XMLHttpRequest对象。

IE浏览器将XMLHttpRequest实现为一个ActiveX对象,其他浏览器如Firefox,Opera,Netscape等将其实现为一个本地javascript对象,IE7.0及以上版本这两种创建方式都支持

 //定义用户存储XMLHttpRequest对象的变量
        var xmlHttp = null;
        //创建XMLHttpRequest对象
        function creatXMLHTTP()
        {
            //判断浏览器是否支持ActiveX控件,针对IE6及之前版本
            if (window.ActiveXObject)
            {
                //将所有可能出现的ActiveXObject版本都放在一个数组中
                var arrXmlHttpTypes = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
                //通过循环创建XMLHttpRequest对象
                for (var i=0;i<arrXmlHttpTypes.length;i++)
                {
                    try
                    {
                        //创建XMLHttpRequest对象
                        xmlHttp = new ActiveXObject(arrXmlHttpTypes[i]);
                        //如果创建XMLHttpRequest对象成功,则跳出循环
                        break;
                    }
                    catch(ex)
                    {
                        //如果创建不成功,则从数组中取出下一个版本继续创建
                    }
                }
            }
            //判断浏览器是否将XMLHttpRequest作为本地对象实现,针对IE7及以上,Firefox,Opera等浏览器
            else if(window.XMLHttpRequest)
            {
                xmlHttp = new XMLHttpRequest();
            }
        }

  //创建XMLHttpRequest对象,调用前面定义好的函数
            creatXMLHTTP();

            if (xmlHttp!=null)
            {
                //创建响应XMLHttpRequest对象状态变化的函数

                //创建http请求

                //发送http请求

            }
            else
            {
                alert("您的浏览器不支持XMLHTTP");
            }

2.注册回调函数。

   //创建响应XMLHttpRequest对象状态变化的函数
                xmlHttp.onreadystatechange = httpStateChange;
在异步调用时,XMLHttpRequest对象有几个不同的状态,这些状态表示了异步调用的过程。
0:未初始化状态,刚创建完一个XMLHttpRequest对象;
1:初始化状态,即XMLHttpRequest对象已经获得了要将数据发送到哪个服务器上、以什么方式发送等信息;
2:发送状态,XMLHttpRequest开始发送数据;
3:数据传送状态,此时XMLHttpRequest正在接受从服务器端返回的数据,但是数据还没有传送完毕;
4:完成状态:此时XMLHttpRequest对象已经将从服务器端返回的数据接受完毕。

使用XMLHttpRequest对象的onreadystatechange属性,可以设置响应XMLHttpRequest对象状态变化的函数。

设置回调函数时,不要在函数名后而加括号。加括号表示将回调函数的返回值注册给onreadystatechange属性。




3.使用open方法设置和服务器端交互的基本信息。

 //创建http请求
                xmlHttp.open("get","userName.txt", true);

XMLHttpRequest的open(method,URL,flag,name,password)方法用来初始化对象,后三个参数是可选的。

method:指定用什么方式向服务器发送http请求,参数值可以是get,post,head,put和delete五种。

URL:指定服务器的URL,也就是用户处理和返回数据的程序的URL。该URL可以是绝对地址,也可以是相对地址。

flag:指定提交http请求的方式,true指异步方式,为默认值;false指同步方式。

name和password:如果服务器需要验证,这两个参数用来提交用户名和密码。

4.设置发送的数据,开始和服务器端交互。

  //发送http请求
                xmlHttp.send(null);

发送http请求使用XMLHttpRequest的send(data)方法,data参数就是传递给open()方法中URL参数所指定的文件的参数。若果要传递多个参数,用"&"来分隔,不需要传递参数写"null"。

5.在回调函数中判断交互是否结束,响应是否正确,并根据需要获取服务器端返回的数据,更新页面内容。

1)判断异步调用是否成功:

if (xmlHttp.readyState==4)//异步调用完毕
{
      if (xmlHttp.status==200 || xmlHttp.status==0)//异步调用成功||在本机上调试
      {
       }
}

readyState属性值为4,说明异步调用完成,但并不代表异步调用执行成功。XMLHttpRequest的status属性可以获得从服务器返回的状态码。0代表不能理解的http状态,通常只有在本地计算机打开文件时才会返回。比较常用的http状态码有以下三个:

200:服务器成功返回网页。

404:客户端请求的网页不存在。

503:服务器响应超时。

2)获得服务器返回的数据:

<span style="font-family:SimSun;font-size:18px;"><strong> var userNames = xmlHttp.responseText;</strong></span>

异步调用的最终目的是接收从服务器返回的数据,并根据该数据决定如何显示在客户端网页中。异步调用成功后,XMLHttpRequest对象通过使用以下4个属性来获得服务器返回的数据。

responseText:表示将服务器返回的数据以字符串形式返回。

responseXML:表示以XML的形式返回。

responseBody:表示以unsigned byte数组的形式返回。

responseStream:表示以IStream对象的形式返回。

3)局部更新:

<span style="font-family:SimSun;font-size:18px;"><strong>//查找用于显示提示信息的节点
var node = document.getElementById("myDiv");
//更新数据
node.firstChild.nodeValue = text;</strong></span>

获取服务器返回的数据之后就要显示出来。Ajax通过DOM来完成局部更新数据。

   

    在Ajax编程中离不开对XMLHttpRequest对象的使用,每次使用都是做这五步工作。面对重复的事情我们就要想办法了。由于这项编程步骤比较固定现在已经被封装好了,从而使代码重用,简化编程。但是想要成为一名优秀的程序员,还是有必要了解一下这五个步骤。

时间: 2024-10-15 12:29:35

Ajax学习(三)——XMLHttpRequest对象的五步使用法的相关文章

AJAX--XMLHttpRequest五步使用法

传统浏览方式和AJAX方式的不同 多数Web应用程序都使用请求/响应模型从服务器上获得完整的HTML页面.常常是点击一个按钮,等待服务器相应,在点击另一个按钮,然后在等待,这样一个反复的过程. 而AJAX是一种创建交互式网页的网页开发技术,其中XMLHttpRequest是核心的内容,它能够为页面中的javascript脚本提供特定的通信方式,从而使页面的javascript脚本和服务器之间形成动态交互的效果,XMLHTTPRequest的最大的优点是页面内的javascript脚本可以不用刷新

nodejs学习三 process对象

rocess对象,我说的是对象.这个对象包含的方法和属性非常的多,它向我们打开了一个通往Node.js的大门,让我们队Node.js有更多的了解. 你知道安装的Node.js的版本吗? 你知道你的Node安装在上面平台下吗? 你知道你的Node可执行文件的绝对路径吗? 你想得到你env环境变量内容吗? 上面输入的信息你可以更具体点,比如console.log(process.env.OS) 你想得到命令行上的参数吗? 好了,下面我们来写一个js.命名process.js 在命令行上运行它: 我们

325 AJAX介绍,XMLHttpRequest对象,实现Ajax的异步交互步骤,服务器端通信状态

* Asynchronous JavaScript and Xml \* 直译中文 - javascript和XML的异步 \* (不严格的定义)客户端与服务器端进行交互,而无需刷新当前页面的技术,称之为Ajax. * Ajax实现的是B/S架构下的异步交互 * 实现异步交互的技术: \* <iframe src="">元素 * 同步与异步的区别 * 同步交互 \* 执行速度相对比较慢 \* 响应的是完整的HTML页面 * 异步交互 \* 执行速度相对比较快 \* 响应的是

AJAX中的XMLHttpRequest对象

主要作用:在后台与服务器交换数据,这样就可以实现部分的更新数据,不需要重新的加载页面. 像所有的对象一样,XMLHttpRequest也有自己的属性和方法,这些属性和方法实现该对象的功能. XMLHttpRequest对象的使用分为五步 其中涉及到了很多该对象的属性和方法,我们来一步一步的看看 1.             创建 虽然XMLHttpRequest对象在所有的浏览器上都兼容,但是在不同的浏览器上的创建是不一样的. //1.创建XMLHttpRequest对象 if(window.X

Ajax核心技术之XMLHttpRequest对象

XMLHttpRequest对象到底是什么?跟Ajax到底有什么联系?在了解它之前还是要先了解一下Ajax的功能.与以往的技术不同,Ajax是为了实现异步操作. 那么关于异步,好像一个管理者安排好一个项目计划后,将这个项目交给下属去做,而自己再继续做自己应该做的其他的事儿.在下属去完成这个项目的过程中,并不影响此管理者的工作状态或者进程.只是等到项目完成交付时,管理者进行验收即可.那么这里的下属在异步操作中就相当于下图中的Ajax引擎,为了方便理解,也可以直接理解为XMLHttpRequest对

Ajax中的XMLHttpRequest对象详解(转)

XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求的技术.后来Mozilla.Netscape.Safari.Firefox和其他浏览器也提供了XMLHttpRequest类,虽然这些浏览器都提供了XMLHttpRequest类,但它们创建XMLHttpRequest类的方法并不相同.XMLHttpRequest使我们可以使用JavaScript向

Ajax中的XMLHttpRequest对象详解

XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求的技术.后来Mozilla.Netscape.Safari.Firefox和其他浏览器也提供了XMLHttpRequest类,虽然这些浏览器都提供了XMLHttpRequest类,但它们创建XMLHttpRequest类的方法并不相同.XMLHttpRequest使我们可以使用JavaScript向

ajax原理和XmlHttpRequest对象

  Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得请求数据.要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解. XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术.简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户.达到无刷新的效果. 所以我们先从XMLHt

AJAX原理及XMLHttpRequest对象分析

今天的主题是前端都了解的AJAX,但其中都有哪些知识点,还需要深入分析. 首先揭示AJAX的字面意思,Asynchronous Javascript And XML,通俗点就是“异步Javascript和XML”. 那有同步的吗?曾经的form提交并转到另一个页面刷新就是这种‘同步’的案例,有了AJAX后,便可以实现网页不提交(刷新)更新网页内容. 其实质便是依赖异步的Javascript请求网络,响应返回后,通过Javascript操作DOM接口更新HTML节点内容. 而这个能够实现异步的Ja