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

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

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

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

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

1 functionbuttonOnClick() {2 //页面数据

3 var info = ‘content=‘ + document.getElementById(‘contentId‘).value;4 //xhr对象

5 varxhr;6 /*

7 * XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。8 * XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。9 * XMLHttpRequest 得到了所有现代浏览器较好的支持。唯一的浏览器依赖性涉及 XMLHttpRequest 对象的创建。 在 IE 5 和10 * IE 6 中，必须使用特定于 IE 的 ActiveXObject() 构造函数 以上说明来自W3school11 */

12 if(window.XMLHttpRequest) {13 xhr = newXMLHttpRequest();14 } else{15 xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);16 }17 xhr.onreadystatechange = function() {18 /*

19 * 0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。 1 Open20 * open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。 2 Sent Send() 方法已调用，HTTP21 * 请求已发送到 Web 服务器。未接收到响应。 3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。 4 Loaded22 * 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 returnajaxsuccess(xhr.responseText);37 }38 }39 }40 /*

41 * 第一个参数为发送请求方式，常用POST/GET，不区分大小写，但是通常大写。42 * ‘GET’用于常规请求，它适用于URL完全指定的资源。当请求对服务器没有任何副作用是可缓存的情况下，43 * ‘POST’常用于含有额外的数据的请求44 *45 * 第二个参数为url46 *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 functionajaxsuccess(resTxt) {79 console.log(‘成功‘);80 console.log(resTxt);81 }

简单且常用的原生ajax过程

以下是servlet代码

1 /**2 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse3 * response)4 */

5 protected voiddoPost(HttpServletRequest request, HttpServletResponse response)6 throws ServletException, IOException {7 /*

8 * 本例中9 * 分号之前10 *‘/‘之前 媒体格式，常见text application11 * text/plain 为普通文本12 *13 *‘/‘之后 常用的有14 * html html代码15 * xml xml16 * javascript js17 * 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指定类型。