攻略ajax

原创 2016年05月30日 21:14:51

最近在做项目,是一个后台管理系统,需要很多前后台的数据交互。其中都是用到了ajax的异步交互。最开始接触 是直接使用 jquery ajax ,是一个比较方便的框架,使用简单。无需知道原理  直接  $.get();/$.post(); 就可以实现数据交互。

但是当我需要实现一个进度条的功能时,我就一脸懵逼了。跟师兄要了实现进度条的代码,他用的都是原生的ajax,鉴于我没有学习过原生ajax,而是直接使用jquery ajax,师兄给我的代码我看的一脸懵逼。只觉得很复杂看不懂。

在网上找了很多资料。包括有jquery的很多插件可以实现这功能,但是 奈何功力尚浅,其中的原理都不懂,便不知如何使用。

拿了一个函数直接生搬硬套,却没有达到我想要的效果。去请教师兄,师兄跟我讲

“你不能为了做项目而做项目,我给你的代码,都是原生的,这些都是最好的。这其中的原理你要懂,这些都是很简单的代码……”

师兄也点醒了我。我也意识到自己的问题,觉得自己太浮躁。很多基础都还没打牢,基本的原理都不是很理解,就开始使用框架,这确实是一个坏习惯。顿时感觉羞愧难当,自己不是一个合格的程序员。

师兄给了我一个网址,是ajax的学习视频。我决定用一天时间看完ajax,不求精通,只求能够理解其中的原理。在以后的学习路上,慢慢提升。脚踏实地,才能敲出朴实而健壮的代码。

在这里,十分感谢师兄对我的谆谆教诲。或许,每个人的学习路上都需要有那么一个好的导师,为你指明方向。


下面,是我的学习笔记。


Ajax的核心

XMLHttpRequest对象

1.创建对象 var xhr=new XMLHttpRequest();

 

2.启动请求:xhr.open(“post”,url,true);

post/get表示请求类型;urltrue/false表示是否异步发送请求

 发送请求:xhr.send(null);

 

3.请求得到响应后,响应的数据会自动填充xhr对象的属性

属性:

responseText 作为响应主体被返回的文本

responseXML 如果响应的内容类型是“text/xml”或“application/xml”,这个属性中将保存包含着响应数 据的XML DOM文档

status  响应的HTTP状态200成功、304请求资源未被修改,可以使用缓存

statusText   HTTP状态的说明

readyState 表示请求/响应过程的当前活动阶段

0:未初始化,尚未调用open()方法

1:启动。已经调用open()方法,但尚未调用send()方法

2:发送。已经调用send()方法,但尚未接收到响应

3:接收。已经接收到部分数据

4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了。

timeout 表示请求在等待响应多少毫秒之后就终止

 

4.事件(方法):

onreadystatechange()  只要readystate属性的值产生变化,都会触发一次onreadystatechange事件。通常我们只 对readystate值为4的阶段 感兴趣,因为此时所有的数据准备就绪。不过,必须在调用 open()之前指定  onreadystatechange()事件处理程序

open(“post”,url,true)

setRequestHeader() 设置自定义的请求头部信息

send(null)

getResponseHeader(“参数字段”) 传入头部字段名称,获得相应的响应头部信息

getAllResponseHeaders() 取得一个包含所有头部信息的长字符串

abort() 取消异步请求

overrideMineType() 用于重写XHR响应的MINE类型

 

5.get请求

常用于向服务器查询某些信息,必要时也可以将查询的字符串参数追加到url的末尾。

对于XHR而言,位于传入open()方法的url末尾的查询字符串必须使用encodeURIComponent()进行编码

function addURLParam(url,name,value)

{

url+=(url.indexOf(“?”)= = -1 ? “?” : “&”);

url+=encodeURIComponent(name)+ “=” + encodeURIComponent(value);

return url;

}

 

6.post请求

常用于想服务器发送应该被保存的数据

发送post()请求需要向send()方法中传入某些数据。由于XHR设计主要是为了处理XML,当需要提交表单信息是,需要将头部信息Content-Type

设为为application/x-www-form-urlencoded

其次,以适当的格式创建一个字符串

var form=document.getElementById(“user-info”);

xhr.send(serialize(form));//将表单user-info中的数据序列化之后发送给服务器

 

7.FormData

为序列化表单以及创建与表单格式相同的数据提供了便利

var data= new FormData();

