AJax技术

js中的ajax技术

字号+ 作者:H5之家 来源:H5之家 2017-09-08 09:02 我要评论( )

/***ajax即异步JavaScriptXML*(ie7,ie6-使用MSXML.HTTP的不同版本实现)**1.对于ie7的浏览器可以使用XMLHTTPRequest对象,下面是一个兼容ie6-的写法*functioncrea

/**
* ajax即异步JavaScript+XML
* (ie7+,ie6-使用MSXML.HTTP的不同版本实现)
*
* 1.对于ie7+的浏览器可以使用XMLHTTPRequest对象,下面是一个兼容ie6-的写法
*function createXHR(){
if(typeof XMLHttpRequest != "undefined"){
//能使用XHR
return new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
//针对IE
if(typeof arguments.callee.activeXString != "string"){
var version=["MSXML2.XMLHttp.6.0","MSXML2.Http.3.0","MSXML2.XMLHttp"];
for(var i=0,j=version.length;i<j;i++){
try{
new ActiveXObject(version[i]);
arguments.callee.activeXString = version[i];
break;
}catch(e){}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Error("no XHR available");
}




}
*
* 2.xhr的方法:(xhr使用会受到同源策略的限制,只能给同一域名下使用同一协议和端口的地址发送请求)
* (实现跨域请求的方法就是url给出绝对地址,同时跨域请求还有一些限制,不能传cookie,不能访问头部信息)
* a.open(method,uri,false):在使用xhr的第一步就是使用这个方法
* (第一个表示请求方式"post或者get"..,第二个表示请求的目标地址,第三个表示是否异步发送)
* b.send():发送数据
* c.对于返回的状态码可以检测200-300和304(304表示缓存中数据可以使用)
* d.收到响应后xhr的4个属性会被填充
* 4个属性:
* 1.responseText:返回的文本
* 2.responseXML:返回的XML
* 3.status:响应的HTTP状态(200表示成功,仅仅表示成功响应,具体的响应内容需要别的属性来获取)
* 4.statusText:状态说明
* 当收到消息的时候会触发onchange属性,收到返回的信息可以通过readyState来查看状态:(0--未初始化;1--启动;2--发送;3--接收到数据(没收全呢);4--全部接收到了)
* (一般判断状态为4就够了,如果要接收的消息比较长,并且急于显示可以使用状态3)
* e.xhr.abort()方法可以取消异步请求
* f.在open方法之后send方法之前还可以设置头部信息setRequestHeader("key","value")
* 头部信息有以下几种:
* 1.Accept:浏览器能够处理的内容
* 2.Accept-Charset:浏览器能够显示的字符集
* 3.Accept-Encoding:浏览器当前设置的语言
* 4.Connection:浏览器与服务器之间的连接类型
* 5.Cookie:当前页面设置的任何Cookie
* 6.Host:发出亲求的所在页面的域
* 7.Referer:(应该是Referrer但是浏览器实现的时候出错了,就只能这样了)发送页面的url
* 8.User-Agent:用户代理

* 3.get请求:
* 1.get请求必须编码才能使用,编码方式encodeURIComponent();(解码decodeURIComponent())
* 2.get请求只能携带少量数据

* 4.post请求:
* 1.post能携带大量的数据(一般需要修改数据库都是使用post)
* 2.post能够模仿表单提交(需要序列化同时也需要添加头部信息,头部信息是为了在服务器接收的数据在全局对象中能读取到)
* 3.xhr.setRequestHeader("Content-Type","applicaion/x-www-form-urlencoded");
* 4.对于使用xhr第一级的发送数据需要设置头部信息,对于xhr2级不需要设置头部信息,而是使用FormData()
* (xhr2级ie不支持)
* 5.超时设定:(ie8+,chrome60.0.3112.113支持的,别的没测试过)
* 1.在发送数据后timeout内没有收到数据就可以触发ontimeout事件
* xhr.timeout=1000;
* xhr.ontimeout=function(){};
* 6.重写mime类型:
* 在send之前重写mime类型
* overrideMimeType()
* mime类型可以使得返回的数据按照指定类型解析
* 7.接收数据的进度事件:
* 1.loadstart:接收到第一个数据就会触发
* 2.progress:在接受数据的过程中不断触发(这个属性很关键)
* (在触发这个事件的时候event对象会多三个属性:
* lengthComputable:表示进度信息是否可用
* position:表示已经接收到的字节个数
* totalSize:表示根据响应头部预计的总字节数)
* 3.error:请求发生错误的时候触发
* 4.load:在接受全部数据的时候触发
* 5.loadend:通信完成或者error,abort,load的时候触发

* 8.跨域请求:
* 1.ie使用xdr,别的浏览器使用xhr(必须指定绝对路径)
* 2.所有浏览器都支持的方法:
* a:abort();
* b:onerror();
* c:onload();
* d:responseText;
* e:send();
* 3.加载图像实现跨域:
* img标签加载时无视同源策略的,可以指定src来加载,但是无法返回响应文本
* 4.jsONP方法:
* 使用script标签来加载数据
* 创建script元素插入body,scr指定为需要请求的页面,可以直接请求js也能请求php页面
* 需要前后端商量接口的实现,下面是有一个简单的例子
* var oScript=document.createElement("script");
* oScript.src="./php/test.php?callback='show'";
* document.body.insertBefore(oScript,document.body.firstChild);
* (可以通过检测callback来给出相应的返回)
* 9.持续获取服务器数据的方法Comet:
* 1.轮询:
* a.短轮询:每隔一个时间段给服务器发送请求获取数据
* b.长轮询:发出请求当服务器有数据传送的时候会返回数据,没有数据传送的时候会一直开着连接,返回数据后立刻发出第二次请求
* 2.HTTP流(这个ie支持不是很好):
* 服务器使用while来实现死循环一直开着连接,每次输出数据就刷新一次缓存
* (在客户端需要检测readystate=3的值)
* 10.sse服务器发送事件(ie不支持,anroid的webkit也是不支持的):
* 再返回数据的时候必须设置header('Content-Type: text/event-stream');
* 有三个事件:
* onmessage:接收到数据的时候触发
* onerror:无法建立连接的时候触发
* onopen:建立连接的时候触发
* 开启链接链接可以使用:
* var source=new EventSource(url);
* 关闭连接可以使用:
* source.close();
* (每三秒服务器会向客户端发送一次数据)
* (使用sse的时候发送的数据一定要是加前缀的
* id:数据标识符(使用'\n'结尾)(这个是再断线重连的时候的依据)
* data:数据内容(使用'\n\n'结尾)
* event:响应事件(在设置完这个头后客户端可以添加自定义事件来接收消息)(使用'\n'结尾)
* retry:每次发送的间隔时间(使用'\n'结尾)
* )

*  11.WebSocket:
* ws是一个自定义协议,不是HTTP,只有在支持ws协议的服务器上才会生效
* ws有4个状态:
* 1:正在建立连接
* 2:已经建立连接
* 3:正在断开连接
* 4:已经断开连接
* 开启链接:var ws=new WebSocket("../php/test.php");
* 关闭连接:ws.close();
* 发送数据:ws.send(纯文本内容);
* 接收数据:在ws.onmessage事件中ev.data就是返回的数据
* 别的事件:和sse一样也有open,error,close事件(只能使用DOM0级方法添加)
* 在error事件中ev有三个属性:wasClean:是否已经明确关闭;code:状态码;reson:返回的信息
*
* (sse是单向的数据传送,在自动更新上使用很好,ws是双向的数据传送,但是不是每个服务器都能使用的)
*
*
*
         */

 

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

相关文章
  • AJAX技术及应用.doc

    AJAX技术及应用.doc

    2017-09-08 10:00

  • 详解ajax基本原理以及工作流程

    详解ajax基本原理以及工作流程

    2017-09-07 18:16

  • Form表单提交,Ajax请求,$http请求的区别

    Form表单提交,Ajax请求,$http请求的区别

    2017-09-07 18:16

  • java web开发:ajax技术(五)——锋利的JQuery

    java web开发:ajax技术(五)——锋利的JQuery

    2017-09-07 12:03

网友点评