博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Ajax系列之二:核心对象XMLHttpRquest
阅读量:5077 次
发布时间:2019-06-12

本文共 4846 字,大约阅读时间需要 16 分钟。

版权声明:本文为博主原创文章,未经博主同意不得转载。 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" %>    

放在下边为了提高性能 } 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响应。这个值添加到 45 个状态中每个都有一个相关联的非正式的名称。下表列出了状态、名称和含义:

   

 状态

名称

描写叙述

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对象进行交互了呢?赶快去体验异步交互给你带来的极致享受吧。

 

转载于:https://www.cnblogs.com/ldxsuanfa/p/10478717.html

你可能感兴趣的文章
从.NET中委托写法的演变谈开去(上):委托与匿名方法
查看>>
小算法
查看>>
201521123024 《java程序设计》 第12周学习总结
查看>>
新作《ASP.NET MVC 5框架揭秘》正式出版
查看>>
IdentityServer4-用EF配置Client(一)
查看>>
WPF中实现多选ComboBox控件
查看>>
读构建之法第四章第十七章有感
查看>>
Windows Phone开发(4):框架和页 转:http://blog.csdn.net/tcjiaan/article/details/7263146
查看>>
Unity3D研究院之打开Activity与调用JAVA代码传递参数(十八)【转】
查看>>
python asyncio 异步实现mongodb数据转xls文件
查看>>
TestNG入门
查看>>
【ul开发攻略】HTML5/CSS3菜单代码 阴影+发光+圆角
查看>>
[ZJOI2007]棋盘制作 【最大同色矩形】
查看>>
IOS-图片操作集合
查看>>
模板统计LA 4670 Dominating Patterns
查看>>
团队项目开发客户端——登录子系统的设计
查看>>
IO—》Properties类&序列化流与反序列化流
查看>>
session如何保存在专门的StateServer服务器中
查看>>
react展示数据
查看>>
测试计划
查看>>