一、概念 AJAX:Asynchronous（异步的） JavaScript and XML—异步JavaScript和XML
一种创建交互式网页应用的网页开发技术，不是一种单一的技术，而是有机地利用了一系列相关的技术，简单理解为：JavaScript + XMLHttpRequest + CSS +服务器端的集合。
【-----【ASP.NET】|初识AJAX】相关技术表：
| web标准( Standards-Based Presentation )XHTML+CSS的表示, |
| 使用 DOM( Document Object Model )进行动态显示及交互, |
| 使用 XML 和 XSLT 进行数据交换及相关操作, |
| 使用 XMLHttpRequest 进行异步数据查询、检索. |
二.优点—局部异步刷新 我们先了解一下什么是同步，什么是异步？
| 同步访问 | 在访问服务器时，客户端只能等待服务器的响应，不能做其它事情。用户体验非常的差 |
| 适用场景 | 1、输入网址访问页面 2、a标记的默认跳转 3、submit按钮的表单提交 |
| 异步访问 | 在向服务器发送请求时，不耽误用户在网页上做其它的操作 |
| 代表场合 | 1、用户名的重复性验证 2、聊天室 3、股票走势图 4、搜索建议(百度，京东，淘宝 的搜索框) |
普通网页请求回执过程，用户发送请求后，只能默默等待服务器回应。——同步
文章图片
用户端发送请求后，不需要等服务器响应，可继续做其他的事情。——异步
文章图片
AJAX的优点有哪些？
| 1.无刷新，用户体验好 |
| 2.使用XMLHttpRequest 本身传送的数据量很小（服务器响应回来的是部分数据，不是完整的页面），所以反应会更快，也就让网络程式更像一个桌面应用程序 |
| 3.内部进行浏览器与服务器的数据交换，很多与服务器之间的沟通，完全是透过Javascript 来实行 |
| 4.很多动作都是Javascript 来实行,省去了网页重载的弊端 |
| 语法：open(method,url,isAsyn) | 语法解析： 1、method string 类型 请求方式 ：get,post,... ... 2、url string 类型 请求地址 3、isAsyn boolean 类型 指定采用同步(false)还是异步(true)的方式发送请求 |
| 由 0 - 4 表示 5个状态 0 : 请求尚未初始化 1 : 已经打开到WEB服务器的连接，正在向服务器发送请求 2 : 请求完成 3 : 正在接收服务器端的响应 4 : 接收响应数据成功 |
| 注意：当 readyState的值为4的时候，表示所有的响应都已经接收完毕。 |
| 当 status 的值是 200的时候，表示服务器已经正确的给出所有的响应 |
| 作用 | 当 xhr 的readyState 属性值发生改变的时候，要自动激发的操作 |
| 语法 | xhr.onreadystatechange = function(){ //每当xhr.readyState的值，发生变化时，要执行的操作。 //判断 xhr.readyState为4的时候 并且 xhr.status 为 200的时候，才能获取正常的响应数据 if(xhr.readyState == 4 && xhr.status == 200){ //可以接收响应回来的数据 //responseText 属性，表示服务器响应回来的文本 var resText=xhr.responseText; } } |
| 语法：send(body);
body : 是请求主体 没有请求主体的提交方式，body位置处，要写 null 有请求主体的提交方式，body位置处，编写的就是请求主体的数据 |
//1.创建核心对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}//2. 建立连接
/*
参数：
1. 请求方式：GET、POST
* get方式，请求参数在URL后边拼接。send方法为空参
* post方式，请求参数在send方法中定义
2. 请求的URL：
3. 同步或异步请求：true（异步）或 false（同步）
*/
xmlhttp.open("GET","ajaxServlet?username=tom",true);
//3.发送请求get 请求没有请求主体，所以为xhr.send(null)
xmlhttp.send();
//4.接受并处理来自服务器的响应结果
//获取方式 ：xmlhttp.responseText
//什么时候获取？当服务器响应成功后再获取
//当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
xmlhttp.onreadystatechange=function()
{
//判断readyState就绪状态是否为4，判断status响应状态码是否为200
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//获取服务器的响应结果
var responseText = xmlhttp.responseText;
alert(responseText);
}
}使用 POST 方式发送请求
1、提交的请求数据
提交的请求数据需要按照指定的格式拼好，放在 send() 中传递
xhr.send("name1=value1 & name2=value2");
2、设置一个请求消息头
POST 提交方式，必须将 Content-Type 的请求消息头更改为 application/x-www-form-urlencoded
在发送请求之前：
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
例子如下：
文章图片
五、JQuery实现方式
1. $.ajax()
* 语法：$.ajax({键值对});
//使用$.ajax()发送异步请求
$.ajax({
url:"ajaxServlet1111" , // 请求路径
type:"POST" , //请求方式
//data: "username=jack&age=23",//请求参数
data:{"username":"jack","age":23},
success:function (data) {
alert(data);
},//响应成功后的回调函数
error:function () {
alert("出错啦...")
},//表示如果请求响应出现错误，会执行的回调函数
dataType:"text"//设置接受到的响应数据的格式
});
2. $.get()：发送get请求
* 语法：$.get(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型3. $.post()：发送post请求
* 语法：$.post(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型六.Ajax实例 Ajax 用户注册检查，我们注册网页注册的时候，通常输入一个用户名，然后系统会自动检测该用户名是否已经注册。其实这里就用到了Ajax.
通常注册时，所有信息都输入完后，点击注册按钮，然后才会判断你的用户名是否已经注册，当注册后，页面会被刷新，其他信息都将消失，用户体验极差，而且时间特别长
Ajax 注册时，当输入完用户名以后，会自动发送一个Post请求，验证用户名是否已经注册，并实时的通知用户,效果好。
Demo:
当用户名失去焦点事件时，自动发送一个Post请求，去检验该用户是否已经注册。
- 锐客网
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using BLL;
namespace WebAJAX
{
///
/// CheckUserName 的摘要说明
///
public class CheckUserName : IHttpHandler
{public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string userName = context.Request["name"];
userInfoBLLuser= newuserInfoBLL();
if (user.GetUserInfo(userName) != null)
{
context.Response.Write("此用户名已存在!!");
}
else
{
context.Response.Write("此用户名可用!!");
}
}public bool IsReusable
{
get
{
return false;
}
}
}
}效果展示：
文章图片
后面将会持续分享一些AJAX的学习，大家记得看哦！
