Ajax 认识
一、概念
二、同步异步
同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待卡死状态
异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡死
三、Ajax 运行原理
页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到服务器端,在这段时间里,客户端可以任意进行任意操作,直到服务器端将数据返回给Ajax引擎后,会触发你设置的事件,从而执行自定义的js逻辑代码完成某种页面功能。
四、js原生的Ajax技术(了解)
js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的,要使用js原生的Ajax完成异步操作,有如下几个步骤:
1)创建Ajax引擎对象
2)为Ajax引擎对象绑定监听(监听服务器已将数据响应给引擎)
3)绑定提交地址
4)发送请求
5)接受响应数据(这一步可以写在第二步里,监听是否接收到响应数据)
注意:如果是post提交(get请求的话,直接在open参数里的URL后边加上?传参即可,当然也可以写在send()参数里,post,必须加一下的操作,否则,传值为null);
在发送请求之前设置一个头:
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
总结:所有异步访问都是ajax引擎,open中的参数false,即:设置为同步的,默认是true,即异步的请求
五、Json数据格式和解析(转换)
1、概念:Json是一种数据的交换格式,与语言无关,java可以用,PHP也可以使用。
2、作用:使用Ajax进行前后端的数据交换;移动端与服务端进行数据交互。
3、Json的书写格式:
(1)对象格式
例如:user对象 用json数据格式表示
{"username":"zhangsan","age":28,"password":"123","addr":"北京"}
(2)数组格式
List<Product> 用json数据格式表示
[{"pid":"10","pname":"小米4C"},{},{}]
注意:对象格式和数组格式可以互相嵌套;
注意:json的key是字符串,且只能使用双引号,不可食用单引号;jaon的value是Object;
json的解析:
json是js的原生内容,也就意味着js可以直接取出json对象中的数据(对象导航的形式一层一层得到)
4、Json的转换插件
将java的对象或集合转成json形式字符串;json的转换插件是通过java的一些工具,直接将java对象或集合转换成json字符串。
常用的json转换工具有如下几种:
1)jsonlib
2)Gson:google
3)fastjson:阿里巴巴
六、Jquery的Ajax技术(重点)
jquery是一个优秀的js框架,自然对js原生的ajax进行了封装,封装后的ajax的操作方法更简洁,功能更强大,与ajax操作相关的jquery方法有如下几种,但开发中 经常使用的有三种:
1、Jquery的get方法:
以get的方式,提交请求到服务端;
格式:$.get(url, [data], [callback], [type]);其中带[]的意思是该参数是可选的,可以有也可以不写:
url:提交的请路径;
data:指的是提交过程中,携带的参数,比如问号传参、路径传参等;
callback:回调函数,相当于原生Ajax的监听函数,当监听到客户端已经返回响应时,会将返回的响应数据作为回调函数的参数(data)传回:
a、 比如响应数据是json格式的字符串:response.getWriter().wirte("{\"name\'':\"tom\",\"age\":25}"),(注:这里的\是为了转义,因为json格式里不能写单引号,现实开发中,我们是用转化工具来将数据库中查到的数据转换为json格式的字符串,再返回给页面,工具见上述五—4)我们就可以在前端页面中通过data.name获得其value:tom;
b、如果返回的是普通的字符串:response.getWriter().wirte(name+""+age);则data指的是name+""+age;
type:指的是:返回的响应数据的类型,常用的有:json格式的,txt格式的,html格式的等;
以下面的为准,上边是自己总结的,哈哈:
url:代表请求的服务器端地址
data:代表请求服务器端的数据(可以是key=value形式也可以是json格式)
callback:表示服务器端成功响应所触发的函数(只有正常成功返回才执行)
type:表示服务器端返回的数据类型(jquery会根据指定的类型自动类型转换),常用的返回类型:text、json、html等
来看一段示例代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript" src="js/jquery.min.js"></script> 7 <script type="text/javascript"> 8 9 function f1() { 10 $.get( 11 "/AjaxDemo/AjaxServlet", 12 {"name":"zhangsan","age":25}, 13 function(data){ 14 alert(data); 15 }, 16 "text" 17 ); 18 } 19 </script> 20 </head> 21 <body> 22 23 <input type="button" value="ajax-get提交" onclick="f1()"> 24 </body> 25 </html>
后端代码:
1 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 2 3 response.getWriter().append("Served at: ").append(request.getContextPath()); 4 5 String name = request.getParameter("name");//代表请求服务器端的数据 6 String age = request.getParameter("age"); 7 response.getWriter().write(name+""+age);//客户端响应数据,回调函数里的data 8 9 }
2、post方式同上,只需将$.get换为$.post即可,其余一样的
3、$.ajax( { option1:value1,option2:value2... } )的方式;
他能够实现get和post不能实现的功能(目的):其中option指的是可选的,你要根据自己的需求,自己添加参数;
常用的option有如下:
async:是否异步,默认是true代表异步(这一点比较上述get/post方式就有优势,因为get/post只是异步的,这个方法就比较灵活)
data:发送到服务器的参数,建议使用json格式
dataType:服务器端返回的数据类型,常用text和json
success:成功响应执行的函数,对应的类型是function类型,与此同时还有个error方法,请求失败的话,就出发这个方法
type:请求方式,POST/GET
url:请求服务器端地址
代码实例:
1 function fn3(){ 2 $.ajax({ 3 url:"/WEB22/ajaxServlet2", 4 async:true, 5 type:"POST", 6 data:{"name":"lucy","age":18}, 7 success:function(data){ 8 alert(data.name); 9 }, 10 error:function(){ 11 alert("请求失败"); 12 }, 13 dataType:"json" 14 }); 15 }
4、其他的方法
注意:上述方法中。带$的是全局函数,不带$的,比如load()方法,是局部的某个对象的方法,比如要给一个button按钮绑定一个异步加载时间,要先获得按钮对象,再调用方法。
七、两个案例
1、注册界面,检测输入的用户名是否可用(该用户名已存在。。。)
2、站内搜索