什么是AJAX
- AJAX(啊扎克斯)是一种应用技术的缩写，它的英文全称为：(Asynchronous Javascript and XML异步JavaScript和XML) 。
- 从ajax的名字就可以看出ajax是多种技术的集合，至少包括JavaScript和XML两项技术。
- 事实上，ajax也并不是什么新技术，只是包括了HTML、XHTML、css、DOM、XML、XSTL和HMLHttpRequest等技术在内的一个技术集合。
- 通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。
- 这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
AJAX与传统WEB区别
1.发送请求方式不同。
- 传统Web应用通过浏览器发送请求，而Ajax技术则是通过JavaScript的XmlHttpRequest对象。
2.服务器响应不同。
- 针对传统Web应用，服务器的响应是一个完整的页面，而采用Ajax技术后，服务器的响应只是需要的数据。
3.客户端处理的响应方式不同。
- 传统的Web应用发送请求后，浏览器将等待服务器响应完成后重新加载整个页面。而采用Ajax技术后，浏览器不再空闲等待请求的响应，而只是通过JavaScript动态更新页面中需要更新的部分。
为什么要使用AJAX
- 减轻服务器的负担，按需取数。
- 可以最大程度的减少冗余请求和响应对服务造成的负担。
- 无刷新更新页面，减少用户心理和实际的等待时间。
- 可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理。
- 减轻服务器和速写的负担，节约空间和宽带租用成本。
- 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
AJAX异步技术实现的步骤
AJAX发起请求
readyState是用户客户端处理阶段状态
- 0-(未初始化)还没有调用send()方法
- 1-(载入）已调用send()方法，正在发送请求
- 2-(载入完成)send()方法执行完成，已经接收到全部响应内容
- 3-(交互)正在解析响应内容
- 4-(完成)响应内容解析完成，可以在客户端调用了*/
status 是服务器状态
- 200为请求成功
- 404为找不到指定接口请求失败
JS方式发起请求代码
<body>
<div id="mydiv">
</div>
<button onclick="loadXMLDoc()">发起请求</button>
</body>$(function(){
//实例化ajax对象的方法 可复用
function creatXmlHttp(){
//声明变量存放ajax对象
var xmlHttp;
//判断该浏览器是否存在XMLHttpRequest对象
if(window.XMLHttpRequest){
//实例化对象
xmlHttp = new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject("Microsofit.XMLHTTP");
}
//把创建好的对象进行返回
return xmlHttp;
}
//绑定按钮的单击事件
$("#but").on("click",function(e){
var xmlHttp = creatXmlHttp();
console.log(xmlHttp);
xmlHttp.onreadystatechange = function(){
console.log(xmlHttp.readyState);
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
console.log(xmlHttp.responseText);
}
}
//配置请求，初始化请求
xmlHttp.open("get","接口地址",true);
//提交请求
xmlHttp.send();
})
})JQ方式发起请求代码
HTMl
<script src="https://code.jquery.com/jquery-3.6.1.js"></script><style> table{ width: 400px; border: 1px solid #000; border-collapse: collapse; text-align: center; } table tr,td,th{ border: 1px solid #000; } thead th{ height: 30px; padding-left: 10px; padding-right: 10px; background-color: #ccc; font-size: 18px; } </style> <body> <table> <thead> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>QQ</th> </tr> </thead> <tbody> </tbody> </table> </body>ＪＱ
$(function(){ //文档载入事件 $.ajax({ type:"get", url:"xml/data.json", success:function(userList){ console.log(userList); for (var i = 0; i < userList.length; i++) { var str =`<tr> <td>`+userList[i].code+`</td> <td>`+userList[i].name+`</td> <td>`+userList[i].age+`</td> <td>`+userList[i].qq+`</td> </tr>` $("tbody").append(str); } },error(res) { console.log("请求失败！错误原因："+res) } }) })ＪＳＯＮ
[ { "code":"10001", "name":"xingyi", "age":"19", "qq":"123456" },{ "code":"10002", "name":"blog", "age":"18", "qq":"123456" } ]
评论 (0)