Ajax?
啥意思？他的中文名字叫做 阿贾克斯 (英译过来的) 是一种网页的无刷新技术
来举个例子
当我们在某个网站注册会员的时候 输入要注册的用户名 当鼠标一离开时 后台代码会触发一个文本框失去焦点的事件(onblur)
在这个事件中 他会做以下几件事情：
1.取得用户新注册的用户名
2.检测用户名是否合法(是否含有非法字符)
2.在数据库中查询这个用户名是否被其他用户注册过了
如果这些条件都满足了 在输入新用户名的文本框右边会弹出一个提示"该用户名可以使用"
如果有一条不满足 也是在右面或跳出相应的错误提示
那就要问了 我没有点击提交 你怎么就知道我填写对不对呢？ 哈哈 问的好 这就是我们今天要说到的Ajax了
在说之前 我再说一个例子
在早几年之前 大家有没有过这样的经历
也是注册一个网站的会员 当我们费了好大劲填写完用户名密码之后 兴高采烈地点击"注册"
页面上突然提示用户名格式错误、邮箱格式错误。。。
我当时遇到这样的情况我快要疯掉了 如果这样注册 我下次绝对不会再来这个网站了
哈哈 就是是一个典型的没有使用Ajax技术的网站
说了这两个例子 想必您对Ajax有了一点模糊的认识了
下面 我就来具体的说一下这个东东到底是什么东西
下面贴出的是我的课堂笔记总结出来的 由于本人是菜鸟 有不对的地方 有错别字的地方 还请您指出 以便我改进 万分感谢！！！
什么是AJAX
AJAX:”Asynchronous JavaScript and XML”
中文意思：异步JavaScript和XML。
指一种创建交互式网页应用的网页开发技术。
AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词。
不是指一种单一的技术，而是有机地利用了一系列相关的技术：
简单理解为：JavaScript + XMLHttpRequest + CSS +服务器端 的集合.
说的简单一点 就是页面刷新的时候 我们还能做其他的事情 让用户感觉不到页面在刷新 所以也成为无刷新页面
请求响应模式（普通浏览器请求数据）
当浏览器向服务器通过套接字发送请求的时候 中间我们是不能做任何操作的 只能是等待服务器响应 返回浏览器以后 才能继续操作 这样用户体验非常的不好
交互模式（使用AJAX请求数据）
什么是异步对象 ：（可以理解为一个小的浏览器）
就是AJAX的核心 我们把浏览器分为了两个部分 一个是UI，一个是异步对象 当浏览器请求服务器的时候 这个 浏览器就不亲自去请求了 就交给了异步对象去请求 异步对象请求服务器以后 将返回的数据 再发回给浏览器
一个AJAX例子(个人理解 非官方)
我们在饭店吃饭时 我们跟服务员说 请给我上一盘鱼香肉丝(浏览器向服务器发出了请求) 然后服务员会去厨房告诉厨师做一盘鱼香肉丝(服务器处理请求) 在服务员去厨房的这期间 我们是不能跟服务员说话的 因为服务员不在了(服务器在处理浏览器的请求) 去找厨师了 我们只能等待服务员回来以后 才能继续跟服务员说话(等待服务器发回响应报文以后 浏览器才能继续操作)
我们在饭店吃饭时 我们跟服务员说 请给我上一盘鱼香肉丝 服务员不亲自去找厨师了而是利用自己手上的 无线点菜终端(浏览器把请求交给了Ajax的异步对象 这个无线点菜终端就相当于Ajax异步对象) 跟厨房里的厨师说炒一份鱼香肉丝(异步对象 向服务器请求) 这时 服务员还能继续跟我们说话(浏览器还能继续想服务器发出请求)
XMLHttpRequest对象
Ajax应用程序的核心就是它。
XMLHttpRequest对象在IE浏览器和非IE浏览器中创建的方法不同。
简而言之：它可以异步从服务器端获取txt或者xml数据
简单的说就是这个异步对象 可以帮浏览器访问服务器
接收服务器那里返回的字符串或者xml数据 最后返回给浏览器
Get请求
// 在操作前 要导入一个兼容所有浏览器的库
<script src="common.js" type="text/javascript"></script>
<script type="text/javascript">
function GetData() {
// 创建异步对象
var xhr = createXhr();
// 创建异步对象 这种方法只适用于IE的高版本中 最好使用以上的方法
var xhr = new XMLHttpRequest();
// 告诉做什么事 (发送的方法，目标URL，是否采用异步)
xhr.open("get", "First.ashx?name=LoginOK", true);
// 清空get访问产生的缓存
xhr.setRequestHeader("If-Modified-Since", "0");
// 调用回调函数 检查状态
xhr.onreadystatechange = function () {
// 判断状态码 以及是否请求成功
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
}
}
}
// 清空浏览器中 针对get 请求产生的缓存
Xhr.setRequestHeader("If-Modified-Since", 0);
//开始向服务器发送数据
xhr.send(null);
}
Post请求（html+一般处理程序）
Html
<script src="common.js" type="text/javascript"></script>
<script type="text/javascript">
function Login() {
// 先获得用户输入的内容
var inputName = document.getElementById("txtName");
var inputPwd = document.getElementById("txtPwd");
if (IsInput(inputName, inputPwd)) {
// 创建异步对象
var xhr = createXhr();
// 装配参数
xhr.open("post", "newAjaxLogin.ashx", true);
// 设置响应报文头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
// 回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
// 接收 并 转为json字符串
var json = xhr.responseText;
var res = eval("(" + json + ")");
switch (res.action) {
case "1": alert("登陆成功");
window.location = "BackLogin.ashx"; break;
case "0": alert("登陆失败 请检查用户名或者密码是否填写正确"); break;
default: alert("操作失败 请联系管理员"); break;
}
}
}
}
// 构建报文体
xhr.send("name=" + inputName.value + "&pwd=" + inputPwd.value);
}
}
// 检测用户名密码是否输入了
function IsInput(name, pwd) {
if (name.value == "") {
alert("请输入用户名");
return false;
}
else if (pwd.value == "") {
alert("请输入密码");
return false;
}
else {
return true;
}
}
</script>
newAjaxLogin.ashx 文件（一般处理文件 可以使用aspx文件 但是一般处理文件要快一下 因为一般处理文件没有页面的生命周期）
// 先获得用户输入的内容
string inputName = context.Request.Form["name"];
string inputPwd = context.Request.Form["pwd"];
if (inputName=="admin" && inputPwd=="123")
{
// 将用户名写去session
context.Session["userName"] = inputName;
//context.Response.Redirect("BackLogin.ashx");
context.Response.Write("{'action':'1'}");
}
else
{
context.Response.Write("{'action':'0'}");
}
注意 如果使用aspx文件来写 需要做以下两步操作
1. // 构建响应报文体
xhr.send("flag=1&name=" + nameDom.value + "&pwd=" + pwdDom.value);
这里设置一个 flag=1 在后台页面来判断他是否获取了值
2. // 为了防止在执行页面生命周期的render事件 所以 在后台页面中终止
Response.End();
readyState属性状态码
0：未初始化。对象已经创建，但还未初始化，即还没调用open方法；
1：已打开。对象已经创建并初始化，但还未调用send方法；
2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；
3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；
4：已加载。所有数据接收完毕
Json
什么是Json：
JSON 的全称是 JavaScript Object Notation，是一种轻量级的数据交换格式。JSO N 与 XML 具有相同的特性，
例如易于人编写和阅读，易于机器生成和解析。但是 JSON 比 XML 数据传输的有效性要高出很多。
JSON 完全独立与编程语言，使用文本格式保存
json字符串的序列化
什么是json字符串的序列化：
当我们操作的对象比较多时 拼接json字符串就显得不是特别方便了 这时我们可以将这些对象放在一个List集合中 然后将这个集合中的所有对象 都序列化成json字符串
// 将一个对象集合 转化为json字符串 格式是[{"字段名1":"字段值1","字段名2":"字段值2"}]
List<User> lis = new List<User>();
System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();
string strJson = js.Serialize(lis);
关于汉字编码
如果我们使用Ajax时 里面包含了中文汉字 这个时候 就需要将中文汉字转换编码了
// 将name对象中的中文值 转换编码格式
escape(name.value);
eval函数
如果eval执行的json格式的键值对的字符串的话 需要转换格式
eval("(" + json + ")");
(作者注释：由于我的笔记是.doc格式的 所有的标题都有超链接以及标题颜色 如果直接复制过来的话会有格式不支持的情况 为了统一 我在全部转换成了txt 所以会没有颜色 希望大家见谅)