初步理解Ajax的异步作用

最新推荐文章于 2024-09-10 22:24:48 发布

Danger丶亡月

最新推荐文章于 2024-09-10 22:24:48 发布

阅读量1.7k

点赞数

分类专栏： JAVA EE

本文链接：https://blog.csdn.net/qq_37788081/article/details/82690317

版权

JAVA EE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

理解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}");
}
}