上一篇文章介绍了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="../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,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); // 设置和服务器端交互的相应参数 xmlhttp.open("POST","yz.ashx",true); //表示客户端提交给服务器文本内容的编码方式 是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) { //接受服务器返回的数据 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.创建该对象
3.设置和服务器端交互的相应参数 用open方法
4.设置服务器端发送数据, 启动和服务器端交互 send 发送
5.判断服务器端的交互是否完成, 服务器端是否正确放回了数据
是不是对XmlHttpRequest对象的用法掌握了一些。但是如果我们想更加透彻的了解这个对象,那还要了解这个对象的其他属性及方法。
属性:
readyState
HTTP 请求的状态.当一个 XMLHttpRequest初次创建时,这个属性的值从 0开始,直到接收到完整的 HTTP响应,这个值增加到 4。5 个状态中每一个都有一个相关联的非正式的名称,下表列出了状态、名称和含义:
状态 |
描述 |
|
0 |
Uninitialized |
初始化状态。XMLHttpRequest对象已创建或已被 abort()方法重置。 |
1 |
Open |
|
2 |
Send |
|
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响应头部作为未解析的字符串返回。如果小于 3,这个方法返回 null。否则,它返回服务器发送的所有 HTTP 响应的头部。头部作为单个的字符串返回,一行一个头部。每行用换行符 ""隔开。
getResponseHeader()
返回指定的 HTTP响应头部的值。其参数是要返回的 HTTP响应头部的名称。可以使用任何大小写来制定这个头部名字,和响应头部的比较是不区分大小写的。该方法的返回值是指定的 HTTP响应头部的值,如果没有接收到这个头部或者则为空字符串。如果接收到多个有指定名称的头部,这个头部的值被连接起来并返回,使用逗号和空格分隔开各个头部的值。
open()
初始化 HTTP请求参数,例如 URL和 HTTP 方法,但是并不发送请求。
send()
发送 HTTP请求,使用传递给 open()方法的参数,以及传递给该方法的可选请求体。
setRequestHeader()
向一个打开但未发送的请求设置或添加一个 HTTP请求。
通过上边的讲解,你是不是已经可以自己使用xmlHttpRequest对象进行交互了呢?赶快去体验异步交互给你带来的极致享受吧。