JavaEE的ajax入门
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原理
- 通过XmlHttpRequest对象向服务器发送异步请求(核心),得到响应数据。
- 再用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
标准流程
创建对象>发送请求>获取响应数据
创建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;
}
使用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();
使用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入门的更多相关文章
- 掌握 Ajax,第 1 部分: Ajax 入门简介
转:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html 掌握 Ajax,第 1 部分: Ajax 入门简介 理解 Ajax 及其工作 ...
- AJAX入门---DOM操作HTML
AJAX入门---DOM操作HTML 一边学习AJAX一边坐着总结加深印象.上次写的是怎样简单的使用XMLHttpRequest对象.今天写的是DOM(文档对象模型(Document Object M ...
- ajax入门之建立XHR对象 (1)
ajax入门之建立XHR对象 今天帮朋友写了一个简单的ajax的demo,发现了一些东西,决定写一篇文章记录一下,避免以后挖坑. 创建XMLHttpRequest 通常 function create ...
- ASP.NET AJAX入门系列(4):使用UpdatePanel控件(一)
UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加 ...
- ASP.NET AJAX入门系列(1):概述
经常关注我的Blog的朋友可能注意到了,在我Blog的左边系列文章中,已经移除了对Atlas学习手记系列文章的推荐,因为随着ASP.NET AJAX 1.0 Beta版的发布,它们已经不再适用,为了不 ...
- ASP.NET AJAX入门系列
ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...
- 系列文章--ASP.NET之AJAX入门教程
ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...
- Ajax入门(二)Ajax函数封装
如果看了的我上一篇博客<Ajax入门(一)从0开始到一次成功的GET请求>的话,肯定知道我们已经完成了一个简单的get请求函数了.如下: 1234567891011121314151617 ...
- AJAX入门---点滴的积累
AJAX入门---点滴的积累 每次学习完一个内容总会写上几句话总结一下学习的内容.这不刚看完王兴魁老师讲的AJAX核心技术.如今回想梳理一下. 这套视频的内容不多,简单的解说了XMLHttpReque ...
随机推荐
- c++智能指针介绍_补充
不明白我做错了什么,这几天老婆给我冷战了起来,也不给我开视频让我看娃了..哎,心累!趁着今晚的一些空闲时间来对智能指针做个补充吧. 写完上篇“智能指针介绍”后,第二天上班途中时,突然一个疑问盘踞在心头 ...
- Spring Cloud Alibaba学习笔记(7) - Sentinel规则持久化及生产环境使用
Sentinel 控制台 需要具备下面几个特性: 规则管理及推送,集中管理和推送规则.sentinel-core 提供 API 和扩展接口来接收信息.开发者需要根据自己的环境,选取一个可靠的推送规则方 ...
- linux环境,hidraw设备自动加载时默认权限的设置方法
在linux系统中,hidraw设备会自动加载并设置默认权限,但系统的默认只允许root用户访问,普通用户是不允许读写. 设置的方法是修改udev的配置,配置路径是/etc/udev/rules.d/ ...
- GIL与线程进程小知识点
一 .GIL全局解释器 GIL是一个互斥锁:保证数据的安全(以牺牲效率来换取数据的安全)阻止同一个进程内多个线程同时执行(不能并行但是能够实现并发)并发:看起来像同时进行的GIL全局解释器存在的原因是 ...
- flask/app.py-add_url_rule源码分析
之前分析route方法的时候,可以看到中间会调用add_url_rule方法,add_url_rule方法和route方法一样属于Flask这个类的. add_url_rule方法主要用来连接url规 ...
- Centos 配置eth0 提示Device does not seem to be present -- 转载
http://www.cnblogs.com/fbwfbi/archive/2013/04/29/3050907.html 移动虚拟机造成网卡无法识别 一.故障现象: [root@c1node01 ~ ...
- jquery input file 多图上传,单张删除,查看
<div class="form-group"> <label for="imgs" class="col-md-3 col-sm- ...
- vue多页面项目搭建(vue-cli 4.0)
1.创建vue项目 cmd命令执行 vue create app (app 自定义的项目名) 一般都会选择后者,自己配置一下自己需要的选项(空格为选中) 这是我个人需要的一些选项,路由Router.状 ...
- vue-cli项目开发运行时内存暴涨卡死电脑
最近开发一个vue项目时遇到电脑卡死问题,突然间系统就非常卡,然后卡着卡着就死机了,鼠标也动不了了,只能冷启动.而且因为是突然卡死,没来得及打开任务管理器. 最开始以为是硬盘的问题,但是在卡死几次后, ...
- Nginx 安装 和 特性介绍
一:nginx 环境搭建 四项确认 确认系统网络可通行 确认yum可用 确认关闭iptables规则 确认停用selinux 查看iptables规则 iptables -L 关闭iptables规则 ...