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指定类型。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
