简单介绍不用库(框架)自己写ajax

平常会使用ajax来请求数据,加载一个库(框架),或许仅仅maybe就使用了它的ajax部分。

  写个ajax,一来可以经历一下处理问题的过程,提升技术能力,二来工作中有时真的用不着这么大的一个库(框架),用自己写的,何乐不为呢。

  先来看看流行的jQuery是怎样调用ajax的

$.ajax({
  url:    'test.php',   //发送请求的URL字符串
  type:    'GET',     //发送方式
  dataType:  'json',     //预期服务器返回的数据类型 xml, html, text, json, jsonp, script
  data:    'k=v&k=v',   //发送的数据
  async:   true,      //异步请求
  cache:   false,     //缓存
  timeout:  5000,      //超时时间 毫秒
  beforeSend: function(){},  //请求之前
  error:   function(){},  //请求出错时
  success:  function(){},  //请求成功时
  complete:  function(){}  //请求完成之后(不论成功或失败)
});

  这样的调用是不是很舒适、方便,如果感觉舒适那自己动手写也参照这种设计方式,不用太复杂,满足所需就好。

  先了解ajax的基础知识

  XMLHttpRequest 对象

  XMLHttpRequest对象是ajax的核心,通过XMLHttpRequest对象来向服务器发异步请求,从服务器获得数据,所有现代浏览器(IE7+、Firefox、Chrome、Safari、Opera)均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。  

  创建一个兼容的XMLHttpRequest对象

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

  向服务器发送请求

xhr.open(method,url,async);
    //method:请求的类型;GET 或 POST
    //url:请求的URL
    //async:true(异步)或 false(同步)
xhr.send(string);
    //将请求发送到服务器
    //string:仅用于 POST 请求
//GET 比 POST 请求方式更简单也更快,并且在大部分情况下都能用
//在以下情况中,请使用 POST 请求:
    //无法使用缓存文件(更新服务器上的文件或数据库)
    //向服务器发送大量数据(POST 没有数据量限制)
    //发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

  服务器响应

  使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性获得来自服务器的响应。

    如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性。

    如果来自服务器的响应并非 XML,请使用 responseText 属性,responseText 属性返回字符串形式的响应。

  onreadystatechange 事件

  当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

   XMLHttpRequest 对象的三个重要的属性:

    onreadystatechange  //存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数

    readyState  //存有 XMLHttpRequest 的状态, 从 0 到 4 发生变化     

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪

    status  //200: "OK", 404: 未找到页面

  在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务, 当 readyState等于4 且 status为200 时,表示响应已就绪。

xhr.onreadystatechange = function(){
  if( xhr.readyState == 4 && xhr.status == 200 ){
    //准备就绪 可以处理返回的 xhr.responseText 或者 xhr.responseXML
  }
};

  一个简单的ajax请求如下:

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.onreadystatechange = function(){
  if( xhr.readyState == 4 && xhr.status == 200 ){
    //准备就绪 可以处理返回的 xhr.responseText 或者 xhr.responseXML
  }
};
xhr.open(method,url,async);
xhr.send(string);

  补充:1. 发送GET请求时可能得到的是缓存的结果,为了避免这种情况,可以向URL 添加一个唯一的 ID,时间戳。2. 如果需要像HTML表单那样 POST 数据,使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中发送数据。

url += (url.indexOf('?') < 0 ? '?' : '&') + '_='+ (+new Date());
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

  开始写自己的ajax

  先写一个基本的,定义好各种参数选项,供参考

