首页 > 代码库 > Ajax系列之二：核心对象XMLHttpRquest

Ajax系列之二：核心对象XMLHttpRquest

2024-07-08 13:25:41   215人阅读

         上一篇文章介绍了ajax的基础知识，这篇文章通过一个简单的用户验证的小例子来给大家讲解一下！

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

         XMLHttpRequest得到了所有现代浏览器较好的支持。唯一的浏览器依赖性涉及 XMLHttpRequest 对象的创建。在 IE 5 和 IE 6 中，必须使用特定于 IE 的 ActiveXObject() 构造函数。

        

下边来看一下这个小例子：

       前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="verifyUserName.aspx.cs" Inherits="VerifyUserName.verifyUserName" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title></title>
    <script src=http://www.mamicode.com/"../common.js"></script>>
       后台代码：
       
public class yz : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Charset = "charset=gb2312";   //指定编码格式
			
			//获取参数值
            string oldString = context.Request.Params["username"].ToString();
            //string oldString = context.Request.QueryString["username"].ToString();

            if (oldString=="")
            {
                context.Response.Write("用户名不允许为空！");
                return;
            }
            if (oldString == "张宏杰")
            {
                context.Response.Write("用户名已经存在");

            }
            else
            {
                context.Response.Write("用户名不存在可以使用");
            }
           
        }
 验证结果如图：
         通过上边这个例子可以看出xmlHttpRequest的使用是按照步骤来的！
         使用该对象的5步：
         1.创建该对象
         2. 注册回调方法 
         3.设置和服务器端交互的相应参数      用open方法 
         4.设置服务器端发送数据， 启动和服务器端交互     send 发送
         5.判断服务器端的交互是否完成， 服务器端是否正确放回了数据

        是不是对XmlHttpRequest对象的用法掌握了一些。但是如果我们想更加透彻的了解这个对象，那还要了解这个对象的其他属性及方法。
 
属性：
readyState
       HTTP 请求的状态.当一个 XMLHttpRequest初次创建时，这个属性的值从 0开始，直到接收到完整的 HTTP响应，这个值增加到 4。5个状态中每一个都有一个相关联的非正式的名称，下表列出了状态、名称和含义：
    
 状态
名称
描述
0
Uninitialized
初始化状态。XMLHttpRequest对象已创建或已被 abort()方法重置。
1
Open
open() 方法已调用，但是 send()方法未调用。请求还没有被发送。
2
Send
Send() 方法已调用，HTTP请求已发送到 Web服务器。未接收到响应。
3
Receiving
所有响应头部都已经接收到。响应体开始接收但未完成。
4
Loaded
HTTP 响应已经完全接收。
 readyState的值不会递减，除非当一个请求在处理过程中的时候调用了 abort()或 open()方法。每次这个属性的值增加的时候，都会触发 onreadystatechange事件句柄。
responseText
        目前为止从服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。
如果 readyState小于 3，这个属性就是一个空字符串。当 readyState为 3，这个属性返回目前已经接收的响应部分。如果 readyState为 4，这个属性保存了完整的响应体。
如果响应包含了为响应体指定字符编码的头部，就使用该编码。否则，假定使用 Unicode UTF-8。
responseXML
       对请求的响应，解析为 XML并作为 Document对象返回。如果响应体不是“text/xml”返回null。
status
        由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404表示 "NotFound"错误。当 readyState小于 3 的时候读取这一属性会导致一个异常。
statusText
        这个属性用名称而不是数字指定了请求的 HTTP的状态代码。也就是说，当状态为 200 的时候它是 "OK"，当状态为 404的时候它是 "NotFound"。和 status属性一样，当 readyState小于 3的时候读取这一属性会导致一个异常。
 
方法：
abort()
       取消当前响应，关闭连接并且结束任何未决的网络活动。这个方法把 XMLHttpRequest对象重置为 readyState为 0的状态，并且取消所有未决的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。
getAllResponseHeaders()
        把 HTTP响应头部作为未解析的字符串返回。如果 readyState小于 3，这个方法返回 null。否则，它返回服务器发送的所有 HTTP 响应的头部。头部作为单个的字符串返回，一行一个头部。每行用换行符 ""隔开。
getResponseHeader()
        返回指定的 HTTP响应头部的值。其参数是要返回的 HTTP响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。该方法的返回值是指定的 HTTP响应头部的值，如果没有接收到这个头部或者 readyState小于 3则为空字符串。如果接收到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。
open()
       初始化 HTTP请求参数，例如 URL和 HTTP 方法，但是并不发送请求。
send()
       发送 HTTP请求，使用传递给 open()方法的参数，以及传递给该方法的可选请求体。
setRequestHeader()
       向一个打开但未发送的请求设置或添加一个 HTTP请求。

        通过上边的讲解，你是不是已经可以自己使用xmlHttpRequest对象进行交互了呢？赶快去体验异步交互给你带来的极致享受吧。
 


联系
我们