一、基础概念
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页(局部刷新)
XMLHttpRequest 用于在后台与服务器交换数据。
二、相关api
1.识别浏览器并创建对象:
2.向服务器发送请求:
open(method,url,async)：
- method：请求的类型；GET 或 POST
- url：文件在服务器上的位置
- async：true（异步）或 false（同步）
3.ReadyState:
onreadystatechange :存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数
readyState: 存有 XMLHttpRequest 的状态。readyState为4时，表示请求已完成，且响应已就绪
status: 200表示 "OK" 404表示未找到页面
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
}
比较原始的写法，如下所示：
<html> <script language="JavaScript"> var xmlHttp; //ajax核心对象 function createXmlReques() { if(window.XMLHttpRequest) { //判断当前的浏览器类型 xmlHttp=new XMLHttpRequest(); //表示使用的是firefox内核 }else { //表示使用的是ie内核的浏览器 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP") } } function showBookMsg() { createXmlHttp(); xmlHttp.open("POST","brrow.html"); //设置请求 xmlHttp.onreadystatechange=showBookMsgCallBack(); //设置请求完成之后处理的回调函数 xmlHttp.send(null); //发送请求 } function showBookMsgCallBack() { //定义回调函数 if(xmlHttp.readyState==4) { //数据返回完毕 if (xmlHttp.status == 200) { //HTTP操作正常 var text=xmlHttp.responseText; //接收返回的内容 document.getElementById("msg").innerHtml=text; //设置要显示的内容 } } } </script> <body> <div id="msg"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="showBookMsg()">通过 AJAX 改变内容</button> </body> </html>
三、在jQuery中的ajax
其中的ajax具体含义如下 ：
$.ajax({
type:"POST", //请求的类型
url:"/user/searchUser", //请求的路径
data: {id: $("#id").val() }, //提交的数据
dataType:"json" , //返回的数据类型
success: function (msg) { //请求成功触发的方法。此处的参数msg，表示请求成功后服务器返回的数据。
//修改id和年龄
console.log(msg.userName +"、"+msg.age);
$("#name").html(msg.userName);
$("#age").html(msg.age);
},
error:function () { //请求失败触发的方法
alert("数据请求失败");
}
}
示例代码如下所示：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="/jquery/jquery-3.2.1.js"></script>
</head>
<script type="text/javascript">
$(document).ready( function () {
$("#search").click(function () {
console.log("ajax")
$.ajax({
type:"POST",
url:"/user/searchUser",
data: {id: $("#id").val() },
dataType:"json" ,
success: function (msg) {
//修改id和年龄
console.log(msg.userName +"、"+msg.age);
$("#name").html(msg.userName);
$("#age").html(msg.age);
},
error:function () {
alert("数据请求失败");
}
})
})
}
);
</script>
<body>
通过ajax异常刷新用户数据:<br>
id: <input type="text" id="id"/> <br>
<input type="button" id="search" value="点击搜索"/> <br>
姓名: <p id="name"></p> <br>
年龄: <p id="age"></p> <br>
</body>
</html>