简单介绍不用库（框架）自己写ajax_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，希望大家喜欢。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索ajax框架
前端ajax框架
ajax 框架、ajax框架有哪些、tp框架ajax无刷新分页、dwz框架ajax表单提交、ssm框架ajax请求写法，以便于您获取更多的相关知识。

时间： 2024-08-30 20:38:25

简单介绍不用库（框架）自己写ajax_AJAX相关的相关文章

简单介绍不用库（框架）自己写ajax

平常会使用ajax来请求数据,加载一个库(框架),或许仅仅maybe就使用了它的ajax部分. 写个ajax,一来可以经历一下处理问题的过程,提升技术能力,二来工作中有时真的用不着这么大的一个库(框架),用自己写的,何乐不为呢. 先来看看流行的jQuery是怎样调用ajax的 $.ajax({ url: 'test.php', //发送请求的URL字符串 type: 'GET', //发送方式 dataType: 'json', //预期服务器返回的数据类型 xml, html, text, j

javascript中的location用法简单介绍_基础知识

先前写了一片用window.location.href实现刷新另个框架页面 ,特此我看了一下locaiton的详细用法,对此有点改进,现在我将他整理成js,方便查阅,也贴上和朋友们分享一下,具体如下: 第一.简单介绍一下location属性.用法以及相关示例: Location 包含了关于当前 URL 的信息. 描述 location 对象描述了与一个给定的 Window 对象关联的完整 URL.location 对象的每个属性都描述了 URL 的不同特性. 通常情况下,一个 URL 会有下面的

Android中dumpsys命令用法简单介绍

在Android手机上, 通过使用adb shell命令可以进入android系统的shell, 该shell除支持一些常用的标准命令之外,还支持一些和android系统相关的其他命令, 这些命令可以打印出系统当前的状态信息. dumpsys就是这样一个命令. 使用 adb shell 进入命令行, 敲入dumpsys, 打印出的信息超级多, 在我的nexus 5机器上,输出多达67000行. 首先从打印信息的开始部分看起: Currently running services: Surface

《写给PHP开发者的Node.js学习指南》一第 2 章　简单的Node.js框架2.1　HTTP服务器

第 2 章 简单的Node.js框架 写给PHP开发者的Node.js学习指南 在之前的章节,我介绍了一个用于PHP到Node.js转换的开发环境,以及如何使用它进行转换.在本章,我们将开始使用这个开发环境并进行实际的转换. 2.1 HTTP服务器 写给PHP开发者的Node.js学习指南 在PHP中,一个PHP文件代表一个HTML页面.一个Web服务器,比如Apache,当请求一个PHP页面时,Web服务器会运行PHP.但是在Node.js里,Node.js的main文件代表了整个服务器.No

介绍一个简单的JavaScript类框架

  这篇文章主要介绍了一个简单的JavaScript类框架,有助于初学者理解JS类的创建与继承,需要的朋友可以参考下 在写work-in-progress JavaScript book一书时,对于javascript继承体系,我花费了相当的时间,并在该过程中研究了各种不同的模拟经典类继承的方案.这些技术方案中,我最为推崇的是base2与Prototype的实现. 从这些方案中,应该能提炼出一个具有其思想内涵的框架,该框架须具有简单.可重用.易于理解并无依赖等特点,其中简单性与可用性是重点.以下

[python知识] 爬虫知识之BeautifulSoup库安装及简单介绍

一. 前言         在前面的几篇文章中我介绍了如何通过Python分析源代码来爬取博客.维基百科InfoBox和图片,其文章链接如下:        [python学习] 简单爬取维基百科程序语言消息盒         [Python学习] 简单网络爬虫抓取博客文章及思想介绍         [python学习] 简单爬取图片网站图库中图片        其中核心代码如下: # coding=utf-8 import urllib import re #下载静态HTML网页 url='h

简单介绍Python的Tornado框架中的协程异步实现原理_python

Tornado 4.0 已经发布了很长一段时间了, 新版本广泛的应用了协程(Future)特性. 我们目前已经将 Tornado 升级到最新版本, 而且也大量的使用协程特性. 很长时间没有更新博客, 今天就简单介绍下 Tornado 协程实现原理, Tornado 的协程是基于 Python 的生成器实现的, 所以首先来回顾下生成器.生成器 Python 的生成器可以保存执行状态 并在下次调用的时候恢复, 通过在函数体内使用 yield 关键字 来创建一个生成器, 通过内置函数 next 或生成

简单介绍Python的Django框架的dj-scaffold项目

  这篇文章主要介绍了简单介绍Python的Django框架的dj-scaffold项目,用于辅助Django框架的目录设置,需要的朋友可以参考下 由于Django没有象rails一样指定项目的目录结构规范,很多人都对django项目的目录结构要如何组织而感到困惑.为此我又新创建了一个开源项目dj-scaffold(django的脚手架).这个项目用于自动生成一个标注化的django项目和app. 项目地址:https://github.com/vicalloy/dj-scaffold 安装 已

FreeSWITCH第三方库（其他）的简单介绍（三）

FreeSWITCH使用了大量的第三方库,本文档主要介绍关联相关库的信息: 音频相关库的信息介绍参考:http://www.cnblogs.com/yoyotl/p/5486753.html 视频相关库的信息介绍参考:http://www.cnblogs.com/yoyotl/p/5488890.html   ① ldns dns相关的库.   ② libre libre 是一个利用异步 I/O 实现的实时通讯库.采用可移植的 POSIX 源码编写,符合 ANSI C89 和 ISO C99 标