javascript代码实例教程-js框架开发剖析--AJAX

发布时间:2019-02-20 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-js框架开发剖析--AJAX脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 XMLHttPRequest

XMLHttpRequest的功能是在后台跟服务器实现交互,结合DOM的操作,可以实现页面的局部刷新。

 

通体XMLHttpRequest的请求要求都是同的,对于跨域的操作可以使用动态插入script标签等形式来实现。

 

 

 

历史

XMLHttpRequest也是浏览器技战争的产物。最早提出这个概念的是微软,他在1999年发布的IE5中,使用了ActiveX实现了这一功能。直到2006年XMLHttpRequest才进入了W3C的工作草案。

 

 

 

请求对象

jQuery这样的框架让Ajax看上去如此的简单,但是幕后却有非常复杂的工作:

1.处理微软和W3C实现上的差异

2.为不同的请求数据和方法设置不同的头部信息

3.通过回调函数处理请求状态的变化

4.处理不同浏览器之间的差异

创建一个请求对象如下:

[javascript] 

// W3C compliant  

new XMLHttpRequest();  

// Microsoft  

new ActiveXObject(";msxml2.XMLHTTP.6.0");  

new ActiveXObject("Msxml2.XMLHTTP.3.0");  

new ActiveXObject('Msxml2.XMLHTTP');  

IE浏览器有不同的MSXML版本,关于版本的不同和选择参考文章Using the right version of MSXML in internet Explorer

jquery的实现方法如下:

[javascript]  

xhr: window.XMLHttpRequest && (window.location.protocol !== "file:" || !window.ActiveXObject) ?  

  function() {  

    return new window.XMLHttpRequest();  

  } :  

  function() {  

    try {  

      return new window.ActiveXObject("Microsoft.XMLHTTP");  

    } catch(e) {}  

  },  

其中也阻止了IE7使用XMLHttpRequest,因为它不能加载本地文件。

 

 

 

发送请求

发送一个请求主要有下面几个部分

1.给onreadystatechange设置回调函数

2.调用请求对象的oPEn方法

3.设置请求头信息

4.调用请求对象的send方法

onreadystatechange可以监听请求状态的变化,主要有一下状态:

 

0: UninITialized: 没有调用Open方法前

1: Loading: 没有调用send方法前

2: Loaded: 调用了send方法,获取了响应的头信息

3: Interactive: 下载responseText数据

4: Completed: 请求结束

open方法用来初始化HTTP方法,设置URL,确定是否使用异步请求。使用request.setRequestHeader(header, value)方法可以设置请求的头。使用send(postBody)方法可以发送post的数据内容。

下面的代码是基于之前定义的xhr对Ajax的简单实现:

[javascript]  

function ajax(url, options) {  

  function successfulRequest(request) {  

    return (request.status >= 200 &amp;& request.status < 300) ||  

        request.status == 304 ||  

                (request.status == 0 && request.responseText);  

  }  

  

  function respondToReadyState(readyState) {  

    if (request.readyState == 4 ) {  

      if (successfulRequest(request)) {  

        if (options.success) {  

          options.success(request);  

        }  

      } else {  

        if (options.failure) {  

          options.failure();  

        }  

      }  

    }  

  }  

  

  function setHeaders() {  

    VAR headers = {  

      'Accept': 'text/javascript, text/html, application/xml, text/xml, */*'  

    };  

  

    for (var name in headers) {  

      request.setRequestHeader(name, headers[name]);  

    }  

  }  

  

  var request = xhr();  

  if (typeof options === 'undefined') {  

    options = {};  

  }  

  

  options.method = options.method ? options.method.toLowerCase() : 'get';  

  options.asynchronous = options.asynchronous || true;  

  options.postBody = options.postBody || '';  

  

  request.onreadystatechange = respondToReadyState;  

  request.open(options.method, url, options.asynchronous);  

  setHeaders();  

  request.send(options.postBody);  

}  

 

 

接口

我们将要设计的接口提供了get,post和ajax方法,如下:

[javascript]  

turing.net.get('/example', { success: function(r) { alert(r.responseText); } });  

查看代码的详情请点击turing.net.js

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-js框架开发剖析--AJAX全部内容,希望文章能够帮你解决javascript代码实例教程-js框架开发剖析--AJAX所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。