首页 > 其他 > 详细

XmlHttpRequest 对象的用法

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

1.创建对象

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

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

bubuko.com,布布扣
var XMLHttp=null;
if (window.XMLHttpRequest)
{
XMLHttp=new XMLHttpRequest()
}else if (window.ActiveXObject)
{
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
bubuko.com,布布扣
代码解释:
  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 及其后版本中可用。

bubuko.com,布布扣
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;
}
bubuko.com,布布扣
代码解释:
  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个可取的值:

0:未初始化

1:正在加载

2:已加载

3:交互中

4:完成

responseText

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

responseXML

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

status

服务器的HTTP状态码。

200对应OK

404对应Not Found(未找到)

statusText

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

例:

前台关键代码

bubuko.com,布布扣
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接受的值
            }
        }
bubuko.com,布布扣
后台关键代码
bubuko.com,布布扣
//创建数据上下文对象
        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));
        }
bubuko.com,布布扣

参考:XMLHttpRequest

XmlHttpRequest 对象的用法,布布扣,bubuko.com

XmlHttpRequest 对象的用法

原文:http://www.cnblogs.com/mynewstart/p/3770139.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!