java web ajax加载更多_Javaweb学习之Ajax
学习目的
1.全局刷新和局部刷新
全局刷新: 整个浏览器被新的数据覆盖。 在网络中传输大量的数据。 浏览器需要加载,渲染页面。
局部刷新: 在浏览器器的内部,发起请求,获取数据,改变页面中的部分内容。
其余的页面无需加载和渲染。 网络中数据传输量少, 给用户的感受好。
ajax是用来做局部刷新的。局部刷新使用的核心对象是 异步对象(XMLHttpRequest)
这个异步对象是存在浏览器内存中的 ,使用javascript语法创建和使用XMLHttpRequest对象。
2.ajax:Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
Asynchronous: 异步的意思
JavaScript:javascript脚本,在浏览器中执行
and : 和
xml : 是一种数据格式
ajax是一种做局部刷新的新方法(2003左右),不是一种语言。 ajax包含的技术主要有javascript,
dom,css, xml等等。 核心是javascript 和 xml 。
javascript:负责创建异步对象, 发送请求, 更新页面的dom对象。 ajax请求需要服务器端的数据。
xml: 网络中的传输的数据格式。 使用json替换了xml 。
宝马1数据1>
宝马2数据2>
宝马3数据3>
宝马4数据4>
数据>
3.ajax中使用XMLHttpRequest对象
1)创建异步对象 var xmlHttp = new XMLHttpRequest();
2)给异步对象绑定事件。onreadystatechange :当异步对象发起请求,获取了数据都会触发这个事件。
这个事件需要指定一个函数, 在函数中处理状态的变化。
btn.onclick = fun1()
function fun1(){
alert("按钮单击");
}
例如:
xmlHttp.onreadystatechange= function(){
处理请求的状态变化。
if(xmlHttp.readyState == 4 && xmlHttp.status== 200 ){
//可以处理服务器端的数据,更新当前页面
var data = xmlHttp.responseText;
document.getElementById("name").value= data;
}
}
异步对象的属性 readyState 表示异步对象请求的状态变化
0:创建异步对象时, new XMLHttpRequest();
1: 初始异步请求对象, xmlHttp.open()
2:发送请求, xmlHttp.send()
3: 从服务器端获取了数据,此时3, 注意3是异步对象内部使用, 获取了原始的数据。
4:异步对象把接收的数据处理完成后。 此时开发人员在4的时候处理数据。
在4的时候,开发人员做什么 ? 更新当前页面。
异步对象的status属性,表示网络请求的状况的, 200, 404, 500, 需要是当status==200
时,表示网络请求是成功的。
初始异步请求对象
异步的方法open().
xmlHttp.open(请求方式get|post, "服务器端的访问地址", 同步|异步请求(默认是true,异步请求))
例如:
xmlHttp.open("get", "loginServlet?name=zs&pwd=123",true);
4)使用异步对象发送请求
xmlHttp.send()
获取服务器端返回的数据, 使用异步对象的属性 responseText .
使用例子:xmlHttp.responseText
回调:当请求的状态变化时,异步对象会自动调用onreadystatechange事件对应的函数。
4.json使用
ajax发起请求-------servlet(返回的一个json格式的字符串 { name:"河北", jiancheng:"冀","shenghui":"石家庄"})
json分类:1. json对象 ,JSONObject ,这种对象的格式 名称:值, 也可以看做是 key:value 格式。
2. json数组, JSONArray, 基本格式 [{ name:"河北", jiancheng:"冀","shenghui":"石家庄"} , { name:"山西", jiancheng:"晋","shenghui":"太原"} ]
为什么要使用json :
1. json格式好理解
2. json格式数据在多种语言中,比较容易处理。 使用java, javascript读写json格式的数据比较容易。
3. json格式数据他占用的空间下,在网络中传输快, 用户的体验好。
处理json的工具库: gson(google); fastjson(阿里),jackson, json-lib
在js中的,可以把json格式的字符串,转为json对象, json中的key,就是json对象的属性名。
java web ajax加载更多_Javaweb学习之Ajax相关推荐
- dede文章异步ajax加载,织梦DedeCMS列表“加载更多”“无限下拉”Ajax加载使用方法...
Infinite Ajax Scroll 简称 ias,无限的ajax滚动,是一款jQuery滚动ajax分页插件,当页面滚动到容器可见部分将自动异步加载数据. 下面先来看看效果. 无限下拉效果 点击 ...
- JAVA Web.xml 加载顺序
web.xml加载过程(步骤): 1.启动WEB项目的时候,容器(如:Tomcat)会去读它的配置文件web.xml.读两个节点: <listener></listener> ...
- 织梦ajax加载文章列表,织梦dedecms首页列表页ajax点击下拉加载更多文章瀑布流效果...
织梦dedecms实现点击下拉加载更多主要用到ajax技术.具体步骤如下: 一.首先找到并打开/plus/list.PHP文件,在里面找到如下代码: require_once(dirname(__FI ...
- html加载更多实现代码,如何实现点击“加载更多”?
看你的样子用的应该是java写的后端(, ...).为了实现加载更多,其实就是点击按钮后在不刷新页面的情况下添加更多的内容显示到当前页面中.用ajax拉取数据,前提是后端能够根据条件(例如:页号.分类 ...
- vue模拟加载更多功能(数据追加)
使用vue制作加载更多功能,通过ajax获取的数据往data里面push经常不成功,原因是push是往数组中追加数据内容的,而不能用作数组之间的拼接,ajax获取的数据就是数组形式的,因此不成功,应该 ...
- JS滚动条到网页底部自动加载更多内容
2019独角兽企业重金招聘Python工程师标准>>> <html> <head> <meta charset="gb18030" ...
- oracle里子连接查询,pc端页面滚动到底部加载更多数据......
场景:pc端页面鼠标滚动到底部时,通过ajax加载更多的数据,实现分页功能,封装成了一个函数,自己根据实际情况调用即可. 说明:discussList是放加载内容的div容器 // 加载更多评价的函数 ...
- [Java安全]—动态加载字节码文件
ClassLoader加载远程字节码 POC import java.io.IOException; import java.net.URL; import java.net.URLClassLoad ...
- jquery中ajax加载js和json文件
全栈工程师开发手册 (作者:栾鹏) jquery系列教程6-AJAX全解 jquery中ajax加载js文件 jquery中ajax加载js文件的函数为getScript() 代码如下: $.getS ...
最新文章
- Java 常用代码汇总
- 7打开pycharm_Python+pycharm安装、关联教程
- PaddleHub 视频人脸检测
- C语言二分法在一个有序数组查找数的算法(附完整源码)
- java一个界面用另一个界面的值_如何将参数/值从一个弹出窗口传递到Angular2中的另一个弹出窗口...
- Android之android.os.Build
- java中程序跳转_java程序中先后台交互的两种实现方式以及页面之间的跳转
- Java8 FlatMap的使用
- 本周没有学习,估计用脑过度...
- python 删除文件_lt;python笔记gt;点击工具架,删除filechache的文件
- c语言实现http下载器
- CSS单位:em、rem、%、vh、vw、vmin、vmax
- php 取出最后一数组元素,PHP取出数组中最后一个元素的方法汇总
- Cisco 3550交换机IOS备份(真实设备演示)
- 学习python记录——第五天
- 北京筑龙出席《中国招标》30周年座谈会暨理事年会并进行分享
- oracle oms启动慢,停止OMS后无法启动Oracle Enterprise 13C。
- oracle 闪回空间爆满,基于ORA-19815闪回空间爆满问题的处理方法
- 阿木实验室 ubuntu 20.04 Prometheus 系统 编译问题
- c++ rar 解压缩数据