Ajax刷新

简介: Ajax刷新

1.为什么使用Ajax
无刷新:不刷新整个页面,只刷新局部
无刷新的好处
只更新部分页面,有效利用带宽
提供连续的用户体验

提供类似C/S的交互效果,操作更方便

2.传统Web与Ajax的差异

差异方式说      明发送请求方式不同传统Web浏览器发送同步请求Ajax技术异步引擎对象发送请求服务器响应不同传统Web响应内容是一个完整页面Ajax技术响应内容只是需要的数据客户端处理方式不同传统Web需等待服务器响应完成并重新加载整个页面后用户才能进行操作Ajax技术可以动态更新页面中的部分内容不影响用户在页面进行其他操作

3.Ajax简介
image.png
4.Ajax工作流程
image.png
5.XMLHttpRequest
整个Ajax技术的核心

提供异步发送请求的能力

常用方法

方     法说      明open( String method,  String url,            boolean async,  String user,            String password ) 创建一个新的HTTP请求send( String  data )发送请求到服务器端abort( )取消当前请求setRequestHeader(            String header,  String value ) 设置请求的某个HTTP头信息getResponseHeader(String header)获取响应的指定HTTP头信息getAllResponseHeader( )获取响应的所有HTTP头信息

事件
onreadystatechange:指定回调函数
常用属性
readyState:XMLHttpRequest的状态信息
status:HTTP的状态码
statusText:返回当前请求的响应状态

responseText:以文本形式获得响应的内容
responseXML:将XML格式的响应内容解析成 DOM对象返回

就绪状态码说      明0XMLHttpRequest对象未完成初始化1XMLHttpRequest对象开始发送请求2XMLHttpRequest对象的请求发送完成3 XMLHttpRequest对象开始读取响应4XMLHttpRequest对象读取响应结束

状态码说      明200服务器正确返回响应(就绪状态是4且状态码
是200,表示正确完成
)404请求的资源不存在500服务器内部错误403 没有访问权限………

6.GET请求和POST请求的区别

步  骤请求方式实  现  代  码初始化组件GETxmlHttpRequest.open( GET, url, true );POSTxmlHttpRequest.open( POST, url, true );xmlHttpRequest  .setRequestHeader( Content-Type,   application/x-www-form-urlencoded );发送请求GETxmlHttpRequest.send( null );POSTxmlHttpRequest.send(              key=xxx&type=12&year=2016 );

相关文章
|
6月前
|
Web App开发 JSON 前端开发
Ajax实现动态及时刷新表格数据
Ajax实现动态及时刷新表格数据
|
前端开发 JavaScript 关系型数据库
宝塔设置PHP定时任务实战记录(定时任务、ajax异步刷新API、shell脚本、访问url)
宝塔设置PHP定时任务实战记录(定时任务、ajax异步刷新API、shell脚本、访问url)
745 0
|
前端开发 数据可视化 JavaScript
ajax刷新php后台实现定时任务的执行解决方案
ajax刷新php后台实现定时任务的执行解决方案
97 0
|
XML JSON 前端开发
【Spring MVC学习笔记 六】SpringMVC框架整合AJAX完成局部刷新
【Spring MVC学习笔记 六】SpringMVC框架整合AJAX完成局部刷新
99 0
|
前端开发
使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?
使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?
101 0
使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?
|
Web App开发 JSON 前端开发
Ajax实现动态及时刷新表格数据
Ajax实现动态及时刷新表格数据
424 0
Ajax实现动态及时刷新表格数据
|
XML JSON 前端开发
【Ajax入门】实现页面的局部刷新,前后端交互少不了的技术
之前已经学习jQuery了,我们今天在jQuery的基础上继续学习Ajax。如果你不知道jQuery那么你可以先去看看本专栏的上一篇文章。
【Ajax入门】实现页面的局部刷新,前后端交互少不了的技术
|
JavaScript 前端开发
JQuery 极致ajax局部和整体刷新
JQuery 极致ajax局部和整体刷新
114 0
|
JSON 前端开发 JavaScript
JQuery 再谈ajax局部刷新
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/48783129 JQuery 再谈ajax局部刷新。
1167 0