码迷,mamicode.com
首页 > Web开发 > 详细

浏览器与服务器通信技术——Ajax详解

时间:2019-05-20 22:45:11      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:布尔   function   辅助   hang   val   dstar   null   code   dex   

使用BOM接口从服务器获取数据,获取的是整个页面,得到数据之后需要刷新整个页面。运用ajax技术无须刷新页面即可从服务器取得数据。ajax的核心是XMLHttpRequest对象。

一、 创建XHR对象

var xhr=new XMLHttpRequest();

二、启动和发送请求

xhr.open("get","example.php",false);

open方法接受3个参数:要发送的请求的类型,请求的URL和表示是否异步发送请求的布尔值。URL相对于执行代码的当前页面。

xhl.send(null);

send方法接受一个参数,即要作为请求主体发送的数据。如果不需要通过请求主体发送数据,则必须传入null。

三、 处理响应

调用send()之后,请求就会被分派到服务器,等待服务器的响应。在收到响应后,响应的数据会自动填充XHR对象的属性,相关属性简介如下:
responseText:作为响应主体被返回的文本。
responseXML:如果响应内容类型为"text/xml",这个数据将保存包含响应数据的XML DOM文档。
status:响应的HTTP状态说明。一般来说,可以将HTTP状态代码200作为成功的标志,此时可以取得responseText属性的值。状态代码304表示请求的资源并没有被修改,可以使用浏览器缓存中的版本。
statusText:HTTP状态的说明。

1 xhr.open("get","example.php",false);
2 xhr.send(null);
3 if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
4      alert("成功"+xhr.responseText);
5 }else{
6     alert("失败"+xhr.responseText);
7 }    

四、异步获取数据

XHR对象有一个readyState属性,该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下:

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

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

3. 发送。已经调用send()方法,但尚未接受到响应。

3. 接受。已经接受到部分响应数据。

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

只要readyState的属性值改变一次,就会触发一次readystatechange事件。

 1 var xhr=new XMLHttpRequest();
 2 xhr.onreadystatechange=function(){
 3     if(xhr.readyState==4){
 4         if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
 5             alert(xhr.responseText);
 6         }else{
 7             alert("失败"+xhr.responseText);
 8         }
 9     }    
10 };
11 xhr.open("get","example.php",true);
12 xhr.send(null);    

调用xhr.abort()方法,XHR对象会停止触发事件。

五、get请求

get请求常用于向服务器查询某些信息,可以将查询字符串追加到url的末尾:

xhr.open("get","example.php?age=20&name=xiaoming",true);

查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码,然后才能放到URL的末尾。下面这个函数可以辅助向现有URL的末尾添加查询字符串参数:

1 function addURLParam(url,name,value){
2   url+=(url.indexOf("?")==-1?"?":"&");
3   url+=encodeURIComponent(name)+"="+encodeURIComponent(value);
4   return url;
5 }

六、POST请求

POST请求,通常用于向服务器发送应该被保存的数据。POST请求的主体可以包含非常多的数据,而且格式不限。如果服务器上的PHP想通过$_POST超级全局变量获取数据,可以使用XHR来模仿表单提交:首先将Content-Type头部信息设置为application/x-www-form-urlencoded,也就是表单提交时的内容类型,其次以适当方式创建一个字符串。

1 xhr.open("post","test.php",true);
2 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
3 var data="age=20&name=dongfeng"
4 xhr.send(data);

也可以通过serialize()函数将页面中表单的数据进行序列化,然后通过XHR发送到服务器。

1 xhr.open("post","test.php",true);
2 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
3 var form=document.getElementById("user-info");
4 xhr.send(serialize(form));

与get请求相比,POST请求消耗的资源会多一些。从性能角度来看,以发送相同的数据计,Get请求的速度最多可达到POST请求的两倍。

七、FormData

FormData为序列化表单以及创建与表单格式相同的数据提供了便利。使用FromData的方便之处体现在不必明确地在XHR对象上设置请求头部。XHR对象能够识别传入的数据类型是FormData的实例,并配置适当的头部信息。

1 xhr.open("post","test.php",true);
2 var form=document.getElementById("user-info");
3 xhr.send(new FormData(form));

可以使用append方法向FromData对象中追加数据:

var data=new FormData();
data.append("name","snsart");

八、进度事件

有以下6个进度事件:

loadstart:在接受到响应数据的第一个字节时触发。

progress:在接受响应期间持续不断的触发。

error:在请求发生错误时触发。

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

load:在接受到完整的响应数据时触发。

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

其中onprogress事件处理程序会接收到一个envent对象,其target属性时XHR对象,并且有三个额外的属性:lengthComputable、position和totalSize。其中,lengthComputable是一个表示进度信息是否可用的布尔值,position表示已经接收的字节数,totalSize表示根据

Content-Length响应头部确定的预期字节数。有了这些数据,就可以创建一个进度指示器了:

1 xhr.onprogress=function(event){
2   var divStatus=document.getElementById("status");
3   if(event.lengthComputable){
4     divStatus.innerHTML="接收:"+event.position+"总共:"+"event.tatalSize"+"字节";
5   }
6 };
7 xhr.open("get","altevents.php",true);
8 xhr.send(null);

 

浏览器与服务器通信技术——Ajax详解

标签:布尔   function   辅助   hang   val   dstar   null   code   dex   

原文地址:https://www.cnblogs.com/snsart/p/10896137.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!