var $ = (function(){
  //辅助函数 序列化参数
  function param(data){
    //..
  }

  function ajax(opts){
    var _opts = {
      url    : '/',       //发送请求URL地址
      type    : 'GET',      //发送请求的方式 GET(默认), POST
      dataType  : '',        //预期服务器返回的数据类型 xml, html, text, json, jsonp, script
      data    : null,       //发送的数据 'key=value&key=value', {key:value,key:value}
      async   : true,       //异步请求 ture(默认异步), false
      cache   : true,       //缓存 ture(默认缓存), false
      timeout  : 5,        //超时时间 默认5秒
      load    : function(){},   //请求加载中
      error   : function(){},   //请求出错时
      success  : function(){},   //请求成功时
      complete  : function(){}   //请求完成之后(不论成功或失败)
    }, aborted = false, key,
    xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    for(key in opts) _opts[key] = opts[key];        

    /*
    if(_opts.dataType.toLowerCase() === 'script'){
      //..
    }
    if(_opts.dataType.toLowerCase() === 'jsonp'){
      //..
    }
    */
    if(_opts.type.toUpperCase() === 'GET'){
      if(param(_opts.data) !== ''){
        _opts.url += (_opts.url.indexOf('?') < 0 ? '?' : '&') + param(_opts.data);
      }
      !_opts.cache && ( _opts.url += (_opts.url.indexOf('?') < 0 ? '?' : '&') + '_='+(+new Date()) );
    }

    function checkTimeout(){
      if(xhr.readyState !== 4){
        aborted = true;
        xhr.abort();
      }
    }
    setTimeout(checkTimeout, _opts.timeout*1000);

    xhr.onreadystatechange = function(){
      if( xhr.readyState !== 4 ) _opts.load && _opts.load(xhr);
      if( xhr.readyState === 4 ){
        var s = xhr.status, xhrdata;
        if( !aborted && ((s >= 200 && s < 300) || s === 304) ){
          switch(_opts.dataType.toLowerCase()){
            case 'xml':
              xhrdata = xhr.responseXML;
            break;
            case 'json':
              xhrdata = window.JSON && window.JSON.parse ? JSON.parse(xhr.responseText) : eval('(' + xhr.responseText + ')');
            break;
            default:
              xhrdata = xhr.responseText;
          }
          _opts.success && _opts.success(xhrdata,xhr);
        }else{
          _opts.error && _opts.error(xhr);
        }
        _opts.complete && _opts.complete(xhr);
      }
    };
    xhr.open(_opts.type,_opts.url,_opts.async);
    if(_opts.type.toUpperCase() === 'POST'){
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    }
    xhr.send(_opts.type.toUpperCase() === 'GET' ? null : param(_opts.data));
  }
  return {
    ajax: ajax
  }
})();

  定义好了参数选项,来分析一下。其中 dataType 是整个ajax的重点,代码的简单或者复杂都在它了。

  在这里dataType为预期服务器返回的数据类型:xml, html, text, json, jsonp, script

  1. 为xml时,来自服务器的响应是XML,使用 responseXML 属性获取返回的数据

  2. 为html、text、json时,使用 responseText 属性获取返回的数据

      a. 为html时,返回纯文本HTML信息,其中包含的script标签是否要在插入dom时执行 ( 代码复杂度+3 )

      b. 为json时,  返回JSON数据,要安全、要便捷、要兼容  ( 代码复杂度+2 )

  3. 为jsonp时,一般跨域才用它,不用原来的ajax请求了,用创建script法( 代码复杂度+2 )

  4. 为script时:  要跨域时,不用原来的ajax请求了,用创建script法( 代码复杂度+1 ); 不跨域,返回纯文本JavaScript代码, 使用 responseText 属性获取返回的数据 ( 代码复杂度+1 )

  其中,在html片段中的script标签、jsonp、script,都要用到创建script标签的方式。

  处理dataType为json

xhrdata = window.JSON && window.JSON.parse ? JSON.parse(xhr.responseText) : eval('(' + xhr.responseText + ')');

  这是最简单的处理方式了,要JSON兼容,可以用json2.js。

  处理dataType为jsonp

  jsonp是要通过script标签来请求跨域的,先了解下流程:

  这上图中 a.html中请求了 http://www.b.com/b.php?callback=add  (在ajax程序中请求url就是这个链接),在b.php中读取了传过来的参数 callback=add  根据获取到的参数值(值为add),以JS语法生成了函数名,并把json数据作为参数传入了这个函数,返回以JS语法生成的文档给a.html,a.html解析并执行返回的JS文档,调用了定义好的add函数。

  在程序中一般采用更通用的方式去调用,比如下面这个广泛使用的loadJS函数:

function loadJS(url, callback) {
  var doc = document, script = doc.createElement('script'), body = doc.getElementsByTagName('body')[0];
  script.type = 'text/javascript';
  if (script.readyState) {
    script.onreadystatechange = function() {
      if (script.readyState == 'loaded' || script.readyState == 'complete') {
        script.onreadystatechange = null;
        callback && callback();
      }
    };
  } else {
    script.onload = function() {
      callback && callback();
    };
  }
  script.src = url;
  body.appendChild(script);
}

  这样把请求的url,传入loadJS函数,得到一样的结果。

代码如下:

loadJS('http://www.b.com/b.php?callback=add');

  因为是动态创建script,请求成功返回,JS代码就立即执行,如果请求失败是没有任何提示的。因此自定义的参数选项: _opts.success 能调用,_opts.error不能调用。

  ajax处理jsonp也有两种情况:

  1. 设置了请求URL后的参数 callback=add 特别是定义了函数名add,请求成功返回,JS代码就立即执行(这里就是调用 add({"a":8,"b":2})  )

  2. 在_opts.success中处理JSON数据,就是请求成功返回,JS代码不执行,并把函数中的参数挪出来,作为_opts.success的参数返回( 这里相当于处理字符串 'add({"a":8,"b":2})' ,去掉 'add(' 和 ‘)',得到 {"a":8,"b":2} )

  处理dataType为html

  如果不处理HTML片段中script标签,直接把responseText返回值插入DOM树就可以了。如果要处理script,就要把HTML片段中的script标签找出来,对买个script单独处理,并注意是script标签中包含的JS代码还是通过src请求的。

  处理dataType为script

  如果要跨域时,用创建script的方式,和处理jsonp类似; 不跨域,使用 responseText 属性获取返回的数据,可以用 eval 来让代码执行,也可以创建script来执行。

