AJAX 请求

简介: AJAX 请求

什么是 AJAX 请求

AJAX 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发 技术。

ajax 是一种浏览器通过 js 异步发起请求,局部更新页面的技术。

Ajax 请求的局部更新,浏览器地址栏不会发生变化 局部更新不会舍弃原来页面的内容

javaScript 原生 Ajax 请求

原生的 Ajax 请求,

1、我们首先要创建 XMLHttpRequest 对象

2、调用 open 方法设置请求参数

3、调用 send 方法发送请求

4、在 send 方法前绑定 onreadystatechange 事件,处理请求完成后的操作

1)创建一个 html 页面,发起请求。代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function ajaxRequest() {
// 1、我们首先要创建 XMLHttpRequest
var xhr = new XMLHttpRequest();
// 2、调用 open 方法设置请求参数
xhr.open("GET","ajaxServlet?action=javaScriptAjax&a="+new Date(),true);
// 4、在 send 方法前绑定 onreadystatechange 事件,处理请求完成后的操作。
xhr.onreadystatechange = function() {
// 判断请求完成,并且成功
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("div01").innerHTML = xhr.responseText;
}
}
// 3、调用 send 方法发送请求
xhr.send();
}
</script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01">
</div>
</body>
</html>

2)创建一个 AjaxServlet 程序接收请求  

public class AjaxServlet extends BaseServlet {
private static final long serialVersionUID = 1L;
protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
System.out.println("ajax 请求过来了 a--" + request.getParameter("a"));
Random random = new Random(System.currentTimeMillis());
// 使用随机数,可以让客户端看到变化
response.getWriter().write(
new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
}
}

3)在 web.xml 文件中的配置:

<servlet>
<servlet-name>AjaxServlet</servlet-name>
<servlet-class>com.atguigu.servlet.AjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxServlet</servlet-name>
<url-pattern>/ajaxServlet</url-pattern>
</servlet-mapping>


7862c8292cdd43efbd35bdbe5a7db56a.png


通过上面的代码我们发现。编写原生的 JavaScript 我们自己要写很多的代码。而且还要考虑浏览器兼容问题。所以使用起来非常的不方便。那我们工作之后。怎么处理 Ajax 请求呢。我们一般会使用 JavaScript 的框架来解决这个问 题,比如说我们前面学到的 Jquery 框架。它就有很好的 Ajax 解决方案。  


相关文章
|
6月前
|
JSON 前端开发 JavaScript
axios请求成功而$.ajax却不行排错
axios请求成功而$.ajax却不行排错
59 2
|
6月前
|
前端开发
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
|
12天前
|
XML 前端开发 JavaScript
|
29天前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
57 22
|
29天前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
36 18
|
29天前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
53 4
|
1月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
82 1
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
54 10
React技术栈-react使用的Ajax请求库实战案例
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
32 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
2月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。