1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

JavaScript之Ajax同步

作者:用户 来源:互联网 时间:2016-08-03 15:32:38

ajax服务器对象xmlhttprequestxmlhttpMSXMLajax原生编写Msxml2.XMLHTTPajax同步

JavaScript之Ajax同步 - 摘要: 本文讲的是JavaScript之Ajax同步, 一.XMLHttpRequest Ajax技术核心是XMLHttpRequest对象(简称XHR),这是由微软首先引入的一个特性,其他浏览器提供商后来都提

一.XMLHttpRequest
Ajax技术核心是XMLHttpRequest对象(简称XHR),这是由微软首先引入的一个特性,其他浏览器提供商后来都提供了相同的实现。在XHR出现之前,Ajax式的通信必须借助一些hack手段来实现,大多数是使用隐藏的框架或内嵌框架。
XHR的出现,提供了向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获取更多的信息,这就意味着,用户只要触发某一事件,在不刷新网页的情况下,更新服务器最新的数据。
虽然Ajax中的x代表的是XML,但Ajax通信和数据格式无关,也就是说这种技术不一定使用XML。
 
IE7+、Firefox、Opera、Chrome和Safari都支持原生的XHR对象,在这些浏览器中创建XHR对象可以直接实例化XMLHttpRequest即可。
var xhr = new XMLHttpRequest();
alert(xhr); //XMLHttpRequest
 
如果是IE6及以下,那么我们必须还需要使用ActiveX对象通过MSXML库来实现。在低版本IE浏览器可能会遇到三种不同版本的XHR对象,即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0。我们可以编写一个函数。

  1. function createXHR() { 
  2. if (typeof XMLHttpRequest != 'undefined') { 
  3. return new XMLHttpRequest(); 
  4. } else if  (typeof ActiveXObject != 'undefined') { 
  5. var versions = [ 
  6. 'MSXML2.XMLHttp.6.0', 
  7. 'MSXML2.XMLHttp.3.0', 
  8. 'MSXML2.XMLHttp' 
  9. ]; 
  10. for (var i = 0; i < versions.length; i ++) { 
  11. try { 
  12. return new ActiveXObject(version[i]); 
  13. } catch (e) { 
  14. //跳过 
  15. }  
  16. } else { 
  17. throw new Error('您的浏览器不支持XHR对象!'); 
  18.   
  19. var xhr = new createXHR(); 
 
在使用XHR对象时,先必须调用open()方法,它接受三个参数:要发送的请求类型(get、post)、请求的URL和表示是否异步。
xhr.open('get', 'demo.php', false); //对于demo.php的get请求,false同步
 
PS:demo.php的代码如下:
//一个时间
 
open()方法并不会真正发送请求,而只是启动一个请求以备发送。通过send()方法进行发送请求,send()方法接受一个参数,作为请求主体发送的数据。如果不需要则,必须填null。执行send()方法之后,请求就会发送到服务器上。
xhr.send(null); //发送请求
 
当请求发送到服务器端,收到响应后,响应的数据会自动填充XHR对象的属性。那么一共有四个属性:
 
属性名 说明
responseText 作为响应主体被返回的文本
responseXML 如果响应主体内容类型是"text/xml"或"application/xml",则返回包含响应数据的XML DOM文档
status 响应的HTTP状态
statusText HTTP状态的说明
 
接受响应之后,第一步检查status属性,以确定响应已经成功返回。一般而已HTTP状态代码为200作为成功的标志。除了成功的状态代码,还有一些别的:
 
 
HTTP状态码 状态字符串 说明
200 OK 服务器成功返回了页面
400 Bad Request 语法错误导致服务器不识别
401 Unauthorized 请求需要用户认证
404 Not found 指定的URL在服务器上找不到
500 Internal Server Error 服务器遇到意外错误,无法完成请求
503 ServiceUnavailable 由于服务器过载或维护导致无法完成请求
 
我们判断HTTP状态值即可,不建议使用HTTP状态说明,因为在跨浏览器的时候,可能会不太一致。
  1. addEvent(document, 'click', function () { 
  2. var xhr = new createXHR(); 
  3. xhr.open('get', 'demo.php?rand=' + Math.random(), false); //设置了同步 
  4. xhr.send(null); 
  5. if (xhr.status == 200) { //如果返回成功了 
  6. alert(xhr.responseText); //调出服务器返回的数据 
  7. } else { 
  8. alert('数据返回失败!状态代码:' + xhr.status + '状态信息:' + xhr.statusText); 
  9. }); 
 
//PS:如果没有向服务器端发送,firebug无发送提示,如果有send()方法,则firebug会提示已发送 //PS:通过点击事件,不断的向服务器发送请求,然后服务器会时时的返回最新的数据,就是Ajax功能 //PS:IE浏览器第一次会向服务器端请求,获取最新数据,而第二次它就默认获取的缓存数据,导致数据不是最新的 //PS:怎么处理缓存?可以使用JS随机字符串
以上的代码每次点击页面的时候,返回的时间都是时时的,不同的,说明都是通过服务器及时加载回的数据。那么我们也可以测试一下在非Ajax情况下的情况,创建一个demo2.php文件,使用非Ajax。

  1. <script type="text/javascript" src="base.js"></script> 
  2. <script type="text/javascript"> 
  3.     addEvent(document, 'click', function () { 
  4.         alert("<?php echo Date('Y-m-d H:i:s')?>"); 
  5.     }); 
  6. </script> 
 

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索ajax , 服务器 , 对象 , xmlhttprequest , xmlhttp , MSXML , ajax原生编写 , Msxml2.XMLHTTP ajax同步 javascript ajax 同步、javascript ajax、javascript ajax post、javascript ajax请求、javascript ajax json,以便于您获取更多的相关知识。

javascript-$.ajax 没加 async :false 却执行同步

问题描述 $.ajax 没加 async :false 却执行同步 目前 php 项目中,在chrome插件中 $.ajax全是 没设置 同步,但是却执行同步动作。。 回到家 中笔记本上,没设置 async:false 执行的是异步请求。。...

如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙_jquery

1. 引言 在上一篇文章《如何确保JavaScript的执行顺序 - 之jQuery.html深度分析》中,我们揭示了jQuery.html函数之所以能在各种浏览器下保持动态JS顺序执行,其秘密在于 – 同步AJAX获取外部JavaScript。 我们先来简单回顾下HTML源代码(t...

ajax跨域处理----PHP跨域多域名同步登录技术前段篇

首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表: URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http:/...

ajax应用2

...ncode()/urldecode()对特殊符号进行编码、反编码处理 ②.在javascript里边可以通过encodeURIComponent ()对特殊符号等信息进行编码。 (以上红色函数可以把”特殊符号、中文”转变为浏览器可以识别不会混淆的信息。 编码后的信息为%...

jquery ajax函数执行顺序问题之如何设置同步

   JavaScript code   代码如下:   function existProduct(obj){   var productname = escape(obj.val());   $.getJSON("../product/searchProductByName.action",datat,function(data){   var falg;   falg = data[0]['existproduct'];   //falg返回为no 或yes,   return ...

前三篇
后三篇