什么是AJAx:Asynchronous Javascript and XML
中文意思：异步JavaScript 和XML
批一种创建交互式网页应用的网页开发技术。
AJAX优点
1.Ajax 在本质上是一个浏览器端的技术。
2.Ajax技术之主要目的在于局部交换客户端及服务器间的数据。
3.这个技术的主角XMLHttpRequest的最主要特点，在于能够不用重新载入版面来更新资料，也就是所谓的Refresh withou Reload（轻刷新）
4.与服务器之间的沟通，完全是透过Javascript来实现的。
5.使用XMLHttpRequest本身传送的数据量很小，所以反应会更快，也就让网络程式更像一个桌面应用程序。
6AJX就是运用Javascript 在后台悄悄帮你去跟服务器要资料，最后再由Javascript 或Dom来帮你呈现结果，因为所有动作都是由Javascript 代劳，所以少去了网页重载的麻烦，使用者也感受不一以等待的痛苦。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function createXhr() {
var xhobj = false;
try {
xhobj = new ActiveXObject("Msxml2.XMLHTTP");//ie msxml 3.0
} catch (e) {
try {
xhobj = new ActiveXObject("Microsoft.XMLHTTP")//ie msxml 2.6
}
catch (e2) {
xhobj = false;
}
}
if (!xhobj && typeof XMLHttpRequest != "undefined") //Firefox,Opera 8.0 Safari
{
xhobj = new XMLHttpRequest();
}
return xhobj;
}
window.onload = function () {
document.getElementById("btnLoginGet").onclick = doLoginGet;
document.getElementById("btnLoginPost").onclick = doLoginPost;
}
function doLoginGet() {
//获取异步对象;
var xhr = createXhr();
//设置好参数 请求方式，请求URL,是否启用异步
xhr.open("get", "LoginAjax.ashx", true);
//设置get方式不使用缓存
xhr.setRequestHeader("if-Modlfied-Sine", 0);
//设置异步对象的回调函数---每当异步对象的准备状态发生改变的时候调用
xhr.onreadystatechange = function () {
//当readyState=4的时候，就说明 异步对象已经 从服务器获得了返回的数据
if (xhr.readyState == 4) {
var res = xhr.responseText;
alert(res);
//获得响应报文头所有信息
var headerInfo = xhr.getAllResponseHeaders();
alert(headerInfo);
}
};
xhr.send(null);
}
function doLoginPost() {
//获取异步对象;
var xhr = createXhr();
//设置好参数 请求方式，请求URL,是否启用异步
xhr.open("post", "LoginAjax.ashx", true);
//指定数据提交格式
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//设置get方式不使用缓存
xhr.setRequestHeader("if-Modlfied-Sine", 0);
//设置异步对象的回调函数---每当异步对象的准备状态发生改变的时候调用
xhr.onreadystatechange = function () {
//当readyState=4的时候，就说明 异步对象已经 从服务器获得了返回的数据
if (xhr.readyState == 4) {
//判断服务器返回的状态码是否为 200 否则就是服务器端发生了意外
if (xhr.status == 200) {
var res = xhr.responseText;
alert(res);
//获得响应报文头所有信息
var headerInfo = xhr.getAllResponseHeaders();
alert(headerInfo);
}
else {
alert("对不起服务器繁忙~~~~~");
}
}
};
xhr.send("txtName=孙业宝&&Pwd=123");
}
</script>
</head>
<body>
<form action="" method="post">
<input type="text" name="txtName" id="txtName" /><br />
<input type="text" name="txtPwd" /><br />
<!--<input type="text" name="txtCode" />
<img title="点击换验证码" onclick="this.src ='LoginVode.ashx?i=' +new date();" align="middle" src="LoginVode.ashx" /><br />-->
<input type="button" id="btnLoginGet" value="登录 By Get" />
<input type="button" id="btnLoginPost" value="登录 By Post" />
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace AJAX
{
/// <summary>
/// LoginAjax 的摘要说明
/// </summary>
public class LoginAjax : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write("Hello World");
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
增加 js验证主要是为了用户的更好体验，如果用户禁用了Js照样 可以传到服务器，白浪费时间，减少服务器的压力。