AJAX(22)
来源:互联网 发布:qq2012透明皮肤软件 编辑:程序博客网 时间:2024/06/05 18:47
一、概述
1、同步和异步
同步:客户端发送请求到服务器端,在服务器返回响应之前,客户端都处于等待卡死状态
异步:客户端发送请求到服务器端,无论服务器端是否返回响应,客户端都可随意做别的事情。
2、Ajax的运行原理
客户端浏览器内置着很多解析器,比如html解析器,css解析器,js解析器。同样也有一个ajax解析器。当页面发起请求时,会将请求发送给浏览器内核的ajax引擎,ajax引擎会提交请求到服务器端,在此过程中客户端无需等待,直到服务器端返回数据给ajax引擎后,会触发你设置的时间,从而执行自定义的js代码动态地修改页面中的某些数据。
二、js原生的Ajax(帮助理解底层)
(1)创建ajax引擎对象
(2)为ajax对象绑定监听(监听服务器已经将数据返回)
(3)绑定提交地址
(4)发送请求
(5)接受响应数据
三、JSON数据格式
JSON是一种数据交换格式:使用ajax进行前后端的数据交互;移动端和服务端的数据交互。
1、JSON的格式与解析
(1)对象格式:{"key1":obj1,"key2":obj2,"key3":obj3.....}
(2)数组/集合格式:[obj,obj,obj.....]
二者可以嵌套使用。key是字符串,value是Object
例如:user对象用json数据格式表示{"username":"zhangsan","age":28,"password":"123","addr":"北京","account":{"monety":32000,"time":"20160527"}}例:List<Product>用Json表示[{"pid":"10","pname":"微星"},{},{}]
2、JSON的转换插件
将java的对象或集合转成json形式字符串。
(1)jsonlib(框架要用)
(2)Gson
(3)fastjson(性能最好)
json是js原生的内容,因此js可以直接取出json中的数据。
四、JQuery的Ajax(重点)
1)$.get(url, [data], [callback], [type])
2)$.post(url, [data], [callback], [type])
url:代表请求的服务器端地址
data:代表请求服务器端的数据(可以是key=value形式也可以是json格式)
callback:表示服务器端成功响应所触发的函数(只有正常成功返回才执行)
type:表示服务器端返回的数据类型(jquery会根据指定的类型自动类型转换)
常用的返回类型:text、json、html等
//在注册页面的input框增加onblur失去焦点事件,通过jqueryajax异步校验用户名是否存在。function func(){//注:post方式提交的时候不会有乱码。而get提交会出现乱码,需要编解码方式解除乱码。 $.post(//url, [data], [callback], [type] "/BookStore/isExist",//要访问的url {"username":document.getElementById("username").value},//传参 function(data){ document.getElementById("back").innerHTML=data; },//服务器成功返回结果后执行回调函数 "text"//服务器返回的参数类型 ); }//servlet端简要代码protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //通过参数名获取传来的username String username = request.getParameter("username"); UserService userService = new UserServiceImpl(); //调用方法到数据库中检验是否存在该用户名的账户,并返回字符串作为结果。 String result = userService.isExist(username); //设置客户端页面的编码格式 response.setContentType("text/html;charset=utf-8"); //将结果传给ajax引擎,并执行回调函数。 response.getWriter().write(result); }
3)$.ajax( { option1:value1,option2:value2... } );
常用的option有如下:
async:是否异步,默认是true代表异步
data:发送到服务器的参数,建议使用json格式
dataType:服务器端返回的数据类型,常用text和json
success:成功响应执行的函数,对应的类型是function类型
type:请求方式,POST/GET
url:请求服务器端地址
- AJAX(22)
- ajax (ajax开发)
- Ajax 陷阱(Ajax Gotchas)
- ajax(一) 初识ajax
- 【AJAX】AJAX小结(二)
- ajax(1)---ajax概述
- AJAX、AJAX实例及AJAX源代码(asp)
- AJAX学习心得分享----(一)AJAX初识+原生态AJAX
- Ajax叠加(Ajax返回数据用Ajax发出)
- [翻译]Ajax原则(Ajax Principles)
- [翻译]Ajax 陷阱(Ajax Gotchas)
- 什么是 AJAX, what is AJAX(一)
- 转贴 [翻译]Ajax 陷阱(Ajax Gotchas)
- Ajax基础(一):认识Ajax
- Ajax学习(1)---Ajax 入门简介
- Ajax学习(1)---Ajax 入门简介
- Ajax学习(1)---Ajax 入门简介
- jQuery ajax - ajax() 方法(十七)
- Citavi 6 从入门到精通中文教程 -您只需看会这些
- 从尾到头打印链表(链表)
- 接口测试-使用枚举类型
- 电梯系统高精度自诊断
- 自定义listview
- AJAX(22)
- iOS倒计时-swift2.3
- listview多条目加载
- marquee滚动标签
- struts2文件上传和下载
- 【转】解决 Atom 的包管理器——apm 访问速度慢的问题
- 极光推送工具类JpushUtil,无需修改,直接可用
- 运维之shell篇-----3.循环结构 、 case语句 、 函数及中断控制
- 中介者模式