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. c++智能指针介绍_补充

    不明白我做错了什么,这几天老婆给我冷战了起来,也不给我开视频让我看娃了..哎,心累!趁着今晚的一些空闲时间来对智能指针做个补充吧. 写完上篇“智能指针介绍”后,第二天上班途中时,突然一个疑问盘踞在心头 ...

  2. Spring Cloud Alibaba学习笔记(7) - Sentinel规则持久化及生产环境使用

    Sentinel 控制台 需要具备下面几个特性: 规则管理及推送,集中管理和推送规则.sentinel-core 提供 API 和扩展接口来接收信息.开发者需要根据自己的环境,选取一个可靠的推送规则方 ...

  3. linux环境,hidraw设备自动加载时默认权限的设置方法

    在linux系统中,hidraw设备会自动加载并设置默认权限,但系统的默认只允许root用户访问,普通用户是不允许读写. 设置的方法是修改udev的配置,配置路径是/etc/udev/rules.d/ ...

  4. GIL与线程进程小知识点

    一 .GIL全局解释器 GIL是一个互斥锁:保证数据的安全(以牺牲效率来换取数据的安全)阻止同一个进程内多个线程同时执行(不能并行但是能够实现并发)并发:看起来像同时进行的GIL全局解释器存在的原因是 ...

  5. flask/app.py-add_url_rule源码分析

    之前分析route方法的时候,可以看到中间会调用add_url_rule方法,add_url_rule方法和route方法一样属于Flask这个类的. add_url_rule方法主要用来连接url规 ...

  6. Centos 配置eth0 提示Device does not seem to be present -- 转载

    http://www.cnblogs.com/fbwfbi/archive/2013/04/29/3050907.html 移动虚拟机造成网卡无法识别 一.故障现象: [root@c1node01 ~ ...

  7. jquery input file 多图上传,单张删除,查看

    <div class="form-group"> <label for="imgs" class="col-md-3 col-sm- ...

  8. vue多页面项目搭建(vue-cli 4.0)

    1.创建vue项目 cmd命令执行 vue create app (app 自定义的项目名) 一般都会选择后者,自己配置一下自己需要的选项(空格为选中) 这是我个人需要的一些选项,路由Router.状 ...

  9. vue-cli项目开发运行时内存暴涨卡死电脑

    最近开发一个vue项目时遇到电脑卡死问题,突然间系统就非常卡,然后卡着卡着就死机了,鼠标也动不了了,只能冷启动.而且因为是突然卡死,没来得及打开任务管理器. 最开始以为是硬盘的问题,但是在卡死几次后, ...

  10. Nginx 安装 和 特性介绍

    一:nginx 环境搭建 四项确认 确认系统网络可通行 确认yum可用 确认关闭iptables规则 确认停用selinux 查看iptables规则 iptables -L 关闭iptables规则 ...