data.append(“name” , “Linda”); //创建对象,向其中添加数据

 

var data = new FormData ( document.forms[0]); // 创建实例  

 

有了FormData对象后,

var form=document.getElementById(“user-info”);

xhr.send(serialize(form));

 

可以转化为var form=document.getElementById(“user-info”);

xhr.send(new FormData(form));

 

使用FormData的方便之处在于不必在xhr对象上设置请求头部。

 

8.超时设定

XHR对象的属性timeout表示请求在等待响应多少毫秒之后就终止。在给timeout设置一个数值后,表示在规定时间内浏览器没有接收到响应那么就触发timeout事件,进而调用ontimeout事件处理程序

 

9.进度事件:XHR6个进度事件

loadstart 在接收到响应数据的第一个字节触发

progress 在接收响应期间持续不断地触发

error 在请求发生错误时触发

abort 在因为调用abort()方法而终止连接时触发

load 在接收到完整的响应数据时触发

loadend 在通信完成或者触发error/abort/load事件后触发

每个请求的触发事件流程

loadstart事件 → 一个或多个progress事件 →error/abort/load事件中的一个 →loadend事件

 

9.1 load事件,用于替代readystatechange事件,响应接受完毕将自动触发load事件,因此没有必要去检查readystate属性的值的变化。

只要浏览器接收到服务器的响应,不管其状态如何,都会触发load事件,这意味这你必须要检查status属性,判断数据是否真的已经可用

 

9.2 progress事件

这个事件会在浏览器接受新数据期间周期性地触发。而onprogress事件处理程序会接收到一个event对象,其target属性是XHR对象,但包含着三个额外的属性:lengthComputablepositiontotalSize

lengthComputable:表示进度信息是否可用的布尔值

position:表示已经接受的字节数

totalSize:表示根据content-Length响应头部确定的预期字节数

创建进度条指示器的一个实例

var xhr = new XMLHttpRequest();

xhr.onload=function(event){

if  ( ( xhr.status >= 200 && xhr.status < 300) || xhr.status = = 304)

{alert(xhr.responseText);}

else

{alert(“请求失败” + xhr.status);}

};

xhr.onprogress=function(event){

var divStatus= document.getElementById (“status”);

if( event.lengthComputable = = true)

{

divStatus.innerHTML= “已经接收了” + (event.position/event. totalSize) * 100 + “%” ;

}

}

xhr.open(“get”, “upload.php” ,true);

xhr.send(null);

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

开学了,大三了

此为抒情小散文。看技术贴的请跳过。 大三了,还有一年的时间可以学习,然后就要去实习了,想想自己的编程技术还真是堪忧啊。 学习的最大的敌人是懒惰。是的,因为懒惰,自己错失了很多学习的宝贵机会...

时光商店下载网页设计

第一次写开发过程  =  =  (并不知道应该怎么写) 时光商店app 首先确定这个页面的基本框架 首页——服务——特点——介绍——关于我们——页脚 主要由这几个div构成 ...

AJAX开发攻略(PDF)含配文代码

  • 2009年11月09日 15:58
  • 427KB
  • 下载

VBScript上ajax傳輸完整攻略

01 "vbscript"> 02 sData ="INSERTTYPE=I5&CODESEND={0}&DEPT_NAME={1}&WORDSEND={2}&P...

jquery ajax 表单完全攻略

译自:http://www.malsup.com/jquery/form/简介jQuery Form Plugin可以简便且隐式地使用AJAX改善HTML表单(Form)。主要的函数ajaxForm和...

AJAX 开发攻略

在使用浏览器浏览网页的时候,当页面刷新很慢的时候,你的浏览器在干什么?你的屏幕内容是什么?是的,你的浏览器在等待刷新,而你的屏幕内容是一片空白,而你在屏幕前苦苦的等待浏览器的响应。开发人员为了克服这种...

攻略ajax

最近在做项目,是一个后台管理系统,需要很多前后台的数据交互。其中都是用到了ajax的异步交互。最开始接触 是直接使用 jQuery ajax ,是一个比较方便的框架,使用简单。无需知道原理  直接...

SharpPcap-3.4.0-开发全攻略(中文版)

  • 2017年10月26日 16:10
  • 728KB
  • 下载

MySQL调优攻略

  • 2017年10月12日 12:44
  • 230KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:攻略ajax
举报原因:
原因补充:

(最多只允许输入30个字)