IT源码网

ajax基础讲解

shasha 2021年05月16日 编程语言 193 0

一.  基础知识

(1)           概述:

XMLHttpRequest与服务器通信有两种方式:同步方式和异步方式。同步方式的调用非常简单,但是仅仅适用于数据量非常少的场合。如果数据量很大,会造成用户界面很长一段时间的停顿,这当然会损害Web应用的可用性。为了不影响可用性,Ajax应用中一般都使用异步方式来与服务器通信。用来设置同步和异步方式的是XMLHttpRequest对象的open方法的第3个参数,这个参数为true代表异步,为false代表同步。例如:

  xmlhttp.open("GET", "http://www.blogjava.net/dlee/Rss.aspx", true);

  如果是使用异步方式来进行通信,还需要设置一个回调函数,当数据返回时系统会调用这个回调函数。通过为XMLHttpRequest对象的onreadystatechange属性赋值来设置一个回调函数:

  xmlhttp.onreadystatechange=function() {...};

  此外,为了很好地支持中文和国际化,字符集一般都使用UTF-8,这可以通过调用XMLHttpRequest对象上的setRequestHeader方法来设置:

  

  当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态:一直等待直到请求被处理;然后,它才接收一个响应。这样以来,脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性:

  0 描述一种"未初始化"状态;此时,已经创建一个XMLHttpRequest对象,但是还没有初始化。

  1 描述一种"发送"状态;此时,代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。

  2 描述一种"发送"状态;此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。

  3 描述一种"正在接收"状态;此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。

  4 描述一种"已加载"状态;此时,响应已经被完全接收。

  System.xml.xmlDocument

  它的作用是解析xml文档,将其转换为对象,使你可以在程序中对其操作

  XmlDocument 成员请参见: http://msdn2.microsoft.com/zh-cn/library/system.xml.xmldocument_members(VS.80).aspx

  XMLHttpRequest对象的属性和事件

  XMLHttpRequest对象暴露各种属性、方法和事件以便于脚本处理和控制HTTP请求与响应。下面,我们将对此展开详细的讨论。

  readyState属性

  见上面

  onreadystatechange事件

  无论readyState值何时发生改变,XMLHttpRequest对象都会激发一个readystatechange事件。其中,onreadystatechange属性接收一个EventListener-向该方法指示无论readyState值何时发生改变,该对象都将激活。

  responseText属性

  这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为012时,responseText包含一个空字符串。当readyState值为3(正在接收)时,响应中包含客户端还未完成的响应信息。当readyState4(已加载)时,该responseText包含完整的响应信息。

 

 

(2)           常用的创建方法

 

 

               <script type="text/javascript">
function ajaxFunction()
 {
 var xmlHttp; 
 try
    {
   // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
 catch (e)
    {
  // Internet Explorer
   try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
   catch (e)
      {
      try
         {
         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
      catch (e)
         {
         alert("您的浏览器不支持AJAX");
         return false;
         }
      }
    }
 }
</script>
 

 

.XMLHttpRequest 对象的知识

在向服务器发送数据之前,我们有必要解释一下 XMLHttpRequest 对象的三个重要的属性。

1. onreadystatechange 属性

onreadystatechange 属性存有处理服务器响应的函数。下面的代码定义一个空的函数,可同时对 onreadystatechange 属性进行设置:

xmlHttp.onreadystatechange=function()

  {

  // 我们需要在这里写一些代码

  }

2. readyState 属性

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange 函数就会被执行。

这是 readyState 属性可能的值:

状态

描述

0

请求未初始化(在调用 open() 之前)

1

请求已提出(调用 send() 之前)

2

请求已发送(这里通常可以从响应得到内容头部)

3

请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)

4

请求已完成(可以访问服务器响应并使用它)

我们要向这个 onreadystatechange 函数添加一条 If 语句,来测试我们的响应是否已完成(意味着可获得数据):

xmlHttp.onreadystatechange=function()

  {

  if(xmlHttp.readyState==4)

    {

    // 从服务器的response获得数据

    }

  }

3. responseText 属性

可以通过 responseText 属性来取回由服务器返回的数据。

在我们的代码中,我们将把时间文本框的值设置为等于 responseText

xmlHttp.onreadystatechange=function()

  {

  if(xmlHttp.readyState==4)

    {

    document.myForm.time.value=xmlHttp.responseText;

    }

  }

 4. responseXML属性

  此responseXML属性用于当接收到完整的HTTP响应时(readyState4)描述XML响应;此时,Content-Type头部指定MIME(媒体)类型为text/xmlapplication/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一,那么responseXML的值为null。无论何时,只要readyState值不为4,那么该responseXML的值也为null。 其实,这个responseXML属性值是一个文档接口类型的对象,用来描述被分析的文档。如果文档不能被分析(例如,如果文档不是良构的或不支持文档相应的字符编码),那么responseXML的值将为null

 5. status属性

  这个status属性描述了HTTP状态代码,而且其类型为short。而且,仅当readyState值为3(正在接收中)4(已加载)时,这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。

 6. statusText属性

  这个statusText属性描述了HTTP状态代码文本;并且仅当readyState值为34才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。 


发布评论
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

关于frameset的使用初步讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。