一、概念
AJAX:Asynchronous（异步的） JavaScript and XML — 异步JavaScript和XML
一种创建交互式网页应用的网页开发技术，不是一种单一的技术，而是有机地利用了一系列相关的技术，简单理解为：JavaScript + XMLHttpRequest + CSS +服务器端的集合。
相关技术表：
| 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 来实行,省去了网页重载的弊端 |
三、XHR 的常用属性 和 方法(难点)
| 语法：open(method,url,isAsyn) |
语法解析： 1、method |
| 由 0 - 4 表示 5个状态 0 : 请求尚未初始化 1 : 已经打开到WEB服务器的连接，正在向服务器发送请求 2 : 请求完成 3 : 正在接收服务器端的响应 4 : 接收响应数据成功 |
| 注意：当 readyState的值为4的时候，表示所有的响应都已经接收完毕。 |
| 当 status 的值是 200的时候，表示服务器已经正确的给出所有的响应 |
| 作用 | 当 xhr 的readyState 属性值发生改变的时候，要自动激发的操作 |
| 语法 |
xhr.onreadystatechange = function(){ |
| 语法：send(body); body : 是请求主体 没有请求主体的提交方式，body位置处，要写 null 有请求主体的提交方式，body位置处，编写的就是请求主体的数据 |
四、原生js发送异步请求的步骤（了解）
允许通过 window.XMLHttpRequest 判断浏览器是否支持 XMLHttpRequest()。如果 window.XMLHttpRequest的值是null的话，说明需要通过 ActiveXObject()创建，否则需要通过 XMLHttpRequest() 来创建
//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请求，去检验该用户是否已经注册。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="WebAJAX.Register" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="JS/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#msg").css("display", "none");//提示框进行隐藏
$("#txtUserName").blur(function () {//blur为失去焦点事件
var userName = $(this).val();//获取用户输入的值
if (userName != "") {//如果用户输入的值不为空，发送Post请求，进行校验
$.post("CheckUserName.ashx", { "name": userName }, function (data) {
$("#msg").css("display", "block");
$("#msg").text(data);
});
} else {
alert("用户名不能为空!!");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
用户名:<input type="text" name="txtName" id="txtUserName" /><span id="msg" style="font-size: 14px; color: red"></span><br />
密码:<input type="password" name="txtPWD" /><br />
<input type="submit" value="注册" />
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using BLL;
namespace WebAJAX
{
/// <summary>
/// CheckUserName 的摘要说明
/// </summary>
public class CheckUserName : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string userName = context.Request["name"];
userInfoBLL user = new userInfoBLL();
if (user.GetUserInfo(userName) != null)
{
context.Response.Write("此用户名已存在!!");
}
else
{
context.Response.Write("此用户名可用!!");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
效果展示：
后面将会持续分享一些AJAX的学习，大家记得看哦！
扫一扫
740
到【灌水乐园】发言
