版权声明：本文为博主原创文章，未经博主同意不得转载。 https://blog.csdn.net/zhanghongjie0302/article/details/31432939

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

         首先来了解一个这个对象: XMLHttpRequest对象能够在不向server提交整个页面的情况下，实现局部更新网页。当页面全部载入完毕后，client通过该对象向server请求数据，server端接受数据并处理后。向client反馈数据。

XMLHttpRequest 对象提供了对 HTTP 协议的全然的訪问。包含做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 能够同步或异步返回 Web server的响应，而且能以文本或者一个
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="../common.js"></script>

    <script type="text/javascript">

        var xmlhttp;

        function submit() {

            //获取要验证的值

            var username = document.getElementById("username").value;

            if (username == "" || username == null) {

                console.info(username);

                alert("请输入要进行验证的数据！");

                return;

            }

            var xmlhttp;

            if (window.XMLHttpRequest) {

                //创建一个XMLHttpRequest对象的实例

                xmlhttp = new XMLHttpRequest();    //适用于ie7, ie8 ,firefox 浏览器

                //针对某些特定版本号的mozillar浏览器的BUG进行修正

                if (xmlhttp.overrideMimeType) {

                    xmlhttp.overrideMimeType("text/xml");

                }

                //全部的浏览器这个验证都能通过！

放在下边为了提高性能

            } else if (window.ActiveXObject) {

                //ie5,ie6。ie7, ie8 ,firefox 浏览器 等等

                var activexName = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];

                for (var i = 0; i < activexName.length; i++) {

                    try {

                        xmlhttp = new ActiveXObject(activexName[i]);

                        break;

                    } catch (e) {

                    }

                }

            }

            //假设创建不成功。则说明该浏览器不支持xmlHttpRequest

            if (xmlhttp == undefined || xmlhttp == null) {

                alert("该浏览器不支持xmlHttpRequest");

                return;

            }

            //注冊该对象的回调函数（后台返回来的数据！）   注意：仅仅须要函数名，不要加括号

            xmlhttp.onreadystatechange = callback;

            ////GET方式

            //xmlhttp.open("GET", "yz.ashx=" + username, true);

            ////发送数据

            //xmlhttp.send(null);

            // 设置和server端交互的对应參数

            xmlhttp.open("POST", "yz.ashx", true);

            //表示client提交给server文本内容的编码方式 是URL编码，即除了标准字符外。每字节以双字节16进制前加个“%”表示,

            //当然还有其它编码方式,如：CONTENT-TYPE:multipart/form-data .

            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            //post方式进行提交数据！

xmlhttp.send("username=" + username);

            //回调函数, 数据返回后在这个函数中进行处理！

            function callback() {

                //推断对象的状态是交互完毕 ,推断http的交互是否成功

                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                    //接受server返回的数据

                    var message = xmlhttp.responseText;

                    var div = document.getElementById("message");

                    div.innerHTML = message;

                    alert(message);

                }

            };

        }

    </script>

</head>

<body>

    <div>

        <input id="username" type="text" />

        <input type="button" id="submit" onclick="submit()" value="Ajax验证" />

        <div id="message">

        </div>

    </div>

</body>

</html>

       后台代码：

       

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.设置和server端交互的对应參数      用open方法

         4.设置server端发送数据。 启动和server端交互     send 发送

         5.推断server端的交互是否完毕。 server端是否正确放回了数据

        是不是对XmlHttpRequest对象的使用方法掌握了一些。可是假设我们想更加透彻的了解这个对象，那还要了解这个对象的其它属性及方法。

 

属性：

readyState

       HTTP
请求的状态.当一个 XMLHttpRequest初次创建时。这个属性的值从 0開始。直到接收到完整的
HTTP响应。这个值添加到 4。5
个状态中每个都有一个相关联的非正式的名称。下表列出了状态、名称和含义：

   

 状态

名称

描写叙述

0

Uninitialized

初始化状态。XMLHttpRequest对象已创建或已被 abort()方法重置。

1

Open

open() 方法已调用。可是 send()方法未调用。请求还没有被发送。

2

Send

Send() 方法已调用。HTTP请求已发送到 Web
server。未接收到响应。

3

Receiving

全部响应头部都已经接收到。

响应体開始接收但未完毕。

4

Loaded

HTTP 响应已经全然接收。

 readyState的值不会递减。除非当一个请求在处理过程中的时候调用了
abort()或 open()方法。

每次这个属性的值添加的时候，都会触发
onreadystatechange事件句柄。

responseText

        眼下为止从server接收到的响应体（不包含头部），或者假设还没有接收到数据的话，就是空字符串。

假设 readyState小于 3，这个属性就是一个空字符串。当
readyState为 3。这个属性返回眼下已经接收的响应部分。假设 readyState为
4，这个属性保存了完整的响应体。

假设响应包含了为响应体指定字符编码的头部，就使用该编码。

否则。假定使用
Unicode UTF-8。

responseXML

       对请求的响应。解析为 XML并作为 Document对象返回。假设响应体不是“text/xml”返回null。

status

        由server返回的 HTTP 状态代码，如
200 表示成功，而 404表示 "NotFound"错误。当 readyState小于
3 的时候读取这一属性会导致一个异常。

statusText

        这个属性用名称而不是数字指定了请求的 HTTP的状态代码。也就是说，当状态为
200 的时候它是 "OK"。当状态为 404的时候它是 "NotFound"。和
status属性一样，当 readyState小于 3
的时候读取这一属性会导致一个异常。

 

方法：

abort()

       取消当前响应，关闭连接而且结束不论什么未决的网络活动。这种方法把 XMLHttpRequest对象重置为
