1.传统请求和异步请求
传统请求：基于超级链接 地址栏form表单 地址栏location.href发起的请求全部是传统请求
特点：请求之后，刷新整张页面
缺点：由于刷新了整张页面，用户操作被中断，造成大量网络流量的极大浪费
异步请求：基于ajax发起的请求都是异步请求
特点：多个请求并行发生，请求之间互不影响，请求之后页面不动，刷新页面局部
2.什么是Ajax
Ajax即"Asynchronous Javascript And XML"（异步JavaScript和XML）。他不是一种新的编程语言，而是一种通过异步实现网页的局部刷新技术
3.Ajax的核心对
XMLHttpRequest对象是一个javascript对象，存在着浏览器差异。简称xhr对象
4.Ajax的编程思路
1.创建xhr核心对象var xhr;//目前为止：浏览器内核webkit | ie系edge（微软）edge wbkit//window.XMLHttpRequest ===> true|webkit false|ie系内核if(window.XMLHttpRequest){ //是webkitxhr = new XMLHttpRequest();}else{//是ie系内核xhr = new ActiveXObject("Microsoft.XMLHTTP");}2.发送请求，并传递参数xhr.open("GET", "url?username=shangsan"); //设置请求方式和请求路径xhr.send(null);3.处理响应，并更新页面局部//xhr.readyState 0|xhr没有初始化 1|xhr创建 2|发送请求 3|响应回来，不完整 4|完整响应//xhr.status 404|路径找不到 500|程序出错 405|service方法名出错 200|正确响应xhr.onreadystatechange = function(){if(xhr.readyState == 4 && xhr.status == 200){//处理完整且正确的响应console.log(xhr.responseText); //xhr.responseText ===> "ok"//之后进行页面更新操作 js操作 jquery操作}}
xxxAction private String username; set/get 省略 public String xxx(){ //1.收集数据 //2.调用业务对象 //3.响应结果 response = ServletActionContext.getResponse(); response.getWriter().print("ok"); return null; }注意：ajax发起的请求action中对应方法一定不能有返回值
action在响应结果时，ajax只认字符串，不认其他操作，所以只能通过流
5.提交方式POST和GET区别
区别
post是向服务器传送数据；get是从服务器上获取数据。
在客户端，get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。
post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
例如：get 提交Request.QueryString["aa"].ToString();
post 提交用 Request.Form["aa"].ToString();
get可以传送的数据量则非常小，只能有1024字节，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
安全性问题。正如在（1）中提到，使用 get 的时候，参数会显示在浏览器地址栏上，而 post 不会。
使用建议
get方式的安全性较post方式要差些，但是执行效率却比post方法好。
如果这些数据是中文数据而且是非敏感数据，那么使用 get；如果用户输入的数据不是中文字符而且包含敏感数据，包含机密信息的话，建议用post数据提交方式为好；
在做数据查询时，建议用get方式；而在做数据添加、修改或删除时，建议用post方式；
总结：（简答）
get的参数会显示在浏览器地址栏中，而post的参数不会显示在浏览器地址栏中；
使用post提交的页面在点击【刷新】按钮的时候浏览器一般会提示“是否重新提交”，而get则不会；
用get的页面可以被搜索引擎抓取，而用post的则不可以；
用post可以提交的数据量非常大，而用get可以提交的数据量则非常小(2k)，受限于网页地址的长度。
用post可以进行文件的提交，而用get则不可以。
6.发送GET方式请求
$(function(){ //1.创建xhr对象 var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //2.发送请求，并传递参数 xhr.open("GET", "url/test?name=zhangsan"); xhr.send(); //3.处理响应 xhr.onreadystatechange = function(){ if(xhr.readyState==4 && xhr.status==200){ console.log(xhr.responseText); } }});注意：上述操作需引入JQuery依赖（导入JQuery包）且在js中填写
GET方式是地址栏传参
7.发送POST方式请求
//常规的POST请求都是由form表单来做的<form method="post" action="..." enctype=""> // enctype一般不写, 有下面两种数据可以填写 // application/x-www-form-urlencoded 默认 给表单数据进行编码 // multipart/form-data 用来对表单中二进制类型进行编码（用于文件上传，不是默认值是由于效率问题） 用户名 <input type="text" name="name"/> 提交</form>
使用ajax进行post方法
1.创建xhrvar xhr;if(window.XMLHttpRequest){ xhr = new XMLHttpRequest();}else{ xhr = new ActiveXObject("Microsoft.XMLHTTP");}2.发送请求，并传递参数xhr.open("POST", "url");//模拟表单传递参数xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");xhr.send("name=zhangsan&password=123");3.处理响应，并更新页面局部xhr.onreadystatechange = function(){ if(xhr.readyState==4 && xhr.status==200){ xhr.responseText; //返回字符串 }}8.Ajax的数据交换机制
JSON (JavaScript Object Notation, JS对象标记) 是一种轻量级的数据交换格式
1.如果服务端响应的不再是字符串而是对象或者是集合类型时，无法直接将对象响应给客户端如：User、List<User>、Map<String, User> 需要将对象转为JSON格式字符串响应给ajax2.如何将对象转为json格式的字符串User user = new User("21", "chenyu", 23, 123, 0);String userJson = JSONObject.toJSONString(user); //阿里巴巴的fastjson jsonresponse.setContentType("application/json;charset=UTF-8");PrintWriter writer = response.getWriter();writer.out(userJson);3.前端的ajax函数中应该如何处理json格式的字符串xhr.onreadystatechange = function(){if(xhr.readyState==4 && xhr.status==200){var json = xhr.responseText;//jsonvar userObj = eval("("+xhr.responseText+")"); //转为js对象console.log(userObj.id);console.log(userObj.name);}}4.处理json字符串中的日期格式问题var userJson = JSONObject.toJsonStringWithDateFormat(user, "yyyy-MM-dd");
9.jQuery对Ajax的封装
现有ajax请求存在的问题：
每次发起ajax请求，需要写大量重复性代码，极大影响我们开发效率
由于大量的重复性代码，导致日后代码维护难度加大
封装ajax思想，可以写一个js，例如:ajax.js，定义get和post方法，方便页面的js使用
//用来发起get方法请求的函数function get(url, param, aa){//aa是回调函数 //创建xhr var xhr; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //发送请求并传递参数 url = param?url+"?"+param:url; xhr.open("GET", url); xhr.send(); //处理响应，并更新页面 xhr.onreadystatechange = function(){ if(xhr.readyState==4 && xhr.status==200){ aa(xhr.responseText); } }}//用来发起post方法请求的函数function post(url, param, aa){//aa是回调函数 //创建xhr var xhr; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //发送请求并传递参数 xhr.open("POST", url); xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); xhr.send(param); //处理响应，并更新页面 xhr.onreadystatechange = function(){ if(xhr.readyState==4 && xhr.status==200){ aa(xhr.responseText); } }}回调函数：给js中传了一个函数，然后在js文件中完成了函数的调用
jQuery对ajax的封装1.使用jQuery对象对ajax封装a.在对应页面中引入jquery相关的js文件<script src=".../js/jQuery-min-xx.js"></script>b.如何使用jQuery封装ajax （百度搜索jquery api）1) $.ajax(); //通用的、可配置的ajax请求 发送GET|POST请求 可配置...//$ === jQuery 等价$.ajax({type: "GET|POST",url: "请求后台路径"，data: {}|"", //{username:"zhangsan", age:23}|"username=zhangsan&age=23"success: function(result){result;//就是当前返回的响应结果//如果请求的url对应返回的是一个json格式数据，jQuery自动将json转为相应js对象//如果请求的url对应返回的是一个普通格式字符串，jQuery返回的就是字符串本身}});2) $.get(); //只能发起GET方式的ajax请求，返回json|字符串$.get(url,[data],[callback],[datatype])url: 请求路径data: 请求参数，可有可无callback: 响应回来回调函数，可有可无 function(result){result}dataType: 定义服务器返回格式 "JSON" = application/json3) $.getJSON(); //只能发起GET方式的ajax请求，要求返回数据必须是json格式数据$.getJSON(url,[data],[callback])url: 请求路径data: 请求参数，可有可无callback: 响应回来回调函数，可有可无 function(result){result}4) $.post(); //只能发起POST方式的ajax请求，返回json|字符串$.post(url,[data],[callback],[datatype])url: 请求路径data: 请求参数，可有可无callback: 响应回来回调函数，可有可无 function(result){result}dataType: 定义服务器返回格式 "JSON" = application/json
例：1.jQuery提供了一个全局函数 $.ajax({ type: "POST|GET", url: "", data: "name=张三|{key:value}", dataType:"JSON", success:function(result){ console.log(result); } })2.发送GET方式的异步请求 $.get(url, data, function(result){},'JSON');3.发送POST方式的异步请求 $.post(url,data, function(result){},'JSON')
