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 ...
随机推荐
- 将图片画到canvas 上的几种方法(转)
转自:https://blog.csdn.net/qq_15009739/article/details/82809525
- 启动 docker 容器时报错
错误信息: iptables failed: iptables --wait -t nat -A DOCKER -p tcp -d 0/0 --dport 9300 -j DNAT --to-dest ...
- 【css】文本效果
一.字体属性 在css字体样式中常见的字体属性有以下几种 p{ font-size: 50px; /*字体大小*/ line-height: 30px; /*行高*/ font-family: 幼圆, ...
- sqlserver2008+日志收缩sql语句命令
USE[master] GO ALTER DATABASE 数据库 SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE 数据库 SET RECOVER ...
- 一般处理程序里使用session对象
在一般处理程序里使用session,必须继承 IRequiresSessionState 接口.
- VSCode-设置webstorm的主题和快捷键
前提:VScode很火啊,理由:轻量,免费,不用找各种破解qi.... 好吧那我也从webstorm转过来试试,但是webstorm已经用了4年多了,对于一个有洁癖的人,必须把VScode打扮的和we ...
- java使用AES-256-ECB(PKCS7Padding)解密——微信支付退款通知接口指定解密方式
1.场景 在做微信支付退款通知接口时,微信对通知的内容做了加密,并且指定用 AES256 解密,官方指定的解密方式如下: 2.导包 <!-- https://mvnrepository.com/ ...
- jQuery 事件介绍
什么是事件?页面对不同访问者的响应叫做事件.事件处理程序指的是当 HTML 中发生某些事件时所调用的方法. 常用的时间主要有以下几种: click()事件:click() 方法是当按钮点击事件被触发时 ...
- 自定义过滤器和标签 & 静态文件相关
自定义过滤器和标签 1.在settings中的INSTALLED_APPS配置当前app,不然django无法找到自定义的simple_tag. 2.在app中创建templatetags模块(模块名 ...
- Linux/Aix日常报错整理
[root@localhost ~]# umount /mnt umount.nfs: /mnt: device is busy umount.nfs: /mnt: device is busy 问题 ...