Ajax刷新

50 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第33天,点击查看活动详情 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 );