首页 > 代码库 > XmlHttpRequest 对象的用法

XmlHttpRequest 对象的用法

2024-07-07 04:08:48   226人阅读

XMLHttpRequest对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。当页面全部加载完毕后，客户端通过该对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能

1.创建对象

不同的浏览器使用不同的方法来创建XmlHtttpRequest

IE 使用ActiveXObject 其他浏览器使用的是XMLHttpRequest的JavaScript的内建对象

var XMLHttp=null;
if (window.XMLHttpRequest)
{
XMLHttp=new XMLHttpRequest()
}else if (window.ActiveXObject)
{
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
代码解释：
  1. 首先创建一个作为 XMLHttpRequest 对象使用的 XMLHttp 变量。把它的值设置为 null。
  2. 然后测试 window.XMLHttpRequest 对象是否可用。在新版本的 Firefox, Mozilla, Opera 以及 Safari 浏览器中，该对象是可用的。
  3. 如果可用，则用它创建一个新对象：XMLHttp=new XMLHttpRequest()
  4. 如果不可用，则检测 window.ActiveXObject 是否可用。在 Internet Explorer version 5.5 及更高的版本中，该对象是可用的。
  5. 如果可用，使用它来创建一个新对象：XMLHttp=new ActiveXObject()

改进的例子

一些程序员喜欢使用最新最快的版本的 XMLHttpRequest 对象。

下面的例子试图加载微软最新版本的 "Msxml2.XMLHTTP"，在 Internet Explorer 6 中可用，如果无法加载，则后退到 "Microsoft.XMLHTTP"，在 Internet Explorer 5.5 及其后版本中可用。

function GetXmlHttpObject()
{
var xmlHttp=null;

try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}
代码解释：
  1. 首先创建用作 XMLHttpRequest 对象的 XMLHttp 变量。把它的值设置为 null。
  2. 按照 web 标准创建对象 (Mozilla, Opera 以及 Safari)：XMLHttp=new XMLHttpRequest()
  3. 按照微软的方式创建对象，在 Internet Explorer 6 及更高的版本可用：XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")
  4. 如果捕获错误，则尝试更老的方法 (Internet Explorer 5.5) ：XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

 

2.XmlHttpRequest对象的方法

方法 描述
abort() 停止当前请求
getAllResponseHeaders()

把HTTP请求的所有响应首部作为键/值对返回

getAllResponseHeaders(head_name)

返回指定首部的串值

open(method,url，asynch)

 建立对服务器的调用。Method参数可以是get或者post。url参数可以是相对url或绝对url。asnych参数是一个布尔值，true为异步方式，false为同步方式。默认为true

send(string)

向服务器发送请求

string：仅用于POST请求

setRequestHeader(head_name,value)

把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()

GET还是POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

  • 无法使用缓存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（POST 没有数据量限制）
  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

3.XmlHttpRequest对象的属性

属性

描述

onreadystatechange

每个状态改变时都会触发这个事件处理器，通常会调用一个javascrpt函数

readyState

请示的状态。有5个可取的值：

０：未初始化

１：正在加载

２：已加载

３：交互中

４：完成

responseText

服务器的响应，表示为一个字符串

responseXML

服务器的响应，表示为XML。这个对象可以解析为一个DOM对象

status

服务器的HTTP状态码。

200对应OK

404对应Not Found(未找到)

statusText

HTTP状态码的相应文本(OK或Not Found(未找到))

例：

前台关键代码

function getJson() {
            //创建xmlHttpRequest对象，不考虑浏览器兼容性问题
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.open("GET", "GetJson.ashx");
            //利用Get提交方式不需要向服务器端提交数据
            xmlHttp.send(null);
            //监听服务器端请求状态的改变事件
            xmlHttp.onreadystatechange = function() {
                //客户端与服务器端交互完成，服务器端返回数据给客户端
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    //获取服务器端返回的JSON对象
                    var list = eval(xmlHttp.responseText);
                    //循环遍历JSON对象
                    for (var i = 0; i < list.length; i++) {
                        str += "<li>学号:" + list[i].stuNo + "姓名:" + list[i].stuName + "</li>";
                    }
                    str += "</ul>";
                }
                document.getElementById("msg").innerHTML = str;
                str = ""; //清空str接受的值
            }
        }
后台关键代码
//创建数据上下文对象
        private DBDataContext db = new DBDataContext();

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            db.DeferredLoadingEnabled = false;
            var list = db.GetTable<stuInfo>().ToList();
            JavaScriptSerializer js = new JavaScriptSerializer();
            context.Response.Write(js.Serialize(list));
        }

参考：XMLHttpRequest


联系
我们