0
0

【Ajax入门】实现页面的局部刷新，前后端交互少不了的技术

前言

之前已经学习jQuery了，我们今天在jQuery的基础上继续学习Ajax。如果你不知道jQuery那么你可以先去看看本专栏的上一篇博客。

传送门：【jQuery入门】为JavaScript而生，简化JavaScript操作的神技术

虽然我们是在jQuery的基础上学习Ajax，但是Ajax可是非常非常重要的，在以后的Web开发中会一直用到它的。

目录

初识Ajax

首先要知道Ajax不是一种新的编程语言，而是一种用于

创建更好更快以及交互性更强的Web应用程序的技术。

**它的核心效果是在浏览器中不重载页面的情况（

不刷新页面

）与 Web 服务器

交换数据

，即在不需要刷新页面的情况下，就可以

产生局部刷新的效果

。**

那我们该如何去使用Ajax呢？

Ajax使用流程

（1）创建

XMLHttpRequest对象

（2）发送

Ajax请求

（3）处理

服务器

使用Ajax

创建XMLHttpRequest对象

XMLHttpRequest

用于后台与服务器交换数据，是Ajax的核心

XMLHttpRequest并不是W3C的标准，不同浏览器的创建方式不同。

所以我们创建的时候需要根据浏览器来创建，一般创建格式如下：

var xmlhttp;if(window.XMLHttpRequest){//IE+,Firefox,Chrome,Opera,Safari浏览器执行代码
    xmlhttp =newXMLHttpRequest();}else{//IE6,IE5浏览器执行代码
    xmlhttp =newActiveXOBject("Microsoft.XMLHTTP");}

发送Ajax

想要发送Ajax那么我们首先得创建一个Ajax请求，创建Ajax请求就得使用到我们之前创建的

XMLHttpRequest

对象

xmlhttp

了。

创建语法格式如下：

xmlhttp.open("GET/POST","请求地址URL",true/false);

发送语法格式如下：

xmlhttp.send();

处理服务器响应

首先得知道：

（1）

xmlhttp.onreadystatechange()

事件用于监听Ajax的执行过程。
（2）

xmlhttp.readyState

属性说明XMLHttpRequest当前状态。
readyState值说明readyState=0请求未初始化readyState=1服务器连接已建立readyState=2请求已被接收readyState=3请求正在处理readyState=4响应文本已被接收
（3）

xmlhttp.status

属性服务器响应码：200-成功， 404-未找到…

而我们处理服务器响应一般是要

响应已被接收且服务器处理成功时才执行

一般语法格式为：

xmlhttp.onreadystatechange=function(){//响应已被接收且服务器处理成功时才执行if(xmlhttp.readyState ==4&& xmlhttp.status ==200){//获取响应体的文本var t = xmlhttp.responseText;//对服务器结构进行处理...}}

利用Ajax实现新闻列表

知道了基本如何使用Ajax之后我们就来具体练习一下，来实现一个新闻列表。

首先来创建一个新闻类

publicclassNews{private String title;private String date;private String source;private String content;publicNews(){}publicNews(String title, String date, String source, String content){super();this.title = title;this.date = date;this.source = source;this.content = content;}public String getTitle(){return title;}publicvoidsetTitle(String title){this.title = title;}public String getDate(){return date;}publicvoidsetDate(String date){this.date = date;}public String getSource(){return source;}publicvoidsetSource(String source){this.source = source;}public String getContent(){return content;}publicvoidsetContent(String content){this.content = content;}}

在创建一个servlet对数据进行初始化和处理，我们最后是把这个列表信息转换为JSON格式作为响应传回去。

@WebServlet("/news_list")publicclassNewsListServletextendsHttpServlet{protectedvoiddoGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        List list =newArrayList();//创建新闻列表
        list.add(newNews("TIOBE:2019全球编程语言排行榜","2019-5-1","TIOBE","..."));
        list.add(newNews("TIOBE:2020全球编程语言排行榜","2020-5-1","TIOBE","..."));
        list.add(newNews("TIOBE:2021全球编程语言排行榜","2021-5-1","TIOBE","..."));
        list.add(newNews("TIOBE:2022全球编程语言排行榜","2022-5-1","TIOBE","..."));
        String json = JSON.toJSONString(list);
        System.out.println(json);//控制台打印
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().println(json);}}

然后在HTML页面中使用Ajax

<!DOCTYPE html><html><head><metacharset="UTF-8"><title>Insert title here</title></head><body><divid="container"><scripttype="text/javascript">//1-创建对象var xmlhttp;if(window.XMLHttpRequest){
                xmlhttp =newXMLHttpRequest();}else{
                xmlhttp =newActiveXOBject("Microsoft.XMLHTTP");}//2-发送ajax请求
            xmlhttp.open("GET","/ajax/news_list",true);
            xmlhttp.send();//3-处理响应
            xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState ==4&& xmlhttp.status ==200){var text = xmlhttp.responseText;var json =JSON.parse(text);//把响应体的文本转换为JSON格式var html="";//动态处理每一条JSONfor(var i =0; i < json.length; i ++){var news = json[i];
                        html = html +"<h1>"+ news.title +"</h1>";
                        html = html +"<h2>"+ news.date +"&nbsp"+ news.source +"</h2>";
                        html = html +"<hr/>";}//为id为container的容器添加新创建的html页面
                    document.getElementById("container").innerHTML = html;}}</script></div></body></html>

输出：
在这里插入图片描述

同步与异步

我们创建Ajax语法格式如下：

