原生ajax及其与服务器交互（java）学习笔记

Posted 2020-10-30 SaltFishYe

ajax主要用于与服务器进行异步交互数据（当然技术上也能做同步处理）。

因为传统的非ajax的web交互，是整个浏览器将数据传到后台处理，而后台处理时，用户只能等待，这样就非常效率低下。而且服务器会返回整个html页面，用户还得等待整个页面加载。这样是非常浪费资源。

ajax就可以做到在用户触发ajax请求的同时，任然能够进行操作，并且服务处理且返回数据时不进行页面重新加载，而用户也可以得到想要的数据。

以下直接通过代码和相应注释解释ajax请求过程

 1 function buttonOnClick() {
 2     // 页面数据
 3     var info = ‘content=‘ + document.getElementById(‘contentId‘).value;
 4     // xhr对象
 5     var xhr;
 6     /*
 7      * XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。
 8      * XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。
 9      * XMLHttpRequest 得到了所有现代浏览器较好的支持。唯一的浏览器依赖性涉及 XMLHttpRequest 对象的创建。 在 IE 5 和
10      * IE 6 中，必须使用特定于 IE 的 ActiveXObject() 构造函数 以上说明来自W3school
11      */
12     if (window.XMLHttpRequest) {
13         xhr = new XMLHttpRequest();
14     } else {
15         xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
16     }
17     xhr.onreadystatechange = function() {
18         /*
19          * 0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。 1 Open
20          * open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。 2 Sent Send() 方法已调用，HTTP
21          * 请求已发送到 Web 服务器。未接收到响应。 3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。 4 Loaded
22          * HTTP 响应已经完全接收。 readyState 的值不会递减
23          */
24         if (xhr.readyState == 4) {
25             // status为http状态码，内容过多，不详细展开，大体分为五类
26             /*
27              * 1XX 100-101 信息提示 2XX 200-206 成功 3XX 300-305 重定向 4XX 400-415 客户端错误
28              * 5XX 500-505 服务器错误
29              */
30             if (xhr.status == 200) {//表示成功
31                 /*
32                  * responseText 响应内容作为文本
33                  * 
34                  * responseXML 响应内容作为xml文档
35                  */
36                 return ajaxsuccess(xhr.responseText);
37             }
38         }
39     }
40     /*
41      * 第一个参数为发送请求方式，常用POST/GET，不区分大小写，但是通常大写。
42      * ‘GET’用于常规请求，它适用于URL完全指定的资源。当请求对服务器没有任何副作用是可缓存的情况下，
43      * ‘POST’常用于含有额外的数据的请求
44      * 
45      * 第二个参数为url
46      * 
47      * 第三个参数为是否异步请求，默认为true，异步请求
48      */
49     xhr.open(‘POST‘, ‘/WebDemo/ServletDemoA‘, true);
50 
51     /*
52      * Http Header里的Content-Type一般有这三种：
53      * 
54      * application/x-www-form-urlencoded：数据被编码为名称/值对。这是标准的编码格式。
55      * 
56      * multipart/form-data： 数据被编码为一条消息，页上的每个控件对应消息中的一个部分。 text/plain：
57      * 
58      * 数据以纯文本形式(text/json/xml/html)进行编码，其中不含任何控件或格式字符。postman软件里标的是RAW。
59      * 
60      * form的enctype属性为编码方式，常用有两种：application/x-www-form-urlencoded和multipart/form-data，默认为application/x-www-form-urlencoded。
61      * 
62      * 上传文件时。
63      * 也就是有type=file控件，要用multipart/form-data了，指定传输数据为二进制类型
64      * 
65      * 当action为post且Content-Type类型是multipart/form-data，浏览器会把整个表单以控件为单位分割，
66      * 并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息，并加上分割符(boundary)。
67      * 
68      * 当action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2...），然后把这个字串追加到url后面，用?分割，加载这个新的url。
69      * 
70      * 当action为post时候，浏览器把form数据封装到http body中，然后发送到server。
71      * 因为url长度有限所以get请求的数据是有限的，而post无限
72      */
73     // Content-type详细内容见Content-type对照表
74     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
75     xhr.send(info);
76 }
77 
78 function ajaxsuccess(resTxt) {
79     console.log(‘成功‘);
80     console.log(resTxt);
81 }

简单且常用的原生ajax过程

以下是servlet代码

 1 /**
 2      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
 3      *      response)
 4      */
 5     protected void doPost(HttpServletRequest request, HttpServletResponse response)
 6             throws ServletException, IOException {
 7         /*
 8          * 本例中
 9          * 分号之前
10          *‘/‘之前 媒体格式，常见text application
11          * text/plain 为普通文本
12          * 
13          *‘/‘之后 常用的有
14          * html html代码
15          * xml xml
16          * javascript js
17          * json json对象
18          * 详细见content-Type对照表
19          * 
20          * utf-8 为编码格式，不详细展开，都懂。。。。
21          */
22         response.setContentType("text/plain;charset=utf-8");
23         // 传输的数据到前台
24         // response.getWriter().write("success");
25         // 完成操作的对象为java.io.PrintWriter，通过io输出流传递数据
26         PrintWriter writer = response.getWriter();
27         writer.write("success");
28     }

 

补充说明

contentType是向服务器说明输出的数据是什么。

而在jqeury中的ajax有一个属性dataType，是用于说明要接受的数据类型，并强制转换，并且可能导致失败。

当dataType没指定时，将会自动推断并将返回数据转型，特别是contentType中指明数据类型时。

要是dataType有指定，则无论contentType内容，都将返回的数据转换为dataType指定类型。