AJAX
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
AJAX 是什么？
AJAX = Asynchronous JavaScript and XML
AJAX 是一种用于创建快速动态网页的技术
AJAX 通过在后台与服务器进行少量数据交换，使网页实现异步更新，这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个页面
AJAX 基于因特网标准
AJAX 基于因特网标准，并使用以下技术组合：
- XMLHttpRequest 对象（与服务器异步交互数据）
- JavaScript/DOM（显示/取回信息）
- CSS（设置数据的样式）
- XML（常用作数据传输的格式）
AJAX 应用程序与浏览器和平台无关的！
AJAX - 创建 XMLHttpRequest 对象
XMLHttpRequest 是 AJAX 的基础。
XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新
创建 XMLHttpRequest 对象
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：
variable = new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
variable = new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
- method：请求的类型；GET 或 POST
url：文件在服务器上的位置async：true（异步）或 false（同步）
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
send(string)
将请求发送到服务器。
- string：仅用于 POST 请求
服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
| 属性 | 描述 |
|---|---|
responseText |
获得字符串形式的响应数据。 |
responseXML |
获得 XML 形式的响应数据。 |
onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
| 属性 | 描述 |
|---|---|
onreadystatechange |
存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
readyState |
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪 |
| status | 200: “OK” 404: 未找到页面 |
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
后端进行一个简单的用户伪校验
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("html/text;charset=utf-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
if (username.equals("jack001") && password.equals("123456")){
response.getWriter().print("1");
}else {
response.getWriter().print("2");
}
}
Ajax(JS)
一个基于JS原生Ajax的用户数据后端校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生js的ajax</title>
</head>
<script>
//测试Ajax的函数
function testAjax(){
let xmlHttp;
//判断是不是ie浏览器
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else {
xmlHttp = ActiveXObject("Microsoft.XMLHTTP");
}
let usernameEl = document.getElementById("username");
let passwordEl = document.getElementById("password");
let username = usernameEl.value;
let password = passwordEl.value;
//设置参数
xmlHttp.open("GET","http://localhost:8080/jQuery/test?username="+username+"&password="+password,true);
//访问具体的服务，发送请求
xmlHttp.send();
//绑定监听事件
xmlHttp.onreadystatechange = function (){
//判断服务器和网页的状态
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
//获取服务器响应的数据
alert(xmlHttp.responseText);
}
}
}
</script>
<body>
请输入用户名：<input type="text" id="username" value=""><br>
请输入用户名密码：<input type="password" id="password" value=""><br>
<input type="button" value="ajax监听事件按钮" onclick="testAjax()">
</body>
</html>
Ajax(JQuery)
一个基于Ajax的用户登录校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的ajax</title>
</head>
<script src="../jQuery/jquery-1.7.2.js"></script>
<script>
$(function (){
$("[value=提交]").click(function (){
//获取用户名和密码的值
let username = $("#username").val();
let password = $("#password").val();
//调用ajax函数
$.ajax({
//提交到后端的地址
url:"http://localhost:8080/jQuery/test",
//提交的方式
type:"POST",
//提交到后端的数据
data:{
username:username,
password:password
},
//请求成功之后的回调函数，监听事件
success:function (obj){
if (obj == "1"){
alert("登陆成功");
//跳转到页面
location.href = "http://www.baidu.com";
}else {
alert("登陆失败");
}
},
//服务端返回的数据类型text,html,json,xml
dataType:"text"
})
})
})
</script>
<body>
<table align="center" border="1px">
<tr align="center">
<td colspan="2"><h3>用户登录</h3></td>
</tr>
<tr>
<td>
请输入用户名
</td>
<td>
<input type="text" id="username" value=""><br>
</td>
</tr>
<tr>
<td>
请输入密码
</td>
<td>
<input type="password" id="password" value=""><br>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" value="提交">
</td>
</tr>
</table>
</body>
</html>
jQuery中封装的ajax以JSON串的形式存值
一些关键的key与value：
| KEY | VALUE |
|---|---|
| url | 后端资源地址 |
| type | “GET”、”POST”… |
| data | 提交到后端的数据（JSON串）{username : username, password : password} |
| success | 服务器反馈数据成功后执行的方法 function (object接收后端的参数){方法体} |
| dataType | 服务端返回的数据类型text,html,json,xml “text” |
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以邮件至 1300452403@qq.com
