JavaEE的ajax入门

代码下载

链接:https://pan.baidu.com/s/1pb_sdSmV9Ncs6UIz3q2ztg

提取码:fgx6

复制这段内容后打开百度网盘手机App,操作更方便哦

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);
      }
      };

JavaEE的ajax入门的更多相关文章

  1. 掌握 Ajax,第 1 部分: Ajax 入门简介

    转:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html 掌握 Ajax,第 1 部分: Ajax 入门简介 理解 Ajax 及其工作 ...

  2. AJAX入门---DOM操作HTML

    AJAX入门---DOM操作HTML 一边学习AJAX一边坐着总结加深印象.上次写的是怎样简单的使用XMLHttpRequest对象.今天写的是DOM(文档对象模型(Document Object M ...

  3. ajax入门之建立XHR对象 (1)

    ajax入门之建立XHR对象 今天帮朋友写了一个简单的ajax的demo,发现了一些东西,决定写一篇文章记录一下,避免以后挖坑. 创建XMLHttpRequest 通常 function create ...

  4. ASP.NET AJAX入门系列(4):使用UpdatePanel控件(一)

    UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加 ...

  5. ASP.NET AJAX入门系列(1):概述

    经常关注我的Blog的朋友可能注意到了,在我Blog的左边系列文章中,已经移除了对Atlas学习手记系列文章的推荐,因为随着ASP.NET AJAX 1.0 Beta版的发布,它们已经不再适用,为了不 ...

  6. ASP.NET AJAX入门系列

    ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...

  7. 系列文章--ASP.NET之AJAX入门教程

    ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...

  8. Ajax入门(二)Ajax函数封装

    如果看了的我上一篇博客<Ajax入门(一)从0开始到一次成功的GET请求>的话,肯定知道我们已经完成了一个简单的get请求函数了.如下: 1234567891011121314151617 ...

  9. AJAX入门---点滴的积累

    AJAX入门---点滴的积累 每次学习完一个内容总会写上几句话总结一下学习的内容.这不刚看完王兴魁老师讲的AJAX核心技术.如今回想梳理一下. 这套视频的内容不多,简单的解说了XMLHttpReque ...

随机推荐

  1. 将图片画到canvas 上的几种方法(转)

    转自:https://blog.csdn.net/qq_15009739/article/details/82809525

  2. 启动 docker 容器时报错

    错误信息: iptables failed: iptables --wait -t nat -A DOCKER -p tcp -d 0/0 --dport 9300 -j DNAT --to-dest ...

  3. 【css】文本效果

    一.字体属性 在css字体样式中常见的字体属性有以下几种 p{ font-size: 50px; /*字体大小*/ line-height: 30px; /*行高*/ font-family: 幼圆, ...

  4. sqlserver2008+日志收缩sql语句命令

    USE[master] GO ALTER DATABASE 数据库 SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE 数据库 SET RECOVER ...

  5. 一般处理程序里使用session对象

    在一般处理程序里使用session,必须继承  IRequiresSessionState  接口.

  6. VSCode-设置webstorm的主题和快捷键

    前提:VScode很火啊,理由:轻量,免费,不用找各种破解qi.... 好吧那我也从webstorm转过来试试,但是webstorm已经用了4年多了,对于一个有洁癖的人,必须把VScode打扮的和we ...

  7. java使用AES-256-ECB(PKCS7Padding)解密——微信支付退款通知接口指定解密方式

    1.场景 在做微信支付退款通知接口时,微信对通知的内容做了加密,并且指定用 AES256 解密,官方指定的解密方式如下: 2.导包 <!-- https://mvnrepository.com/ ...

  8. jQuery 事件介绍

    什么是事件?页面对不同访问者的响应叫做事件.事件处理程序指的是当 HTML 中发生某些事件时所调用的方法. 常用的时间主要有以下几种: click()事件:click() 方法是当按钮点击事件被触发时 ...

  9. 自定义过滤器和标签 & 静态文件相关

    自定义过滤器和标签 1.在settings中的INSTALLED_APPS配置当前app,不然django无法找到自定义的simple_tag. 2.在app中创建templatetags模块(模块名 ...

  10. Linux/Aix日常报错整理

    [root@localhost ~]# umount /mnt umount.nfs: /mnt: device is busy umount.nfs: /mnt: device is busy 问题 ...