版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_37788081/article/details/82690317
理解Ajax
Ajax的介绍
ajax是什么？
- Ajax=“Asynchronous javascript Adn XML”(意思就是异步的JavaScript和XML)。
- Ajax的作用是可以使网页实现异步的更新，用通俗的话来讲就是在不需要重新加载整个页面内容的情况下，也可以对网页的部分内容进行更新操作，也可以理解局部刷新操作。
- 传统没有使用Ajax技术的web页面如果需要更新页面的某部分内容的时候，必须要重新加载整个网页才能够实现更新。
ajax原理分析
ajax引擎工作过程图：
ajax的使用
原生ajax使用的四个步骤：
1）创建Ajax引擎对象
2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
3）绑定提交地址
4）发送请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生Js的Ajax</title>
<script type="text/javascript">
function fn1() {
//1.创建ajax引擎对象 ---所有操作都是通过引擎对象
var xmlHTTP =new XMLHttpRequest();
//2.绑定监听 ---监听自己服务器是否已经返回数据
xmlHTTP.onreadystatechange = function () {
//5.接受相应的数据
if (xmlHTTP.readyState==4&&xmlHTTP.status==200) {
var res = xmlHTTP.responseText;
// alert(res);
document.getElementById("span1").innerHTML=res;
}
}
//3.绑定地址
xmlHTTP.open("GET", '/ajaxServlet?name="zhang san feng', true);
//4.发送请求
xmlHTTP.send();
}
function fn2() {
//1.创建ajax引擎对象 ---所有操作都是通过引擎对象
var xmlHTTP =new XMLHttpRequest();
//2.绑定监听 ---监听自己服务器是否已经返回数据
xmlHTTP.onreadystatechange = function () {
//5.接受相应的数据
if (xmlHTTP.readyState==4&&xmlHTTP.status==200) {
var res = xmlHTTP.responseText;
// alert(res);
document.getElementById("span2").innerHTML=res;
}
}
//3.绑定地址
xmlHTTP.open("GET", '/ajaxServlet?name=lisi', false);
//4.发送请求
xmlHTTP.send();
}
</script>
</head>
<body>
<input type="button" value="异步访问服务器" onclick="fn1()">
<span id="span1">1</span>
<hr>
<input type="button" value="同步访问服务器" onclick="fn2()">
<span id="span2">1</span><hr>
<input type="button" value="测试按钮" onclick="alert()">
</body>
</html>参考的服务器java-servlet代码
package ajax;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet(name = "AjaxServlet")
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// response.getWriter().write("zhang san");
String name = request.getParameter("name");
response.getWriter().write(Math.random()+" "+name);
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
实现结果：
用jQuery来使用ajax技术
对于现在的我们来说，以后要从事开发，很少再使用原生的JavaScript中的ajax技术了，大多是使用jQuery中的ajax技术。
在这里我推荐下新浪的cnd..因为我使用其他的cnd引入jQuery文件时大多都会显示失败，或者加载速度很慢
<!-- 新浪cdn方便使用 -->
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>jQuery的三种方式：
第一种GET方式
function f1() {//四个参数，分别用逗号分开
$.get(
"/ajaxServlet2", //1、url地址
{
"name":"zhangsan","age":25 //2、请求参数
},
function (date) {//3、执行成功后的回调函数
alert(date);
},
"text"//4、返回参数的类型
);
}第二种Post方式
function f2() {
$.post(
"/ajaxServlet2",// url
{
"name":"zhangsan","age":25 //2、请求参数
},
function (date) {
alert(date.name)
},
"json"
);
}第三种是ajax方式
function f3() {
$.ajax({
url:"/ajaxServlet2", //路径
async:true,//是否异步，可以不设置，默认为异步，
type:"POST",//传递的方式
data:{"name":"lucy","age":18},//需要传递的数据
success:function (data) {//执行成功后执行的函数
alert(data.name)
},
error:function () {//执行失败后返回的函数
alert("请求失败")
},
dataType:"json"//返回数据的类型
})
}一个jQuery使用ajax的实例：
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 新浪cdn方便使用 -->
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
<script type="text/javascript">
function f1() {//四个参数，分别用逗号分开
$.get(
"/ajaxServlet2", //1、url地址
{
"name":"zhangsan","age":25 //2、请求参数
},
function (date) {//3、执行成功后的回调函数
alert(date);
},
"text"//4、返回参数的类型
);
}
function f2() {
$.post(
"/ajaxServlet2",// url
{
"name":"zhangsan","age":25 //2、请求参数
},
function (date) {
alert(date.name)
},
"json"
);
}
function f3() {
$.ajax({
url:"/ajaxServlet2", //路径
async:true,//是否异步，可以不设置，默认为异步，
type:"POST",//传递的方式
data:{"name":"lucy","age":18},//需要传递的数据
success:function (data) {//执行成功后执行的函数
alert(data.name)
},
error:function () {//执行失败后返回的函数
alert("请求失败")
},
dataType:"json"//返回数据的类型
})
}
</script>
</head>
<body>
<input type="button" value="GET访问服务器端" onclick="f1()">
<input type="button" value="GET访问服务器端2" onclick="f2()">
<input type="button" value="AJAX范文服务器3" onclick="f3()">
</body>
</html>后端代码：
package ajax;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet(name = "AjaxServlet2")
public class AjaxServlet2 extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println(name + " " + age);
// response.getWriter().write("successfully.....");
//Json格式
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write("{\"name\":\"汤姆\",\"age\":22}");
}
}