AJax技术

轻松理解JavaScript之AJAX

字号+ 作者:H5之家 来源:H5之家 2017-03-20 13:03 我要评论( )

摘要AJAX技术是网页构建的必备技能之一,本文希望能帮助大家轻松的学习这项技术一、什么是ajax?ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整

摘要

AJAX技术是网页构建的必备技能之一,本文希望能帮助大家轻松的学习这项技术

一、什么是ajax?

ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。

二、如何使用ajax? 第一步:创建xmlhttprequest对象

创建xmlhttprequest对象,XMLHttpRequest对象用来和服务器交换数据。

var xmlhttp =new XMLHttpRequest(); 第二步:注册回调函数

onreadystatechange函数,当服务器响应请求并返回数据后,我们想要客户端处理这些数据就需要使用onreadystatechange函数,每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。对于readyState会在下一章节详细介绍。

xmlHttp.onreadystatechange= callback; function callback(){} 第三步:配置和发送请求

使用xmlhttprequest对象的open()和send()方法配置和发送资源请求给服务器。
xmlhttp.open(method,url,async) method包括get 和post,url主要是文件或资源的路径,async参数为true(代表异步)或者false(代表同步)
xmlhttp.send();使用get方法发送请求到服务器。
xmlhttp.send(string);使用post方法发送请求到服务器。
post表单数据需要使用xmlhttprequest对象的setRequestHeader方法增加一个HTTP头。

post 发送请求什么时候能够使用呢?
(1)更新一个文件或者数据库的时候。
(2)发送大量数据到服务器,因为post请求没有字符限制。
(3)发送用户输入的加密数据。

xhttp.open("POST", "ajax_test.aspx", true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send("fname=Henry&lname=Ford"); 第四步:处理响应数据

使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。
使用responseText属性得到服务器响应的字符串数据,使用responseXML属性得到服务器响应的XML数据。
在回调函数中使用readyState==4和status==200判断交互是否结束,响应是否正确,并根据需要获取服务器端返回的数据,更新页面内容。

function callback(){ if(xmlHttp.readyState == 4){ //判断交互是否成功 if(xmlHttp.status == 200){ //获取服务器返回的数据 //获取纯文本数据 var responseText =xmlHttp.responseText; document.getElementById("info").innerHTML = responseText; } } } 三、AJAX运行过程中5种状态(readyState)

在AJAX实际运行当中,对于访问XMLHttpRequest(XHR)时并不是一次完成的,而是分别经历了多种状态后取得的结果,对于这种状态在AJAX中共有5种,这五种状态是由AJAX引擎切换设置的,分别是。
0 : 定义了XHR,但还未初始化
1 :调用send()方法,正在发送请求,请求发送完毕后,开始等待接收响应
2 :响应接收完成
3 :正在解析响应内容
4 :响应内容解析完成,返回给客户端调用
对于上面的状态,其中“0”状态是在定义后自动具有的状态值,而对于成功访问的状态(得到信息)我们大多数采用“4”进行判断。
值得注意的是,状态每切换一次,都会触发onreadystatechange 事件,所以整个过程onreadystatechange 事件被触发5次

四、AJAX的优缺点 优点

1、最大的一点是页面无刷新,在页面内与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力给用户的体验非常好。
2、减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。

缺点

1、ajax干掉了back按钮,即对浏览器后退机制的破坏。
2、对搜索引擎的支持比较弱。

更多前端技术文章,欢迎前往我的个人博客:嵘么么的个人博客

爱编程-编程爱好者经验分享平台

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
"