readyState为 0的状态，而且取消全部未决的网络活动。比如，假设请求用了太长时间，而且响应不再必要的时候。能够调用这种方法。

getAllResponseHeaders()

        把 HTTP响应头部作为未解析的字符串返回。假设
readyState小于 3，这种方法返回 null。否则。它返回server发送的全部
HTTP 响应的头部。头部作为单个的字符串返回，一行一个头部。

每行用换行符 ""隔开。

getResponseHeader()

        返回指定的 HTTP响应头部的值。其參数是要返回的 HTTP响应头部的名称。

能够使用不论什么大写和小写来制定这个头部名字。和响应头部的比較是不区分大写和小写的。

该方法的返回值是指定的
HTTP响应头部的值。假设没有接收到这个头部或者 readyState小于
3则为空字符串。假设接收到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。

open()

       初始化 HTTP请求參数。比如 URL和
HTTP 方法。可是并不发送请求。

send()

       发送 HTTP请求，使用传递给 open()方法的參数。以及传递给该方法的可选请求体。

setRequestHeader()

       向一个打开但未发送的请求设置或加入一个 HTTP请求。

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

 

Ajax系列之二：核心对象XMLHttpRquest的更多相关文章

  1. 深入理解ajax系列第一篇——XHR对象

    × 目录 [1]创建对象 [2]发送请求 [3]接收响应[4]异步处理[5]实例演示 前面的话 ajax是asynchronous javascript and XML的简写,中文翻译是异步的java ...

  2. ASP.NET之Ajax系列（二）

    在上一次的Ajax操作中,我们使用了ASP.NET原生控件实现,但是弊端很多,效率低下,而且有个文件上传的BUG:http://blog.csdn.net/zhaoqiliang527/article ...

  3. JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  4. 我心中的ASP.NET Core 新核心对象WebHost（二）

    这是ASP.NET Core新核心对象系列的第二篇,上一篇 WebHost准备阶段 我们讲到了WebHostBuilder的初始化及配置.我们给WebHostBuilder进行以下配置 UseKest ...

  5. Ajax的核心对象创建步骤

    * Ajax具有核心对象 * XMLHttpRequest对象 * 如何创建XMLHttpRequest对象 function getXhr(){ // 声明XMLHttpRequest对象 var ...

  6. ASP.NET Ajax核心对象

    本章学习目标 主要掌握AJAX的基本概念和实现机制,学习并创建XMLHttpRequest对象,使用XMLHttpRequestObject对象获取服务器端的数据 主要内容如下,请点击ASP.NET ...

  7. 玩转webpack（二）：webpack的核心对象

    欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 作者介绍:陈柏信,腾讯前端开发,目前主要负责手Q游戏中心业务开发,以及项目相关的技术升级.架构优化等工作. 前言 webpack 是一个强大的模 ...

  8. Asp.Net WebApi核心对象解析（二）

    在接着写Asp.Net WebApi核心对象解析(下篇)之前,还是一如既往的扯扯淡,元旦刚过,整个人还是处于晕的状态,一大早就来处理系统BUG,简直是坑爹(好在没让我元旦赶过来该BUG),队友挖的坑, ...

  9. 深入理解 ajax系列第一篇（XHR 对象）

    1999年,微软公司发布了IE5, 第一次引入新功能:允许javascript 脚本向服务器发起 hffp 请求.这个功能方式并没有被引起注意,知道2004年 Gmail 发布和 Google Map ...

随机推荐

  1. Spring Cloud Config-Client 无法获取 Config-Server 在 github 上的配置文件的属性值，竟然是因为

    Spring Cloud Config-Client 无法获取 Config-Server 在 github 上的配置文件的属性值,竟然是因为!!! 2018年07月23日 16:33:25 一颗很菜 ...

  2. 玩转xargs

    xargs命令可以把标准输入数据转换成命令行参数.也可以将单行或多行文本输入转换成其他格式,是构建单行命令的重要组件之一. xargs命令应该紧跟在管道操作符之后,以stdin作为主要的源数据流,使用 ...

  3. Odoo QWeb

    1.web 模块 注意,OpenERP 模块中 web 部分用到的所有文件必须被放置在模块内的 static 文件夹里.这是强制性的,出于安全考虑. 事实上,我们创建的文件夹 CSS,JS 和 XML ...

  4. Odoo Documentation : Fields

    Fields Basic fields class openerp.fields.Field(string=None, **kwargs) The field descriptor contains ...

  5. Ionic 微信支付

    1.安装插件 ionic plugin add https://github.com/mrwutong/cordova-qdc-wxpay.git 2.代码 controller.js angular ...

  6. JS创建和存储 cookie的一些方法

    在js中cookie的操作与存储及清除cookie都与时间有关,我们只要把cookie过期时间进行有效的设置我们就可以控制它的存储了,下面我来给大家总结一下js中cookie的一些使用技巧 创建和存储 ...

  7. python 日记 day4

    1.为何数据要分类 数据是用来表示状态的,不同的状态应该用不同类型的数据来表示. 2.数据类型 数字 字符串 列表 元组 字典 集合 列表:列表相比于字符串,不仅可以储存不同的数据类型,而且可以储存大 ...

  8. Ceisum官方教程3 -- 空间数据可视化

    原文地址:https://cesiumjs.org/tutorials/Visualizing-Spatial-Data/ 这篇教程教你如何使用Cesium的Entity API去绘制空间数据,如点, ...

  9. PAT甲级——A1015 Reversible Primes

    A reversible prime in any number system is a prime whose "reverse" in that number system i ...

  10. java连接达梦数据库的简单代码

    1. 引用DmJdbcDriver.jar包 2. 编写代码: String driver= "dm.jdbc.driver.DmDriver"; String url= &quo ...