一.什么时候用ajax(why)
最终目标:用户体验
两次请求,请求同一个页面时(显示的内容差别不大),为了防止相同数据重传,使用ajax
传统的javaEE开发(全部刷新)
平时没什么问题,但是对于前后两次请求都请求同一个页面的情况,比如注册功能.
这时使用传统的JavaEE开发,会出现如下问题:
1.数据会有刷没了的情况,从了保证数据不丢失,还要在服务器端取出来,放到request对象中,再从页面中取出来。如果数据是从数据库中查的,还需要再查一遍
比较麻烦,不便于程序员开发
2.相同的数据(页面的标签)需要再传一遍给客户端,效率非常低,如果数据量大,网络传输的字节数多,效率更低,用户要一直等待,体验不好
(一个用户多传回来一遍没太大影响,用户量多了服务器就受不了了 )
见ajax图1
举例:京东话题
3.页面需要刷新 闪一下用户体验不好
***总之:为了避免全部刷新带来的效率问题,大大减少网络传输量,提高用户体验,所以使用Ajax开发(局部刷新,只返回需要的数据)
二.what
局部刷新,只返回需要的数据
Ajax 不是一门新的技术
异步的
Asynchronous javascript and xml
传统的javaEE开发 是同步的 同步教学 傻傻的等待 用户浪费了很多等待的事件 见图传统的javaEE
Ajax开发 异步的 客户端不用等待 见图 Ajax开发
三.how
演示用户注册
post 请求 要加入如下代码
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
get请求容易乱码,推荐使用post提交
演示
function checkUserIfExist(){
var username = document.getElementById("username").value;
//1.创建XMLHttpRequest类的对象
xhr = createXHR();
//2.调用该对象的open方法
// 有三个参数 1. 请求类型 GET POST 2.请求的URL 3. boolean true 表示异步请求 false 同步的
xhr.open("POST","RegistServlet",true);
hr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//3.绑定回调函数
xhr.onreadystatechange = callback;
//4.发送请求
xhr.send("username=" + username);
}
分享到:
相关推荐
这是一分学习ajax学习资料,里面还带有浅显易懂的例子,一定对你有帮助的
适合网站开发人员 适合js开发人员 适合ajax异步传输初高级程序员
Ajax与J2EE 项目实训教案
本人昨天刚刚买的PHP+Ajax完全自学手册,花了一大笔银子,现将随书电子教案和源代码上传上来,共享给大家!
AJAX脚本框架选型PPT学习教案.pptx
Ajax组件改进客户体验PPT学习教案.pptx
【PHP+Ajax完全自学手册】【随书-4PPT教案】
JavaScript语言与Ajax应用JavaScript面向对象编程PPT教案学习.pptx
JavaScript语言与Ajax应用(第二版)-电子教案.rar
包含22章内容 从Ajax入门到微软Ajax控件到Ajax项目都有介绍 绝对是学习Ajax的好东西
Ajax基础教程(PDF) 供大家学习参考
1. 概念: ASynchronous JavaScript And XML 1. 异 1. 原 1. 请 2. 请 3. 同步 1. 原 1. 请 2. 请
asp.net的最新技术的介绍,教案,和部分源码实例。帮助想学习.net新技术者。
数据库与Hibernate的教案,Hibernate映射技术 关联技术,AJAX插件
jquery详细的教案ppt,包括原始的Ajax和jquery的语法、例子。是页面开发入门人员的最好的教案,可以跟着ppt一步步的去做很快就会掌握jquery最基础的技能
JS教案,包括JS基础、内置、窗口、文档对象、AJAX、定时器、正则表达式等
[ASP.NET AJAX编程参考手册代码——涵盖ASP.NET 3.5及2.0 ]源文件
JavaScript自学手册-电子教案(包括XML,VML和Ajax等方面知识)
源码简介与安装说明: 智睿网上评课系统的开发使教师在线发布评课及教案评课交流系统,以交互交流形式对本学期所学课程和任课教师进行评论。以使教学管理部门及时了解...程序构造: ASP Access AJAX XML DIV CSS HTML