一文整理简单的Ajax请求知识，看了你还会不懂？ -JavaWeb终篇

写在前面： 我是一名大一专科生，热爱Java，刚自学完JavaWeb阶段，这篇文章是对Ajax的总结，写作不易，转载请声明。
本文若有些内容出错请大佬指点。这篇文章需要有一定的JS基础与Java基础
写了好久，若本文对你有帮助可以给我点赞支持 ^ _ ^
作者公众号：小白编码

本文目录

一、什么是Ajax？
二、Ajax的优点与缺点

优点：
缺点：

三、同步与异步：

同步：
异步：

四、Ajax的使用与实现介绍（配合Java，JSON）

原生JS写Ajax请求：
使用JQuery写Ajax请求：

五、状态信息，响应码

readyState：5种状态变化

六、使用GET还是POST？
七、异步 - True 或 False？

Async = true
Async = false

八、常见的响应状态码：
最后：

一、什么是Ajax？

其实AJAX = Asynchronous Javascript And XML = （异步JavaScript + Xml.

Ajax是指一种创建交互式网页应用的网页开发技术。

它不是一门新的语言，而是一种可以用原生JS与服务端j交互的手段

他的机制：同步请求,异步请求

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

例如：注册登陆时，你输入的用户名若已经存在，ajax可以提前请求让服务端响应告诉你用户名已经存在

二、Ajax的优点与缺点

优点：

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面
Ajax最大的优点就是能在不更新整个页面前提，维护数据，使得Web应用程序更为迅捷地回应用户动作
Ajax不需要任何的插件，它只需要使用原生JS就可以发起请求

缺点：

对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。
它可能破坏浏览器的后退与加入收藏书签功能。

三、同步与异步：

同步：

同步就指在同一个进程执行一个请求时，若前面的代码没有响应完，那么这个进程会等待这个前边代码请求响应完才能够执行后边的代码。

异步：

前面说了同步，那么异步就是不管进程任何状态，进程不会等待前边的代码执行完才去执行后边，而是进程继续执行后边的代码，无论前边有没有响应返回。

那么简单的说： 同步就比如我和朋友出去玩，朋友需要剪头发，那么我就坐着等朋友剪完头发才一起去玩。那么异步，就相当于朋友在剪头发，而我可以先出去买点东西，然后朋友在跟上我。

四、Ajax的使用与实现介绍（配合Java，JSON）

手绘图片：
在这里插入图片描述

这里我只演示两种： 原生js与jquery的$.ajax（ $.get 方法和$ .post 方法$.getJSON 方法基本同理)

原生JS写Ajax请求：

在这里使用javaScript 语言发起 ``Ajax 请求，访问服务器AjaxServlet 中javaScriptAjax
首先要创建XMLHttpRequest
调用open方法设置请求参数
在send方法前绑定onreadystatechange 事件，处理请求完成后的操作。
调用send方法发送请求

JS代码：（JavaServlet程序代码在后边）

<!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 xmlHttpRequest = new XMLHttpRequest();
// 				2、调用open方法设置请求参数
            xmlHttpRequest.open("GET","http://localhost:8080/12_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true);
// 				4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
            xmlHttpRequest.onreadystatechange = function () {
                // readyState 等于 4 且状态为 200 时，表示响应已就绪：
                if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                    //解析为JSON字符串
                    var jsonStr = JSON.parse(xmlHttpRequest.responseText);
                    //把响应的内容写到页面上
                    //为了让用户有更好的体验：把响应的内容格式化写到页面上
                    document.getElementById("div01").innerHTML = "编号为：" + jsonStr.id + ",姓名为：" + jsonStr.name;
                }
            };
// 				3、调用send方法发送请求
            xmlHttpRequest.send();
        }
    </script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01">
</div>
</body>
</html>

请求结果：（JavaServlet程序代码在后边）

在这里插入图片描述

使用JQuery写Ajax请求：

$.ajax 方法

