1. 优点：使用ajax读取数据文件，不需要刷新页面就能取出文件数据

目  录

1.0 基于ajax请求的理论支持

1.1 js 实现jquray中 ajax请求功能

基于ajax请求的理论支持

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.  
  5.     <title></title>
  6.  
  7. <script type="text/javascript">
  8.     function ajax(url, fnSucc, fnFaild) {
  9.         //1.创建Ajax对象
  10.         if (window.XMLHttpRequest) {
  11.             var oAjax = new XMLHttpRequest();
  12.         }
  13.         else {
  14.             var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
  15.         }
  16.  
  17.         //2.连接服务器
  18.         //open(方法, 文件名, 异步传输)
  19.         oAjax.open('GET', url, true);
  20.  
  21.         //3.发送请求
  22.         oAjax.send();
  23.  
  24.         //4.接收返回
  25.         oAjax.onreadystatechange = function () {
  26.             //oAjax.readyState    //浏览器和服务器，进行到哪一步了
  27.             if (oAjax.readyState == 4)    //读取完成
  28.             {
  29.                 if (oAjax.status == 200)    //成功
  30.                 {
  31.                     fnSucc(oAjax.responseText);
  32.                 }
  33.                 else {
  34.                     if (fnFaild) {
  35.                         fnFaild(oAjax.status);
  36.                     }
  37.                     //alert('失败:'+oAjax.status);
  38.                 }
  39.             }
  40.         };
  41.     }
  42.     window.onload = function () {
  43.         var oBtn = document.getElementById('myDiv');
  44.             oBtn.onclick = function () {
  45.                              ajax('test1.txt?t='+new Date().getTime(),
  46.                                  function (str) {
  47.                             //?t='+new Date().getTime()  可以控制缓存，即每次改变 test1.txt文件不需要刷新页面既可读取文件改变后的值
  48.                           var oTxt = document.getElementById('txt');
  49.                             oTxt.value = str;
  50.                                                      }
  51.                                        );
  52.                                  };
  53.                          };
  54. </script>
  55. </head>
  56. <body>
  57.                  <input type="button" id="myDiv" value="读取"/><br />
  58.           用户名: <input type="text" id="txt" />
  59.                  <input type="text" id="Text1" />
  60. </body>
  61.  </html>

　　

　

js 实现jquray中 ajax请求功能

下面是根据W3C上的解析，自己写的一个小小的ajax请求   框架是 ASP.NET  MVC

  1. <input type="button" id="btn_nowTime1" onclick="Myajax()" value="请求" />
  1. var createAjax = function () {
  2.         var xhr = null;
  3.         try {
  4.             //IE系列浏览器
  5.             xhr = new ActiveXObject("microsoft.xmlhttp");
  6.         } catch (e1) {
  7.             try {
  8.                 //非IE浏览器
  9.                 xhr = new XMLHttpRequest();
  10.             } catch (e2) {
  11.                 window.alert("您的浏览器不支持ajax，请更换！");
  12.             }
  13.         }
  14.         return xhr;
  15.     };
  16.  
  17.     var ajax = function (conf) {
  18.         // 初始化
  19.         //type参数,可选
  20.         var type = conf.type;
  21.         //url参数，必填
  22.         var url = conf.url;
  23.         //data参数可选，只有在post请求时需要
  24.         var data = conf.data;
  25.         //datatype参数可选
  26.         var dataType = conf.dataType;
  27.         //回调函数可选
  28.         var success = conf.success;
  29.  
  30.         if (type == null) {
  31.             //type参数可选，默认为get
  32.             type = "get";
  33.         }
  34.         if (dataType == null) {
  35.             //dataType参数可选，默认为text
  36.             dataType = "text";
  37.         }
  38.         // 创建ajax引擎对象
  39.         var xhr = createAjax();
  40.         // 打开
  41.         xhr.open(type, url, true);
  42.         // 发送
  43.         if (type == "GET" || type == "get") {
  44.             xhr.send(null);
  45.         } else if (type == "POST" || type == "post") {
  46.             xhr.setRequestHeader("content-type",
  47.                     "application/x-www-form-urlencoded");
  48.             xhr.send(data);
  49.         }
  50.         xhr.onreadystatechange = function () {
  51.             if (xhr.readyState == 4 && xhr.status == 200) {
  52.                 if (dataType == "text" || dataType == "TEXT") {
  53.                     if (success != null) {
  54.                         //普通文本
  55.                         success(xhr.responseText);
  56.                     }
  57.                 } else if (dataType == "xml" || dataType == "XML") {
  58.                     if (success != null) {
  59.                         //接收xml文档
  60.                         success(xhr.responseXML);
  61.                     }
  62.                 } else if (dataType == "json" || dataType == "JSON") {
  63.                     if (success != null) {
  64.                         //将json字符串转换为js对象
  65.                         success(eval("(" + xhr.responseText + ")"));
  66.                     }
  67.                 }
  68.             }
  69.         };
  70.     };

　　

