第一节 认识AJAX
1.概念
AJAX,Asynchronous Javascript And Xml,异步的js和xml,AJAX不是新的编程语言,而是一种使用现有标准的新方法,AJAX是在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的艺术.
2.实现过程
- 获取XMLHttpRequest对象,是AJAX的核心
- 监听onreadystatechange事件
- 准备要发送的请求
- 发送请求
第二节 JavaScript实现AJAX
1.引入AJAX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function () {
/*给按钮绑定点击事件*/
document.getElementById("btn").onclick = function () {
//创建XMLHttpRequest对象,是AJAX的核心对象,所有操作都通过他进行
var xmlHttp;
if (window.XMLHttpRequest) {
//主流浏览器
xmlHttp = new XMLHttpRequest();
} else {
//IE5,IE6
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
//监听readyState的变化
xmlHttp.onreadystatechange = function () {
alert(xmlHttp.readyState);
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200 || xmlHttp.status == 302) {
//响应成功,可以取值了
document.getElementById('box').innerText = xmlHttp.responseText;
}
}
};
//准备要发送的请求,需要调用open方法
xmlHttp.open('get', '/msg2', true);
//发送请求,需要调用send方法
xmlHttp.send(null);
};
};
</script>
</head>
<body>
<div id="box"></div>
<button id="btn">get message</button>
<br>
<script>
document.write(Math.random());
</script>
</body>
</html>
2.判断用户名是否被占用
3.封装AJAX操作
4.jQuery对AJAX的支持
jQuery对AJAX进行了比较好的封装,可以分为三个层次:
$ .ajax(),该方法是jQuery操作AJAX的基础方法,其他所有的封装都是对$.ajax()的简化;
转载：https://blog.csdn.net/qq_42859864/article/details/104389488
查看评论