一、Ajax概述
1．什么是同步，什么是异步
同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待 卡死状态
异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随 意做其他事情，不会被卡死
2．Ajax的运行原理
页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到 服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回 给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面1 功能。
二、js原生的Ajax技术（了解）
js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原 生的Ajax完成异步操作，有如下几个步骤：
1）创建Ajax引擎对象
2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
3）绑定提交地址
4）发送请求
5）接受响应数据
//异步get提交
function f1(){ //1）创建Ajax引擎对象 var xmlhttp=new XMLHttpRequest(); //2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎） xmlhttp.onreadystatechange=function(){ //5）接受响应数据 var res=xmlhttp.responseText; if(xmlhttp.readyState==4&&xmlhttp.status==200){ document.getElementById("span1").innerHTML=res; } } //3）绑定提交地址(请求方式、请求地址、是否异步) xmlhttp.open("GET", "${pageContext.request.contextPath}/AjaxServlet", true) //4）发送请求 xmlhttp.send(); }
//异步post提交 function f2(){ //1）创建Ajax引擎对象 var xmlhttp=new XMLHttpRequest(); //2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎） xmlhttp.onreadystatechange=function(){ //5）接受响应数据 var res=xmlhttp.responseText; if(xmlhttp.readyState==4&&xmlhttp.status==200){ alert(res); } } //3）绑定提交地址(请求方式、请求地址、是否异步) xmlhttp.open("POST", "${pageContext.request.contextPath}/AjaxServlet", true) //true(异步) false（同步） //4）发送请求 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("name=shangsan"); }
//同步get提交 function f3(){ //1）创建Ajax引擎对象 var xmlhttp=new XMLHttpRequest(); //2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎） xmlhttp.onreadystatechange=function(){ //5）接受响应数据 var res=xmlhttp.responseText; if(xmlhttp.readyState==4&&xmlhttp.status==200){ document.getElementById("span2").innerHTML=res; } } //3）绑定提交地址(请求方式、请求地址、是否异步) xmlhttp.open("GET", "${pageContext.request.contextPath}/AjaxServlet", false) //4）发送请求 xmlhttp.send(); }
总结：同步页面上不能在进行别的操作
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
例子：网页的验证登陆（防止自动刷新）
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
实例：
修改内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>
三、jquery的Ajax技术
1.get方式提交
function f1(){ $.get("${pageContext.request.contextPath }/Ajax2Servlet", //绑定提交地址 {"name":"zhangsan","age":18}, //提交数据 function(data){ //回调函数--接收相应数据（data） alert(data.name); }, "json") }
2.post方式提交
function f2(){ $.post("${pageContext.request.contextPath }/Ajax2Servlet", {"name":"zhangsan","age":18}, function(data){ alert(data.name); }, "json") }
3.ajax方式
function f3(){ $.ajax({ url:"${pageContext.request.contextPath }/Ajax2Servlet", async:true, type:"POST", data:{"name":"lucy","age":18}, success:function(date){ alert(date.name); }, error:function(){ alert("请求失败"); }, dataType:"json" }) }