js-Ajax与Comet

Ajax与Comet:

1、Ajax技术的核心是XHR(XMLHTTPRequest对象)

创建xhr对象:

function createXHR(){

if(typeof XMLHttpRequest != "undefined"){

return new XMLHttpRequest();

}else if(typeof ActiveXObject !="undefined"){

if(typeof arguments.callee.activeXString !="string"){

var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],

i,len;

for(i=0,len=versions.length;i<len;i++){

try{

new ActiveXObject(versions[i]);

arguments.callee.activeXString=versions[i];

break;

}catch(ex){

//跳过

}

}

}

return new ActiveXObject(arguments.callee.activeXString);

}else{

throw new Error("No XHR object available.");

}

}

2、使用XHR对象:open(),send()

1)     open()方法,接收3个参数,要发送的请求类型,请求的URL,表示是否异步发送请求的布尔值

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

调用open()方法并不会真正发送请求,而只是启动一个请求以备发送

2)     发送特定的请求,必须像下面这样调用send()方法:

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

xhr.send(null);

send()方法接收一个参数,即要作为请求主体发送的数据,如果不需要通过请求主体发送数据,就必须传入null,这个参数对于有些浏览器来说是必须的,调用send()方法之后,请求就会被分派到服务器

3)     请求同步的时候,js代码会等到服务器响应之后再继续执行,收到响应后,响应的数据会自动填充XHR对象的属性

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

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

status:响应的HTTP状态

statusText:HTTP状态的说明

收到响应后,第一步先检查status属性,以确定响应已经成功返回,

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

//将http状态代码为200作为成功的标记

//状态代码为304表示请求的资源并没有被修改,可以直接使用浏览器中缓存的版本

alert(xhr.responseText);

}else{

alert("Request was unsucessful:"+ xhr.status);

}

4)     发送异步请求,检测XHR对象的readyState属性,表示请求/响应过程的当前活动阶段

属性可取的值:

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

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

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

3:接收,已经接收到部分响应数据

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

必须在调用open()方法之前指定onreadystatechange事件处理程序才能够确保跨浏览器兼容性

var xhr=createXHR();

xhr.onreadystatechange=function(){

if(xhr.readyState==4){

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

alert(xhr.responseText);

}else{

alert("Request was unsucessful:"+ xhr.status);

}

}

};

xhr.open("get","example.js",true);

xhr.send(null);

5)     调用xhr.abort()方法,XHR对象会停止触发事件,而且也不再允许访问任何与响应有关的对象属性

3、HTTP头部信息:每个HTTP请求和响应都会带有相应的头部信息,XHR对象提供了操作这两种头部(请求头部以及响应头部)信息的方法

1)     默认情况下,发送XHR请求的同时,还会发送下列头部信息:

Accept:浏览器能够处理的内容类型

Accept-Charset:浏览器能够显示的字符集

Accept-Encoding:浏览器能够处理的压缩编码

Accept-Language:浏览器当前设置的语言

Connection:浏览器与服务器之间连接的类型

Cookie:当前页面设置的任何Cookie

Host:发出请求的页面所在的域

Referer:发出请求的页面的URI

User-Agent:浏览器的用户代理字符串

2)     使用setRequestHeader()方法可以设置自定义的请求头部信息,接收2个参数:头部字段的名称,头部字段的值,方法放置在open()之后,send()之前

3)     getRequestHeader()方法取得相应的响应头部信息,getAllResponseHeaders()方法可以取得包含所有头部信息的长字符串

var myHeader=xhr.getResponseHeader("MyHeader");

var allHeader=xhr.getAllResponseHeader();

4、查询字符串中的每个参数的名称以及值都需要使用encodeURIComponent进行编码,然后才放到URI的末尾,并且所有的名值对都必须由&分开

xhr.open("get","example.php?name1=value1&name2=value2",true);

function addURLParam(url,name,value){

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

url+=encodeURIComponent(name)+ "=" +encodeURIComponent(value);

return url;

}

5、post:

var xhr=createXHR();

xhr.onreadystatechange=function(){

if(xhr.readyState==4){

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

alert(xhr.responseText);

}else{

alert("Request was unsucessful:"+ xhr.status);

}

}

};

xhr.open("get","example.js",true);

xhr.setRequestHander("Content-Type","application/x-www-form-urlencoded");

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

xhr.send(serialize(form));

6、FormData

var data=new FormData();

data.append("name","zhang");

//传入表单元素

var data=new FormData(document.forms[0]);

//直接传给send

xhr.open("get","example.js",true);

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

xhr.send(new FormData(form));

7、超时设置:

xhr.open("get","example.js",true);

xhr.timeout=1000;   //仅适用于ie8+

xhr.ontimeout=function(){

alert("ddddddddd");

}

xhr.send(null);

8、overrideMimeType()方法可以保证将响应当做Xml而非纯文本来显示

overrideMimeType("text/xml")

9、进度事件:

1)     针对xhr操作:

loadstart:子啊接收到响应的第一个字节时触发

progress:在接收响应期间不断触发

error:在请求发生错误的时候触发

abort:在因为调用abort()方法而终止连接时触发----用于停止正在进行的请求

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

loaded:在通信完成或者触发error,abort,load事件后触发

2)     必须在open之前添加onprogress事件处理程序

var xhr=createXHR();