function addJS(text) {
  var doc = document, script = doc.createElement('script'), head = doc.getElementsByTagName('body')[0];
  script.type = 'text/javascript';
  script.text = text;
  body.appendChild(script);
}

  到此ajax差不多分析完了,根据实际需要,添加各种功能,去思考每种功能是怎样实现的,并能找到解决方法。

以上内容就是小编跟大家分享的不用库(框架)自己写ajax,希望大家喜欢。

(0)

相关推荐

  • Ajax 框架学习笔记

    一.XMLHttpRequest 对象的三个重要的属性. onreadystatechange 属性 onreadystatechange 属性存有处理服务器响应的函数.下面的代码定义一个空的函数,可同时对 onreadystatechange 属性进行设置: xmlHttp.onreadystatechange=function() { // 我们需要在这里写一些代码 } readyState 属性 readyState 属性存有服务器响应的状态信息.每当 readyState 改变时,onr

  • Jquery AJAX 框架的使用方法

    刚开始学了 JQuqery, 众多的 $get(),...等等符号早已把我搞晕了.暂时就放弃了.后来学习 ASP.NET AJAX ,在微软的领导下,逐渐由服务器端转向客户端编程. 激起我客户端编程的兴趣,才想起学习一下了 Jquery.随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写

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

    今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的增删改查,也许写的并不是那么完善,但最重要的是一个入门,也希望js达人给些建议,好让我更上一个台阶. HOHO~~~开始咯: Js: 复制代码 代码如下: //为了省事,就没写自己的js ajax了 用了jquery的,当然你也可以添加到jquery的扩展方法内,哈哈,我太懒了,所以就写这里了. var _$ = { AJAX: function (urlparm, d, beforecall, successc

  • javascript之AJAX框架使用说明

    ajax编码落地算是团队框架建设的一个里程碑,使得框架拥有了一个可应用调试的版本.在ajax框架编码中主要想到了这么几点: 框架兼容性 方法全面而要简单快捷 可扩展性好 框架兼容性:ajax框架的兼容性主要表现在XMLHttpRquest对象生成上.根据不同类型浏览器或者不同库一般有三种方式 new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP"): new ActiveXObject("Msxml2.XMLHT

  • PHP 开源AJAX框架14种

    jQPie 这是一个扩展自jQuery,结合PHP的一个Ajax框架.支持XML,HTML和JSON handler.jQPie提供的功能包括: 利用$.getJSON方法简化来自PHP的请求和处理数据. 利用$.(element).load方法注入PHP生成的html到某一页面元素中. 利用$.jqpie方法直接从web页面调用PHP函数.在响应$.jqpie调用时从PHP函数反过来调用jQuery. phpmsajax 一组PHP文件用来支持在PHP Web应用程序中使用Microsoft

  • 基于JQuery框架的AJAX实例代码

    index.html 复制代码 代码如下: <html> <head> <title>jQuery Ajax 实例演示</title> </head> <script src="./js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(docum

  • AJAX 图片展示框架56个 提升开发效率第1/2页

    动态图片展示一方面能使用AJAX或Flash实现图片数据的异步获取,减少浏览的等待时间:一方面使用JavaScript+CSS定制友好的用户体验模式,是图片展览web应用程序开发的一大利器.这里收集的框架都是经过测试可用的,描述大多是各框架主页上的介绍,来不及翻译(有些是西班牙语的 @_@),主要收集来源为欧美和台湾的一些社区和博客,希望大家也能将自己收集的好框架拿出来一起分享! Ajax Image Galleries & Lightboxes MinishowcaseMinishowcase

  • AJAX 验证框架13个

    一 ASP.NET AJAX Framework 1.ValidatorCallout 是ASP.NET AJAX Control Toolkit中的一员,老瓶装新酒,通过扩展的方式为ASP.NET的验证控件提供漂亮的弹出提示效果.缺点是:目前的版本还不能提供服务端Custom Validator的扩展. 同时,ValidatorCallout还支持自定义CSS样式,具体可参考官方页面上的"ValidatorCallout Theming" 一节,和这篇文章:http://www.im

  • asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例

    本文主要列举了省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例.前段时间需要作一个的Web前端应用,需要用多个框架,一个典型的应用场景是省市三级联动,基于此应用,特将三种主要的ajax框架略作整理,方便有需要的朋友查阅. 在示例之前,我们先设置一个演示数据源,新建一个项目,项目结构如图: 主要文件如下:AreaModel.cs: 复制代码 代码如下: using System; using System.Collections.Generi

  • jquery 框架使用教程 AJAX篇

    小试了下AJAX,感觉比prototype简洁多了,在JQuery中,AJAX有三种实现方式:$.ajax(),$.post,$.get(). XHTML(主要): <div id="result" style="background:orange;border:1px solid red;width:300px;height:400px;"></div> <form id="formtest" action=&qu

  • 无框架 Ajax分页(原创)第1/2页

    使用如上方法确实可以实现Ajax分页效果,但我总觉得不够简洁,研究了一下午,终于捣鼓出了点东西O_o首先创建前台页面MyAjaxPager.aspx 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyAjaxPager.aspx.cs" Inherits="AjaxDemo.AjaxPager.MyAjaxPager.MyAjaxPager

随机推荐