快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

如何使用局部刷新Ajax技术

这篇文章主要介绍“如何使用局部刷新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技术”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


名称栏目:如何使用局部刷新Ajax技术
文章位置:http://6mz.cn/article/gccdpe.html

其他资讯