Ajax教案

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