一.什么时候用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
传统的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);
}