Ajax异步数据交互----(JavaScript原生版和jQuery封装版)
Ajax(Asynchronous JavaScript and XML)不是一门独立的技术，它是由HTML、JavaScript、CSS和DOM等技术组成。
传统的Web应用允许用户填写表单，当提交表单时就向服务器发送一个请求，服务器接收并处理用户提交过来的表单数据，并返回一个新的网页给用户，这样的做法会浪费许多带宽，由于每次的应用交互都要向服务器发送请求，应用的响应时间依赖于服务器的响应时间，导致了用户界面的响应时间慢，给予用户不佳的体验。
Ajax很有用的地方就在于不刷新页面并且访问数据库处理数据(如在注册情景下，检测用户名是否已经存在，并返回结果的过程)，并按照数据的处理结果按你想要的方式对界面做出即时的更改。总体上，使用Ajax具有如下优势:
- 减轻客户端的内存消耗。
- 无刷新更新页面，给用户一种连续的体验。
- 将传统的服务器工作转嫁到客户端，从而减轻服务器和带宽的负担，节约空间和带宽的租用成本。
- 基于标准化技术。
使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果，理念为“按需取数据”。
JS版本的Ajax使用
在JS中使用XMLHTTPRequest对象时需要注意不同浏览器之间对它的实现，在IE中把XMLHTTPRequest实现为ActiveX控件对象，二其他浏览器把它实现为一个本地的javascript对象。所以创建时为了兼容需在代码中添加判断逻辑创建相应的服务器所需的XMLHTTPRequest对象,下表是它的方法。
| 方 法 | 描 述 |
| abort() | 停止当前请求 |
| getAllResponseHeaders() | 把HTTP请求的所有响应首部作为键/值对返回 |
| getResponseHeader("header") | 返回指定首部的串值 |
| open("method","URL",[asyncFlag],["userName"],["password"]) | 建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码 |
| send(content) | 向服务器发送请求 |
| setRequestHeader("header", "value") | 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 ) |
注意:open()方法中三个参数分别为发送数据的方式(get/post)、发送数据的目标URL、是否异步发送(true/false;如果不填默认为true，异步发送)。
get和post发送数据方式的区别:get方式发送数据，在第二个参数URL后面追加?xxx=xxx(键值对结构发送)，如果多个数据则以&连接，即是?xxx=xxx&yyy=yyy
post方式发送数据，需在open()方法之后和send()方法之前设置请求的响应头xmlHTTP.setRequestHeader("Content-type","application/x-www-form-urlencoded")，并且在send()方法中以键值对的形式发送数据,如send("username="+username);
五步使用法:
1.创建XMLHTTPRequest对象
2.使用open方法设置和服务器的交互信息
3.设置发送的数据，开始和服务器端交互
4.注册事件
5.更新界面
下面用一个小案例实现Ajax的数据交互:
需求:在用户输入完用户名后返回用户名是否存在，显示在输入框旁。
实现:1.页面显示只需要一个输入框和span来显示用户名在数据库中的状态,以post方式进行ajax的数据交互
2.页面的js代码部分需要创建Ajax进行异步通信的核心对象XMLHTTPRequest对象、获取用户输入的用户名、将用户名以Ajax以GET/POST的方式发送给指定的URL(负责逻辑判断的servlet部分)、对XMLHTTPRequest对象的进行监听readyState和status，如果readyState==4并且status==200那么表示服务器响应成功，依据服务器返回的数据对前端页面进行更改或者提示，我的这个案例就是在span中提示用户名的状态
3.后端servlet部分是负责接收前台发送过来的数据，使用C3P0数据源连接池和DBUtils对数据库进行连接和查询用户名，并返回JavaBean实体类，即时User类，如果不为null表示数据库中已经存在，不能使用，response.getWriter().write("0"),往前端返回0，前端根据返回值进行span提示；反之可以使用,response.getWriter().write("1")。
代码部分:
index.jsp(页面显示部分)：
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>用户注册</title> <script> //全局变量声明XMLHTTPRequsert对象，方便各方法使用 var xmlHTTP; //创建XMLHTTPRequest对象 function createXMLHTTPRequest() { if(window.ActiveXObject){ //IE5、6对XMLHTTPRequest的实现 xmlHTTP=new ActiveXObject("Microsoft.XMLHTTP"); }else{ // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlHTTP=new XMLHttpRequest(); } } //获取用户输入的用户名 function checkName() { var name=document.getElementById("username"); if(name.value.length==0){ alert("请输入用户名"); }else{ doAjax(name.value); } } //进行Ajax操作，将用户名异步发送到服务器 function doAjax(username) { //创建XMLHTTPRequest对象 createXMLHTTPRequest(); //建立连接（方式、URL、是否异步） xmlHTTP.open("post","AcceptAjax",true); //POST传送数据到后台服务器，需要设置请求头，这是与GET不同的地方 xmlHTTP.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //对该对象进行监听 xmlHTTP.onreadystatechange=function () { //对readyState和status进行判断，如果响应成功则获取后台返回的数据 if(xmlHTTP.readyState==4&&xmlHTTP.status==200){ //获取响应数据 var value=xmlHTTP.responseText; var messageshow=document.getElementById("messageshow"); if(value=="0"){ messageshow.style.color="red"; messageshow.innerText="用户名存在"; }else{ messageshow.style.color="green"; messageshow.innerText="用户名可用"; } } } //post方式在send中以键值对的方式发送数据，后台则以getParameter()方法获取用户发送过去的数据 xmlHTTP.send("username="+username); } </script> </head> <body> <form action="" method="post"> 用户名:<input type="text" name="username" id="username" onblur="checkName()"> <span id="messageshow"></span> </form> </body> </html>
AcceptAjax(servlet逻辑判断部分):
@Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //设置响应的类型和编码格式 resp.setContentType("html/text;charset=UTF-8"); //获取前台发来的数据 String username = req.getParameter("username"); //获取C3P0数据源连接池中的数据源 DataSource dataSource=new ComboPooledDataSource(); //用DBUtils工具类对数据库进行查找操作 QueryRunner qr=new QueryRunner(dataSource); //查找用户输入的用户名在数据库中是否存在，sql查询语句返回一个User对象，如果存在即不为空，给前台返回"0"反之不存在返回"1" try { //new BeanHandler<>(User.class)以反射为基础new对象，设定返回对象的类 User query = qr.query("select * from user where username=?", new BeanHandler<>(User.class), username); if(query!=null){ resp.getWriter().write("0"); }else{ resp.getWriter().write("1"); } } catch (SQLException e) { e.printStackTrace(); }finally { return; } }
User(JavaBean实体类)
public class User { private String username; public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } }
简单数据库部分（MYSQL）:
2018.01.31 记
补充:
JQuery版本的Ajax使用
JQuery的Ajax操作，对JavaScript底层Ajax操作进行了封装，提供了两种方法进行操作,可以用IDEA的模板工具做成模板，智能提示快捷使用。
特别地，------>jQuery有一个吸引人的功能就是它所提供的Ajax支持，提供了大量的工具方法:
jQuery.param(obj)：将obj参数转换为查询字符串。
serialize()：将该jQuery对象包含的表单或表单控件转换为查询字符串，如username=alice&age=20的格式，极大地方便了我们进行数据发送。
serializeArray()：序列化表单元素（类似 .serialize() 方法），返回 JSON 数据结构数据，返回的 JSON 对象是由一个对象数组组成的。
对于json，有个快捷的工具类Gson的toJson（object o）方法可以将java的对象转换为json返回前端，截取片段。
User转换为json:
Gson gson=new Gson(); String s = gson.toJson(user); resp.getWriter().write(s);
第一种是底层的$.ajax()操作（参数为常用的几种，后有详细参数大全和回调函数）：
$.ajax({ url:"url", //指定的URL type:"get", //发送的方式 dataType:"json", //发送的数据类型,json可以将javascript对象中表示的一组数据转换为字符串，格式为{"xxx":"yyy"}形式出现 data:{ userID:"1" //发送的json数据 }, success:function(response){ //Ajax响应成功的回调函数 }, error:function() { //指定服务器响应出错的回调函数 } });
第二种是快捷操作$.get()..$.post()...:
$.get( "url", {userID:"123"}, function(response) { } )
$.post( "url", {userID:"123"}, function(response) { } )
补充:
$ajax（）中的参数大全:
- options
类型：Object
可选。AJAX 请求设置。所有选项都是可选的。
- async
类型：Boolean
默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
- beforeSend(XHR)
类型：Function
发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。
XMLHttpRequest 对象是唯一的参数。
这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。
- cache
类型：Boolean
默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
jQuery 1.2 新功能。
- complete(XHR, TS)
类型：Function
请求完成后回调函数 (请求成功或失败之后均调用)。
参数： XMLHttpRequest 对象和一个描述请求类型的字符串。
这是一个 Ajax 事件。
- contentType
类型：String
默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。
- context
类型：Object
这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。
就像这样：
$.ajax({ url: "test.html", context: document.body, success: function(){ $(this).addClass("done"); }});- data
类型：String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
- dataFilter
类型：Function
给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。
- dataType
类型：String
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
- "xml": 返回 XML 文档，可用 jQuery 处理。
- "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
- "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
- "json": 返回 JSON 数据 。
- "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
- "text": 返回纯文本字符串
- error
类型：Function
默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 "timeout", "error", "notmodified" 和 "parsererror"。
这是一个 Ajax 事件。
- global
类型：Boolean
是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
- ifModified
类型：Boolean
仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中，它也会检查服务器指定的 'etag' 来确定数据没有被修改过。
- jsonp
类型：String
在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分，比如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器。
- jsonpCallback
类型：String
为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。
- password
类型：String
用于响应 HTTP 访问认证请求的密码
- processData
类型：Boolean
默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
- scriptCharset
类型：String
只有当请求时 dataType 为 "jsonp" 或 "script"，并且 type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。
- success
类型：Function
请求成功后的回调函数。
参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
这是一个 Ajax 事件。
- traditional
类型：Boolean
如果你想要用传统的方式来序列化数据，那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。
- timeout
类型：Number
设置请求超时时间（毫秒）。此设置将覆盖全局设置。
- type
类型：String
默认值: "GET")。请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
- url
类型：String
默认值: 当前页地址。发送请求的地址。
- username
类型：String
用于响应 HTTP 访问认证请求的用户名。
- xhr
类型：Function
需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。
回调函数
如果要处理 $.ajax() 得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete。
beforeSend
在发送请求之前调用，并且传入一个 XMLHttpRequest 作为参数。
error
在请求出错时调用。传入 XMLHttpRequest 对象，描述错误类型的字符串以及一个异常对象（如果有的话）
dataFilter
在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。并且必须返回新的数据（可能是处理过的）传递给 success 回调函数。
success
当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete
当请求完成之后调用这个函数，无论成功或失败。传入 XMLHttpRequest 对象，以及一个包含成功或错误代码的字符串。
