Ajax介绍以及工作原理和实现详解（JS实现Ajax 和 JQ实现Ajax）
- 注重版权，转载请注明原作者和原文链接
作者：码农BookSea
原文链接：https://editor.csdn.net/md?articleId=1068817950.前言
-
AJAX 工作原理 -
1.认识Ajax
![]()
-
2.使用Ajax的好处
-
1.无刷新——不刷新整个页面，只刷新局部。
无刷新的好处
只更新部分页面，有效利用带宽
提供连续的用户体验
提供类似 C/S 的交互效果，操作更方面3.Ajax的工作原理
-
![]()
（图片转载至： https://www.runoob.com/ajax/ajax-intro.html ）Ajax首先会向服务端发送一个请求，然后调用一个服务（回调函数），接着返回结果。这样使客户端和服务端发生了少量的数据交换，ajax实现局部页面的更新，从而减少了服务端的压力。
![]()
4.传统 Web 与 Ajax 的差异![]()
-
5.Ajax–JavaScript实现![]()
![]()
-
window.onload=function()
{
document.getElementById("ok").onclick=function(){
var xhr=createXmlHttpRequest();//获取XmlHttpRequest对象
xhr.onreadystatechange=function(){//回调函数
if(xhr.readyState4){//回调状态
if(xhr.status200 || xhr.status==304)//服务器状态吗
{
var date=xhr.responseText;//服务器返回数据
alert(date);
}
}
};
var id="A001";
alert(id);
xhr.open("GET","../testGetServelet?id="+id,true);//1、发送方式2、页面路径，3、请求是否异步，默认为true
xhr.send(null);//发送数据--get方式，这里不用写数据，即使写了数据服务器端也无法接收
};
function createXmlHttpRequest(){
var xmlHttp;
try{ //Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{ //Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
return xmlHttp;
}};window.onload=function(){
document.getElementById("ok").onclick=function(){
var xhr=createXmlHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState4)
{
if(xhr.status200 || xhr.status==304)
{
var data=xhr.responseText;
alert(data);
}
}
};xhr.open("post","../testGetServelet",true);
//如果是POST请求方式，设置请求首部信息
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("a=1&b=2");
};function createXmlHttpRequest(){
var xmlHttp;
try{ //Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{ //Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
return xmlHttp;
}
};6.Ajax–jquery实现
-
<script src="script/jquery-1.12.4.js" type="text/javascript"></script> <script type="text/javascript">
function validate() {
var uname = $("#uname").val();
if (uname == null || uname == "") {
$("#msg").html("用户名不能为空！");
} else {
$.ajax({
url : "dologin.jsp",
type : "get",
data:{"uname":uname},
dataType : "text",
success : function(result) {
if ($.trim(result) == "true") {
$("#msg").html("用户名已被使用！");
} else {
$("#msg").html("用户名可以使用！");
}
},
error : function() {
alert("用户名验证拾出现错误，请联系管理员！");
}
});
}
};
</script>$.get(url ,data,success(resp,status,xhr), dataType);
怕大家看不懂参数是什么意思，给大家放张常用属性参数表，看了之后一目了然：![]()
<script src="script/jquery-1.12.4.js" type="text/javascript"></script> <script type="text/javascript">
function validate(){
var uname = $("#uname").val();
if(unamenull || uname""){
$("#unameDiv").html("用户名不能为空！");
}else{
$.get('dologin.jsp','uname='+uname,function(result){
if($.trim(result) == "true"){
$("#unameDiv").html("用户名已被使用！");
}else{
$("#unameDiv").html("用户名可以使用！");
}
}
);
} }
</script> <body> <form action="" id="form1"> <table> <tr><td>用 户 名：</td> <td><input type="text" name="uname" id="uname"
onblur="validate();" /> <font
color="#c00fff">*</font></td> <td><div id="unameDiv" style="display: inline"></div>
</td>
</tr>
</table>
</form>
</body>语法格式：
$.post(url,data,success(resp,status,xhr), dataType);
（实现方式与get类似，只是把get改换成post，这里不再赘述~~） -
https://blog.csdn.net/bookssea/article/details/106881795$(selector).load(url ,data,function(result, status, xhr));<script type="text/javascript">
function validate(){
var uname = $("#uname").val();
if(unamenull || uname""){
$("#unameDiv").html("用户名不能为空！");
}else{
$("#unameDiv").load('lgoin.jsp','uname='+uname);
} }
</script> <body> <form action="" id="form1" > <table> <tr><td>用 户 名：</td> <td>
<input type="text" name="uname" id="uname"
onblur="validate();" /> <font color="#c00fff">*</font>
</td> <td><div id="unameDiv" style="display: inline"></div>
</td>
</tr>
</table>
</form>
</body>
浙公网安备 33010602011771号