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 ...