攻略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);

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

AJAX 开发攻略

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

Ajax原理攻略

====================================================== 注:本文源代码点此下载 =============================...
  • javazhuanzai
  • javazhuanzai
  • 2012年02月01日 02:33
  • 136

[2014.3.23]cse::lab2::partD 简明攻略

这一部分要求增加两个新的接口 所以从上到下都得改一些东西 1. 找到extent_protocol.h中的enum types,增加软连接文件类型。 2. yfs_client.h和yfs...
  • wizardforcel
  • wizardforcel
  • 2014年05月16日 18:15
  • 1415

Linux shell 脚本攻略 第一章 小试牛刀

1.1 简介      1 打开终端后,就会出现一个提示符,形式通常如下         username@hostname$ 或者root@hostname#      2 $表示的是普通用户,#表...
  • cgl1079743846
  • cgl1079743846
  • 2014年01月14日 15:29
  • 2351

《混》游戏物价攻略

今天意外接触到一款经营类游戏《混》,地址:http://jingtaiweb.sinaapp.com/hun/myapp/ 通过两个小时的统计,终于获得了每个项目价格数据,如下图,数据基于2...
  • ww2041
  • ww2041
  • 2017年02月08日 20:00
  • 2632

hitText方法和pointInside方法

hitText方法和pointInside方法事件传递hitText方法 作用 寻找最合适view处理事件 什么时候调用 当一个事件传递给一个控件的时候,控件就会调用这个方法 返回谁, 谁就是最合...
  • JH_1995
  • JH_1995
  • 2016年05月20日 22:10
  • 635

学习python入门攻略及资料

以前好多人使用matlab(octave)做机器学习的,吴恩达老师以前在机器学习课也是用matlab(octave),但近几年,python已经成为机器学习热门的工具,吴恩达老师的深度学习课程已经用p...
  • echo_1994
  • echo_1994
  • 2017年12月31日 14:54
  • 97

Bootstrap框架快速上手攻略

1.防止顶部导航条遮盖页面元素: style="padding-top: 50px" 2.背景色统一改变格式: class="bg-primary"/danger/success... 3.导航堆叠:...
  • xunshishi
  • xunshishi
  • 2016年10月27日 18:09
  • 450

荡神志-流程攻略(二)

穿云关:   先到城前,对话,不能进城之后到地图的左方有一个老头在树下,对话完进城,先到城的中间,看到一个有勇无谋的瞎子(他很有骨气唷),再去城左上方找大夫(不是最左上喔,是最左上往右一点点有一个屋子...
  • ourgames
  • ourgames
  • 2005年03月05日 14:44
  • 1102

Interlocked类的静态方法

1.public static class Interlocked2.Add(Int32, Int32) 对两个 32 位整数进行求和并用和替换第一个整数,上述操作作为一个原子操作完成。 Add(I...
  • wu_pan123
  • wu_pan123
  • 2018年01月16日 11:43
  • 121
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:攻略ajax
举报原因:
原因补充:

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