新网创想网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍“如何使用局部刷新Ajax技术”,在日常操作中,相信很多人在如何使用局部刷新Ajax技术问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何使用局部刷新Ajax技术”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
创新互联建站长期为数千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为伊美企业提供专业的网站设计、成都网站建设,伊美网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。
1. Ajax的概念?
「以前浏览器如何实现通信呢:」
Jsp页面发送请求--->servlet进行接收--->数据放到域对象--->转发给jsp页面
同步的发送请求:这个请求的特点,我们每一次的转发,浏览器都要重新渲染整个页面、假设我的页面有100k的数据,只有1k的数据需要刷新,如果使用转发的方式的话那么每一次渲染的数据都是100k,这样浏览器的渲染压力就变大了
「Ajax技术实现通信:」
引入Ajax:假设我们使用了Ajax的技术的话,那么我们这100k的数据我们有99k的数据都不需要刷新,只是需要刷新这1k的数据,这就是Ajax
在一开始的时候,所有的浏览器并不支持所谓的局部刷新技术,而且一开始大多数的浏览器并不看好这门技术,这个时候微软首先就在IE浏览器中引入了异步请求的这个概念,到后来看到了Ajax在浏览器上的优秀表现,于是其他的浏览器厂商也就引入了Ajax这个技术
含义:Ajax是用于网页上面进行局部刷新的一门技术
2、Ajax技术的优缺点
「Ajax技术优点:」
核心技术:Ajax的核心技术是XMLHttpRequest,它是JavaScript中的一个对象
减轻了服务器端负担,将一部分以前由服务器负担的工作转移到客户端执行,利用客户端闲置的资源进行处理
在只局部刷新的情况下更新页面,增加了页面反应速度,使用户体验更友好
「Ajax技术缺点:」
Ajax的缺点是不利于SEO推广优化,因为搜索引擎无法直接访问到Ajax请求的内容
3、Ajax技术能干嘛?
「主要作用:」
发送同步或者异步请求
进行网页的局部刷新
下拉列表的数据来源于服务器的这种
做前后分离的开发
表单元素的动态认证
4、Ajax技术的具体使用
「使用步骤:」
创建获取Ajax对象的方法
function getAjax () { var ajax; try{ ajax=new ActiveXObject("microsoft.xmlhttp"); }catch(e){ try{ ajax=new XMLHttpRequest(); }catch(e){ alert('异步都没有 换浏览器吧....'); } } return ajax; }
获取Ajax对象
var ajax=getAjax();
准备发送Ajax请求
ajax.open("GET","${pageContext.request.contextPath}/dates.action");
发送Ajax请求
ajax.send(null);
监听Ajax中4种状态
ajax.onreadystatechange=function(){ if(ajax.readyState==4){ / } }
判断服务器是否成功响应
if(ajax.status==200){//说明服务器的响应是正确的 var time=ajax.responseText; //要将这个数据直接赋值给一个一个标签 document.getElementsByTagName('span')[0].innerText=time; }
Get方法数据传输(放到url后面)
ajax.open("GET","${pageContext.request.contextPath}/dates.action?userName=qianyu&password=123");
Post方式发送请求和数据
//设置请求头 ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //发送数据 ajax.send("userName=qianyu&password=123");
到此,关于“如何使用局部刷新Ajax技术”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!