xmlhttp.open("GET/POST","请求地址URL",true/false);

不知道大家有没有注意到在创建Ajax的时候的第三个参数。

前两个参数都比较容易理解分别是：请求方式与请求url。

但是这里的第三个参数是

true

或者

false

，大家可能理解不了。

这里的第三个参数是代表同步或异步的。

异步处理：就是通过事件触发到 ajax，请求服务器。在这个期间

无论服务器有没有响应，客户端的其他代码一样可以运行。

同步处理：通过实践触发 ajax，请求服务器，在这个期间等待服务器处理请求， 

在这个期间客户端不能做任何处理

。

当 ajax 执行完毕才会继续执行其他代码。

同步：提交Ajax请求->等待服务器处理->处理完毕返回（这个期间客户端浏览器不能干任何事）

异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕

同步需要等待返回结果才能继续，异步不必等待，一般只需要监听异步的结果。

举个简单的栗子：

同步就是你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，直到我告诉你听到了，才一起去吃饭。

异步就是你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到忙完才去吃饭。

**这里要注意Ajax

一般默认true为异步

，我们使用的时候大多数情况下也是使用异步，即：true。**

jQuery对Ajax的支持

之前学习了Ajax的使用流程为：

（1）创建

XMLHttpRequest对象

（2）发送

Ajax请求

（3）处理

服务器

但是如果每次使用Ajax，都要经过这三步的话是不是太麻烦了。

于是jQuery对着Ajax的使用进行了简化封装。

接下来学习一下如何使用jQuery实现Ajax。

jQuery

对

Ajax

操作实现了封装，最后只提供了

$.ajax()

方法来实现

Ajax

操作。

语法格式为：

$.ajax(options);

要提一下的是options是一个JSON类的对象。我们需要在这个JSON类对象中设置参数。

常用设置项
常用设置项说明

url

发送请求地址

type

请求类型get或者post

data

向服务器传递的参数

dataType

服务器响应的数据类型（text/json/xml/html/jsonp/script）

success

接收响应时的处理函数

error

请求失败时的处理函数

练习强化

我们对之前是实现的servlet进行修改一下，然后使用jQuery来对Ajax进行实现。

修改之前的servlet，我们根据传入的参数来做出不同的响应，其他的与之前相同。

@WebServlet("/news_list")publicclassNewsListServletextendsHttpServlet{protectedvoiddoGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        String type = request.getParameter("t");//接收参数
        List list =newArrayList();if(type != null && type.equals("pypl")){
            list.add(newNews("PYPL:2019全球编程语言排行榜","2019-5-1","PYPL","..."));
            list.add(newNews("PYPL:2020全球编程语言排行榜","2020-5-1","PYPL","..."));
            list.add(newNews("PYPL:2021全球编程语言排行榜","2021-5-1","PYPL","..."));
            list.add(newNews("PYPL:2022全球编程语言排行榜","2022-5-1","PYPL","..."));}elseif(type == null || type.equals("tiobe")){
            list.add(newNews("TIOBE:2019全球编程语言排行榜","2019-5-1","TIOBE","..."));
            list.add(newNews("TIOBE:2020全球编程语言排行榜","2020-5-1","TIOBE","..."));
            list.add(newNews("TIOBE:2021全球编程语言排行榜","2021-5-1","TIOBE","..."));
            list.add(newNews("TIOBE:2022全球编程语言排行榜","2022-5-1","TIOBE","..."));}
        String json = JSON.toJSONString(list);
        System.out.println(json);
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().println(json);}}

使用jQuery来实现Ajax，这里参数我们设置为pypl，并且只打印出标题即可。

<!DOCTYPE html><html><head><metacharset="UTF-8"><title>Insert title here</title><scripttype="text/javascript"src="js/jquery-3.6.0.js"></script><scripttype="text/javascript">$(function(){
        $.ajax({"url":"/ajax/news_list","type":"get","data":{"t":"pypl"},//多个参数用逗号隔开即可"dataType":"json","success":function(json){for(var i =0; i < json.length; i ++){$("#container").append("<h1>"+ json[i].title +"</h1>");}},"error":function(xmlhttp, errorText){if(xmlhttp.status =="405"){alert("无效的请求方式");}elseif(xmlhttp.status =="404"){alert("URL资源不存在");}elseif(xmlhttp.status =="500"){alert("服务器内部产生异常，请联系管理员");}else{alert("产生异常，请联系管理员!");}}})})</script></head><body>
    <div id ="container"></div></body></html>

输出：
![在这里插入图片描述](https://img-blog.csdnimg.cn/d876b9535300482eb22dd8dc54493394.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAX-eZveeZveS4jeeZvQ==,size_20,color_FFFFFF,

结语

内容虽然比较短，但是Ajax的重要性我们时不能忽视的，下去之后要多多练习，熟能生巧。

本专栏持续更新中…

标签： Servlet ajax jquery
本文转载自: https://blog.csdn.net/apple_51673523/article/details/123478099
版权归原作者 _白白不白 所有， 如有侵权，请联系我们删除。
登录后发布评论

“【Ajax入门】实现页面的局部刷新，前后端交互少不了的技术”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

机器人技术在安全领域的重要作用

安全学习记录——网络篇（一）

图腾柱PFC：HP1010为您的电动两轮车之旅提供绿色，高效，安全的动力

单元测试数据库回滚问题

这才是单元测试，之前我们都错了

【C语言基础】：字符函数和字符串函数

ChatGPT-Next-Web SSRF漏洞+XSS漏洞复现(CVE-2023-49785)

文章导航