JavaEE的ajax入门

JavaEE的ajax入门

1. ajax简介

ajax是Asynchronous Javascript And XML，即异步js+xml。

它是一个原有技术的集成，包括：

• css
• xhtml
• dom
• XmlHttpRequest
• js

ajax原理

1. 通过XmlHttpRequest对象向服务器发送异步请求（核心），得到响应数据。
2. 再用JavaScript操作DOM从而更新页面。

XmlHttpRequest

这个一种支持异步请求的技术，发送请求而不会阻塞用户行为，达到无需全页刷新的效果。

• 常用XmlHttpRequest的对象属性

  属性	描述
  onreadystatechange	每次状态改变所触发事件的事件处理程序
  status	从服务器返回的数字代码，404（未找到）和200（已就绪）
  responseText	从服务器进程返回数据的字符串形式
  responseXML	从服务器进程返回的DOM兼容的文档数据对象
  status Text	伴随状态码的字符串信息
  readyState	0未初始化，1初始化，2发送数据，3数据传送，4完成
  status	从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）

ajax作用

以往改变页面上的数据显示，需要刷新整个页面，需要对所有资源更新。而我们实际上只需要少量资源的更新，这样就造成了资源的浪费。Ajax可以解决这个问题，其通过后台与服务器进行少量的数据交换，可以只更新指定部分的页面。

ajax优点

• 异步机制。能够快速响应用户动作
• 不需要插件，只要js支持

ajax缺点

• 浏览器将无法使用后退和收藏功能

  浏览器的后退访问的是历史记录，而ajax并没有改变页面地址。

  在html5下，已经有了解决方案。不过稍显麻烦。

2.ajaxQuickStart

标准流程

创建对象==>发送请求==>获取响应数据

1. 创建XmlHttpRequest对象

   • 这段代码是每次使用都是一样的，复制黏贴即可

     function createXmlHttpRequest() {
         var xmlHttp;
         try { // Firefox, Opera 8.0+, Safari
             xmlHttp = new XMLHttpRequest();
         } catch (e) {
             try {// Internet Explorer
                 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
             } catch (e) {
                 try {
                     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                 } catch (e) {
                 }
             }
         }
         return xmlHttp;
     }

2. 使用get发送接受

   • 得到XmlHttpRequest对象

     var request = createXmlHttpRequest();

   • 发送请求

     //参数介绍
     //参数1：请求类型 GET POST
     //参数2：请求路径，可以用相对路径（相对调用的jsp页面的地址）
     //参数3：是否异步，true：异步 false：同步
     //这个是不带数据的
     request.open("GET", "DemoServlet01", true);
     //这个是带数据的
     request.open("GET", "DemoServlet01？name=zhangsan", true);
     //上面像是封装好了，这一步是执行
     request.send();

   • 获取响应数据

     //相当于设置了一个监听器
     request.onreadystatechange = function () {
         //请求完成并且服务器成功响应
         if (request.readyState == 4 && request.status == 200) {
             //request.responseText就是获取服务器相应的数据
             alert(request.responseText);
         }
     };
     request.send();

3. 使用post方式发送/接受

   • 得到XmlHttpRequest对象

     var request = createXmlHttpRequest();

   • 发送请求

     //2.发送请求,把第一个参数改为post,传的还是原来的servlet,servlet编写还是和原来一样
     request.open("POST", "DemoServlet01", true);
     //设置一个请求头,表明发送一个经过post编码的请求
     request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     //发送的参数
     request.send("name=kk凯凯&age=99");

   • 接受请求

     //和上面一样，设置一个监听器
     request.onreadystatechange = function () {
         if (request.readyState === 4 && request.status === 200) {
             alert("post"+ request.responseText);
         }
     };