调用：

  1. function Myajax() {
  2.         ajax({
  3.             url: '/home/index',
  4.             success: function (data) {
  5.                 alert(data);
  6.             }
  7.         })
  8.      }

　　

开始对XMLHttpRequest 这个对象很模糊，最详解的也摸过于W3C 上的解析，现在想来这也许就是开发中该用的API 是行业标准了吧！

发现几篇好的文章，就把链接给拿来了

滴答的雨

dipoo

ajax 基础实例的更多相关文章

  1. Ajax基础实例

    前端代码 <script type="text/javascript"> var xmlhttp; function go(url) { xmlhttp=null; i ...

  2. 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】

    一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...

  3. Ajax基础--JavaScript实现

    ajax原理 1.ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. 通俗地讲就是:AJAX 通过在后台与 ...

  4. Ajax基础知识（二）

    接上一篇  Ajax基础知识(一) 在上一篇博客里,抛弃了VS中新建aspx页面,拖个button写上C#代码的方式.使用ajax的方式,异步向服务器请求数据.我们让服务器只简单的返回一个" ...

  5. AJAX基础_AJAX获取PHP数据

    前言 本篇AJAX基础教程,只讲干货,拒绝废话. 全文通过两个实例来讲解AJAX的基本用法,第1个实例是使用AJAX技术从服务器获取纯文本(HTML)数据, 第2个实例是获取从服务器PHP文件的数据. ...

  6. Web前端-Ajax基础技术(上)

    Web前端-Ajax基础技术(上) ajax是浏览器提供一套的api,用于向服务器发出请求,接受服务端返回的响应,通过javascript调用,实现通过代码控制请求与响应,实现网络编程. ajax发送 ...

  7. Python自动化运维 - Django（二）Ajax基础 - 自定义分页

    Ajax基础 AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 什么是Ajax AJAX = 异步 Java ...

  8. APP接口自动化测试JAVA+TestNG(二)之TestNG简介与基础实例

    前言 继上篇环境篇后,本篇主要对TestNG进行介绍,给出最最基础的两个实例,通过本文后,学会并掌握TestNG测试用例的编写与运行,以及生成美化后的报告.下一篇为HTTP接口实战(国家气象局接口自动 ...

  9. 史上最全的Ajax基础详解

    同步请求和异步请求 先解释一下同步和异步的概念: 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯 ...

随机推荐

  1. 第一个VC++ win32程序 绘制简单图形

    创建一个VC++ win32 打开VS 新工程类型中选择Win32----Win32 Project  自己取个名字(假如叫做My1stWin) 一路next 系统会自动生成好最基本的代码  然后我们 ...

  2. 帝国cms语句调用

    帝国cms系统,灵动标签,有着非常强大的数据调用功能.这里为广大菜鸟站长普及一下. 我们来看这段代码. [e:loop={,,}] <li>·<a target="_bla ...

  3. Eclipse运行慢

    http://blog.csdn.net/chrissata/article/details/7759836 http://blog.csdn.net/heyutao007/article/detai ...

  4. QT小技巧—更好管理项目（增加预编译头文件，并且指定moc文件的生成位置）good

    预编译加速编译 QT也可以像VS那样使用预编译头文件来加速编译器的编译速度.首先在.pro文件中加入: CONFIG += precompiled_header 然后定义需要预编译的头文件: PREC ...

  5. 利用bind搭建dns

    下载bind,我下载的是bind-9.3.1rc1.tar.gz 我下载的文件放在/root目录下 进入目录解压缩 [root@linux root]#tar xfz bind-9.3.1rc1.ta ...

  6. mfc删除标题和边框

    //删除标题和边框WS_CAPTION和WS_BORDER风格 ModifyStyle(WS_CAPTION, 0);ModifyStyle(WS_BORDER, 0);

  7. Node.mongoose

    简介 mongodb是一款面向文档的数据库,不是关系型数据库,新手熟悉mysql.sqlserver等数据库的人可能入手稍微困难些,需要转换一下思想,可以不需要有固定的存储模式,以文档模型为存储内容相 ...

  8. UIControl IOS控件编程 及UITextField的讲解

    第一部分 UIKit提供了一组控件:UISwitch开关.UIButton按钮.UISegmentedControl分段控件.UISlider滑块.UITextField文本字段控件.UIPageCo ...

  9. Matlab pivotgolf

    function scoreout = pivotgolf(course,pivotstrat) % PIVOTGOLF Pivot Pickin' Golf. % Your goal is to u ...

  10. hdu2964-Prime Bases

    http://acm.hdu.edu.cn/showproblem.php?pid=2964 题意,给你一个整数n,现在要你分解成 n = k1 * ( 2 * 3 * ....*x1 ) + k2 ...