xhr.onload=function(event){

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

alert(xhr.responseText);

}else{

alert("Request was unsucessful:"+ xhr.status);

}

};

xhr.onprogress=function(event){

var divStatus=document.getElementById("status");

if(event.lengthComputable){

divStatus.innerHTML="Received"+event.position+"of"+event.totalSize+"bytes";

}

//event.lengthComputable表示进度信息是否可用布尔值

//event.position表示已经接收的字节数

//event.totalSize根据Content-Length响应头部确定的预期字节数

};

xhr.open("get","example.js",true);

xhr.send(null);

10、将withCredentials属性设置为true,可以指定某个请求应该发送请求

11、跨浏览器的CORS

时间: 2024-12-28 05:36:47

js-Ajax与Comet的相关文章

javascript AJAX与Comet详解

          博客专家福利      [限时活动]建专辑得大奖       专访荣浩:流程的永恒之道      当青春遇上互联网,能否点燃你的创业梦      推荐有礼--找出您心中的技术大牛 javascript AJAX与Comet详解 分类: javascript2012-12-24 17:39 367人阅读 评论(0) 收藏 举报 XMLHttpRequest对象 在IE5中,XHR对象是通过MSXML库中的ActiveX对象实现的.在IE中可能会遇到三种不同版本的XHR对象,即M

[网页设计]Ajax、Comet与Websocket--转

从http协议说起 1996年IETF  HTTP工作组发布了HTTP协议的1.0版本 ,到现在普遍使用的版本1.1,HTTP协议经历了17 年的发展.这种分布式.无状态.基于TCP的请求/响应式.在互联网盛行的今天得到广泛应用的协议,相对于互联网的迅猛发展,它似乎进步地很慢.互联网从兴起到现在,经历了门户网站盛行的web1.0时代,而后随着ajax技术的出现,发展为web应用盛行的web2.0时代,如今又朝着web3.0的方向迈进.反观http协议,从版本1.0发展到1.1,除了默认长连接之外

JavaScript学习总结【12】、JS AJAX应用

1.AJAX 简介 AJAX(音译为:阿贾克斯) = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术,也就是在无需重新加载整个网页的情况下,能够更新部分网页的技术.AJAX 不是新的编程语言,而是一种使用现有标准的新方法,是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,传统的

将微博或者qq空间的说说同步至博客园 wcf+js(ajax)跨域请求(1)

前天刚写了篇文章使用Bootstrap为你的博客园自定义轮播图片(今天将图片加载的顺序调整了下,不在访问的时候直接加载,而是页面加载最后在脚本里面动态添加dom元素),虽说技术含量不怎么高,但是大家还算感兴趣.其实对博主来说最关键是博客的积分在涨.所以趁热打铁,再来一篇使用wcf+js ajax跨域请求数据同步空间说说的帖子. 因为是请求qq说说的数据,所以要登陆我的qq,这个很麻烦,总不能让每个访客都登陆的qq,然后把数据取出来吧,而且qq也没有相关的接口提供,登陆的时候还要处理验证码.所以这

简单的前端js+ajax 购物车框架(入门篇)

其实,一直想把自己写的一些js给总结下,也许是能力有限不能把它完美结合起来.只能自己默默的看着哪些代码,无能为力. 今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的增删改查,也许写的并不是那么完善,但最重要的是一个入门,也希望js达人给些建议,好让我更上一个台阶. HOHO~~~开始咯: Js: //为了省事,就没写自己的js ajax了 用了jquery的,当然你也可以添加到jquery的扩展方法内,哈哈,我太懒了,所以就写这里了. var _$ = { A

js Ajax的几种操作方法

具体网址:http://blog.sina.com.cn/s/blog_bfa00a970101c5ns.html 第一种: $.ajax({                type: "POST",                url: "VIPManager/VipHandler.ashx",                data: "Method=LogOut",                async: false, //是否异步 

js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家,需要了解的朋友可以参考下 很庆幸,我又见到了末日后新升的太阳,所以我还能在这里写文章,言归正传哈,最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家. 什么是JSONP协议? JSONP即JSON w

Ajax 与 Comet

Ajax技术的核心是XMLHttpRequest对象(简称XHR). XMLHttpRequest对象 在浏览器中创建XHR对象要像下面这样,使用XMLHttpRequest构造函数. var xhr = new XMLHttpRequest(); XHR的用法 xhr.open("get","example.php",false);要发送请求的类型,请求的URL和表示是否异步发送请求的布尔值. xhr.send(null); 响应数据自动填充XHR对象的属性,相关

js ajax 传送xml dom对象到服务器

客户端代码 1 <script> 2 var isie = true; 3 var xmlhttp = null; 4 function createXMLHTTP() {//创建XMLXMLHttpRequest对象 5 if (xmlhttp == null) { 6 if (window.XMLHttpRequest) { 7 xmlhttp = new XMLHttpRequest(); 8 } 9 else { 10 xmlhttp = new ActiveXObject("

Stripes视图框架Java对象属性验证和prototype.js Ajax的测试

Stripes视图框架Java对象属性验证,它允许对字段设置是否必须填写,对数字大小进行限制等.我用prototype.js Ajax 将验证后的数据及时地展示出来,下面来看程序. 1.编写User实体类 此用户共三个属性: name.email.age. package com.boonya.stripes.entity;      public class User {              private String name;              private String