Ajax总结
1.什么是同步，什么是异步？
同步：客户端发送请求到服务器，在服务器返回响应之前，客户端都是处于等待卡死状态。
异步：客户端发送请求到服务器，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死。
2.Ajax的原理
页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以做任意其他操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码，完成某种页面功能。
一：js原生Ajax技术
1.创建Ajax引擎对象
2.为Ajax引擎对象绑定监听(监听服务器已将数据响应给引擎)
3.绑定提交地址
4.发送请求
5.接收响应数据
js原生Ajax技术-----get请求并带参数
//原生ajax——get请求 function fun1(){ //1.创建ajax引擎对象 var xmlHttp=new XMLHttpRequest(); //2.绑定监听---监听服务器是否已经返回相应数据 xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==4&&xmlHttp.status==200){ //5.接收服务器返回数据 var res=xmlHttp.responseText; alert(res) } } //3.绑定请求地址 true：表示异步 xmlHttp.open("GET", "${pageContext.request.contextPath}/ajaxDemo1?age=20",true); //4.发送请求 xmlHttp.send(); }
js原生Ajax技术-----post请求并带参数
//原生ajax——post请求 function fun2(){ //1.创建ajax引擎对象 var xmlHttp=new XMLHttpRequest(); //2.绑定监听---监听服务器是否已经返回相应数据 xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==4&&xmlHttp.status==200){ //5.接收服务器返回数据 var res=xmlHttp.responseText; alert(res) } } //3.绑定请求地址 true：表示异步 xmlHttp.open("POST", "${pageContext.request.contextPath}/ajaxDemo1",true); xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded") //4.发送请求 xmlHttp.send("age=20"); }
原生ajax的get与post请求格式的不同：
1.post请求需要在发送前设置 头 ：xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
2.参数不再拼接在请求地址后，而是写在 ： xmlHttp.send( );
***************************************************************************************************************************************************************************
二：JQuery的Ajax技术，常用的有3种
1.get方式
$.get(url,[data],[callback],[type])
url:代表请求的服务器端地址
data:代表请求服务器端的数据，可以是key=value形式，也可以是json格式
callback:表示服务器端成功响应所触发的函数（只有正常成功返回才执行）
type:表示服务器端返回的数据类型(jquery会根据指定类型自动转换)，常用的返回类型：text,json,html等
function fun1() {
$.get(
"${pageContext.request.contextPath}/jQueryAjax",//请求地址
{"name":"zhangsan","age":20}, //请求参数(此处指定为json)
function(responseData) { //请求成功后的回调函数 responseData：服务器返回的数据
alert(responseData.msg);
},
"json" //指定服务器返回数据类型，jquery会根据指定类型自动转换
);
}
public class JQueryAjax extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //转译 返回json类型数据 response.getWriter().write("{\"msg\":\"success\"}"); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
2.post方式(与get格式基本一致)
$.post(url,[data],[callback],[type])
url:代表请求的服务器端地址
data:代表请求服务器端的数据，可以是key=value形式，也可以是json格式
callback:表示服务器端成功响应所触发的函数（只有正常成功返回才执行）
type:表示服务器端返回的数据类型(jquery会根据指定类型自动转换)，常用的返回类型：text,json,html等
function fun1() {
$.post(
"${pageContext.request.contextPath}/jQueryAjax",//请求地址
{"name":"zhangsan","age":20}, //请求参数(此处指定为json)
function(responseData) { //请求成功后的回调函数 responseData：服务器返回的数据
alert(responseData.msg);
},
"json" //指定服务器返回数据类型，jquery会根据指定类型自动转换
);
}
public class JQueryAjax extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //转译 返回json类型数据 response.getWriter().write("{\"msg\":\"success\"}"); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
JQuery的ajax的get与post基本没什么区别(地址栏同样不会显示请求参数)，主要是提交时：get需要处理中文乱码，post不需要。
3.ajax方法(最强大版)
$.ajax({option:value,option:value.....});
常用的option有如下：
asyn：是否异步，默认是true，表示异步
data:发送到服务器的参数，建议使用json格式
dataType：服务器端返回的数据类型，常用text和json
success：成功响应执行的函数，对应的数据类型是 function类型
type:请求方式，post/get
url:请求服务端地址
function fun3(){ $.ajax({ url:"${pageContext.request.contextPath}/jQueryAjax", async:true, data:{"name":"fansir","age":22}, type:"post", success:function(responseData){ alert(responseData.msg); }, dataType:"json", }); }
public class JQueryAjax extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //转译 返回json类型数据 response.getWriter().write("{\"msg\":\"success\"}"); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
