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. js表格排序 & 去除字符串空格

    // a:列数 bool:排序升序判断参数 true false Str:支持多列 function newUnitSort(a, bool, str) { var oTable = document ...

  2. 梳理下phpmyadmin改root密码后登录不上的问题。

    一, 登陆phpmyadmin,然后点击左侧进入mysql数据库,在顶部点击“mysql”进入sql输入界面.输入以下命令: update user set password=password('12 ...

  3. bzoj 1042: [HAOI2008]硬币购物 dp+容斥原理

    题目链接 1042: [HAOI2008]硬币购物 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1706  Solved: 985[Submit][ ...

  4. codeforces 609F. Frogs and mosquitoes 二分+线段树

    题目链接 F. Frogs and mosquitoes time limit per test 2 seconds memory limit per test 512 megabytes input ...

  5. bzoj 2763: [JLOI2011]飞行路线 分层图

    题目链接 n个点m条路, 每条路有权值,  给出起点和终点, 求一条路使得权值最小.可以使路过的路中, k条路的权值忽略. 其实就是多一维, 具体看代码 #include<bits/stdc++ ...

  6. 如何禁止scrollView 的子控件自动滑到 底部或者中间部分

    现象:当一个scrollView 里面包含很多childView,并且整个界面超出屏幕的范围,而且每个childView都获取焦点,scrollView就会自动滑到底部或者中间部分. 可以使用以下几种 ...

  7. hdu 4119 Isabella's Message

    Isabella's Message Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...

  8. ThinkPHP 3.1.2 视图-2

    一.模板的使用 (重点) a.规则 模板文件夹下[TPL]/[分组文件夹/][模板主题文件夹/]和模块名同名的文件夹[Index]/和方法名同名的文件[index].html(.tpl) 更换模板文件 ...

  9. Windows Azure 存储的冗余存储选项和只读访问跨地域冗余存储

    我们很高兴地宣布,现在我们使客户可以获得对数据更高的读取可用性.该预览功能称为"只读访问- 跨地域冗余存储(RA-GRS)",使客户可以在存储帐户主要区域无法读取数据时,通过跨 ...

  10. xpage 获取 附件

    var db:NotesDatabase=session.getCurrentDatabase(); var doc:NotesDocument=db.getDocumentByUNID('80E21 ...