url表示请求的地址
type表示请求的类型GET 或POST 请求
-data表示发送给服务器的数据
格式有两种：
一：name=value&name=value
二：{key:value}
-success 请求成功，响应的回调函数
dataType 响应的数据类型
常用的数据类型有：
text表示纯文本
xml表示xml 数据
json表示json 对象

<!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" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            // ajax请求
            $("#ajaxBtn").click(function () {
                $.ajax({
                    //请求地址
                    url: "http://localhost:8080/12_json_ajax_i18n/ajaxServlet",
                    //表示发给服务器的数据
                    // data:"action=jQueryAjax",
                    data: {action: "jQueryAjax"},
                    //表示请求类型
                    type: "GET",
                    //请求成功，响应的回调函数
                    //加一个参数msg，就是服务器返回的参数：success:function(msg)
                    success: function (respondData) {
                        //若dataType类型是text,则要转成json对象
                        // var jsonObj = JSON.parse(msg);
                        //   respondData    返回的是josn对象 {name:"小白",id:"1",}  key:value
                        //此时因为返回的是json对象，可以直接调用它的key获得value值
                        $("#msg").html("ajax - 编号：" + respondData.id + "，姓名：" + respondData.name);
                    },
                    //响应的数据类型
                    dataType: "json",
                });
            });
        });
    </script>
</head>
<body>
<div>
    <button id="ajaxBtn">$.ajax请求</button>
</div>
<div id="msg"></div>
</body>
</html>

请求结果：

在这里插入图片描述

JavaServlet代码：

//JavaBean：（get，set，构造器，tostring）自行写
public class Person {
    private String name;
    private Integer id;
}
//BaseServlet：
public abstract class BaseServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws UnsupportedEncodingException {
       //解决post请求的中文乱码问题
        req.setCharacterEncoding("UTF-8");
        //解决响应乱码
        resp.setContentType("text/html;charset=UTF-8");
        //得到Action的信息，调用指定的方法
        String action = req.getParameter("action");
        try {
            // 获取action 业务鉴别字符串，获取相应的业务方法反射对象
            Method method = this.getClass().getDeclaredMethod(action,HttpServletRequest.class,HttpServletResponse.class);
            method.invoke(this,req,resp);
        } catch (Exception e) {
            e.printStackTrace();
            throw new RuntimeException(e);
        }
    }
}
//AjaxServlet：
public class AjaxServlet extends BaseServlet {

    protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
        Person person = new Person("小白",1);
        //转化Json格式的字符串
        Gson gson = new Gson();
        String personJsonStr = gson.toJson(person);
             //写出参数给客户端
        resp.getWriter().write(personJsonStr);
    }

    protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        Person person = new Person("小白",1);

        //转化Json格式的字符串
        Gson gson = new Gson();
        String personJsonStr = gson.toJson(person);
//        {name:"小白",id:"1",}  key:value
        //写出参数给客户端
        resp.getWriter().write(personJsonStr);
    }
}

五、状态信息，响应码

readyState：5种状态变化

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status：

200: “OK”
404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

六、使用GET还是POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

来源W3School

七、异步 - True 或 False？

Async = true

发送异步请求是一个巨大的进步。前面也有解释同步与异步的优缺点。

Async = false

JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。所以一般都不推荐使用false

来源W3School

八、常见的响应状态码：

200: “OK”表示服务器已经成功接受请求，并将返回客户端所请求的最终结果
304： 该资源在上次请求之后没有任何修改（这通常用于浏览器缓存机制，使用GET请求时尤其需要注意）。
403: 服务器拒绝请求。
202： 表示服务器已经接受了请求，但是还没有处理，而且这个请求最终会不会处理还不确定
404: 请求失败，服务器找不到请求的网页或网页不存在。
408: 服务器等候请求时发生超时。
500: 服务器遇到未知的错误，导致无法完成客户端当前的请求。
204： 服务器成功处理了请求，但没有返回任何实体内容，可能会返回新的头部元信息

最后：

写这篇文章写了好久，若有不妥，请大佬指点。

CodeWhite077

原创文章 20 获赞 77 访问量 2934

关注私信