简要讲Ajax 的内容归纳为博客。

AJAX能且仅能从服务器上读取文件，我们使用ajax的时候分为以下几个步骤：

1、  创建ajax对象

2、  链接服务器

3、  发送请求

4、  接收返回值

下面是详细实现过程

 <!DOCTYPE>

 <html>

     <head>

         <meta charset = "utf-8" />

         <title>ajax</title>

         <script type="text/javascript">

         window.onload = function(){

             var obtn1 = document.getElementById('btn1');

             obtn1.onclick = function(){

                 //1、创建ajax对象

                 //var oAjax = new XMLHttpRequest();//非IE6

                 //var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6

                 //兼容写法

                 var oAjax = null;

                 if(window.XMLHttpRequest){

                     oAjax = new XMLHttpRequest();

                 }

                 else{

                     oAjax = new ActiveXObject("Microsoft.XMLHTTP");

                 }

                 //2、链接服务器

                 //open（方法，url，是否异步）

                 //同步：一件件事情做。异步：多件事情一起做。

                 oAjax.open("GET","like.txt",true);

                 //3、发送请求

                 oAjax.send();

                 //4、接收请求 onreadystatechange 查看进度的事件 当oAjax.readyState == 4表示已经完成，而当oAjax.status == 200时，表示接收数据成功

                 oAjax.onreadystatechange = function(){

                     if(oAjax.readyState == 4){

                         if(oAjax.status == 200){

                             alert("成功"+oAjax.responseText);

                         }

                         else{

                             alert("失败");

                         }

                     }

                 }

             }

         }

         </script>

     </head>

     <body>

         <input id="btn1" type="button" value="读取文件" />

     </body>

 </html>

以上过程分四步在服务器上读取了like.txt中的文件

同样的方法可以读取josn文件和XML文件

下面是将以上内容封装为函数的代码，可以直接用

 function ajax(url,fnSucess,fnFaild){

                 //1、创建ajax对象

                 //var oAjax = new XMLHttpRequest();//非IE6

                 //var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6

                 //兼容写法

                 var oAjax = null;

                 if(window.XMLHttpRequest){

                     oAjax = new XMLHttpRequest();

                 }

                 else{

                     oAjax = new ActiveXObject("Microsoft.XMLHTTP");

                 }

                 //2、链接服务器

                 //open（方法，url，是否异步）

                 //同步：一件件事情做。异步：多件事情一起做。

                 oAjax.open("GET",url,true);

                 //3、发送请求

                 oAjax.send();

                 //4、接收请求 onreadystatechange 查看进度的事件 当oAjax.readyState == 4表示已经完成，而当oAjax.status == 200时，表示接收数据成功

                 oAjax.onreadystatechange = function(){

                     if(oAjax.readyState == 4){

                         if(oAjax.status == 200){

                             alert("成功"+oAjax.responseText);

                             fnSucess(oAjax.responseText);

                         }

                         else{

                             fnFaild();

                         }

                     }

                 }

             }

函数接收三个参数 ：第一个参数为url，请求的服务器地址。第二个参数为fnSucess函数，当请求并接收数据成功的时候执行该函数，该函数接收一个参数，该参数为接收的文件字符串。第三个参数为fnFaild（）函数，当请求数据失败的时候，执行该函数。

整个Ajax说的神神叨叨，其实也就用这么点东西。

Ajax日记的更多相关文章

  1. Yii 1开发日记 -- Ajax实现点击加载下一页

    功能实现:先输出一页的内容,然后点击加载下一页,如图 1.控制器中 /** * 消费记录:列出用户购买章节的记录 */ public function actionMyPayHis() { //点击加 ...

  2. bug日记之---------js中调用另一个js中的有ajax的方法, 返回值为undefind

    今天做一个OCR授权的需求, 需要开发一个OCR弹框, 让用户选择是否授权给第三方识别公司(旷世科技)保存和识别用户个人信息, 照片等. 其中用到了在一个js的方法中调用另外一个js的方法, 其中有一 ...

  3. WebAPI学习日记一：Ajax请求传递参数遇到的问题

    首先,本人大学刚毕业,想把自己学习的一些东西记录下来,也是和大家分享,如有不对之处还请多加指正.声明:但凡是我博客里的文章均是本人实际操作遇到的例子,不会随便从网上拷贝或者转载,本着对自己和观众负责的 ...

  4. 小白日记54：kali渗透测试之Web渗透-补充概念（AJAX，WEB Service）

    补充概念 AJAX(异步javascript和XML) Asynchronous javascript and xml 是一个概念,而非一种新的编程语言,是一组现有技术的组合 通过客户端脚本动态更新页 ...

  5. 学习日记13、ajax同时提交from表单和多个参数

    if ($("form").valid()) { $.ajax({ url: "@Url.Action("EditCusAndCusCard")&qu ...

  6. 学习日记21、IE下的Ajax需要注意的地方

    上面这张图片我是封装了一个easyui下拉框,红框出则是动态传入的json数据,这串代码在google下运行不会有任何问题,但是在IE下运行则会提示缺少:,这是因为IE只识别json格式的数据,所以这 ...

  7. 前端学习日记之HTML、CSS 简单总结

    前端学习日记之HTML.CSS 简单总结 标签(空格分隔): html css 前端学习日记 html超文本标记语言 一. h标题标签 h1-h7 <!DOCTYPE html> < ...

  8. Atitit s2018 s4 doc list dvchomepc dvccompc.docx .docx \s2018 s4 doc compc dtS44 \s2018 s4 doc dvcCompc dtS420 \s2018 s4f doc homepc \s2018 s4 doc compc dtS44\(5 封私信 _ 44 条消息)WebSocket 有没有可能取代 AJAX

    Atitit s2018 s4 doc list dvchomepc dvccompc.docx .docx \s2018 s4 doc compc dtS44 \s2018 s4 doc dvcCo ...

  9. Ajax的实现及使用-zepto

    正文 之前归纳了ajax技术的基础知识,汗颜的是这两篇本应该在年初补上的,但因为种种原因,并没有补上.不过还好最近有空,所以开始整理之前的日记.共分为两篇:对于zepto ajax代码的实现解析;对于 ...

随机推荐

  1. Nginx的Upload上传模块

    前段时间做一个项目,需要上传文件,差不多需要20M左右,普通用php处理会比较麻烦,经常超时,而且大量占用资源.于是搜索了下,决定用nginx的upload上传模块来处理. 你可以在这里:http:/ ...

  2. TCLP 第一章 1.5字符输入输出

    #include <stdio.h> /* 将输入复制到输出:版本1 */ int main() { int c; /* 注意是int而不是char,除了存储char类型字符,还要存储EO ...

  3. LeetCode_Integer to Roman

    Given an integer, convert it to a roman numeral. Input is guaranteed to be within the range from 1 t ...

  4. QTableView使用HTML显示富文本

    对于QTableView中的显示,我们前面介绍过很多种,其中包括:文本.进度条.复选框等,今天我们介绍一下关于富文本的显示. 可能绝大多数小伙伴会通过QAbstractTableModel中的data ...

  5. jQuery之Jcrop

    头像裁剪是一个经常用到的功能,实现原理也较为简单,就是在本地选择好所需裁剪图片的坐标,将坐标发送到服务器,由服务器执行图片裁剪操作. jQuery插件Jcrop提供了强大的图片裁剪坐标选择插件.一下来 ...

  6. css案例学习之用thead、tbody、tfoot实现漂亮的table布局

    首先说说thead.tbody.tfoot <thead> <tbody> <tfoot> 无论前后顺序如何改变, <thead> 内的元素总是在表的最 ...

  7. 导入时如何定制spring-boot依赖项的版本

    spring-boot通过maven的依赖管理为我们写好了很多依赖项及其版本,我们可拿来使用.spring-boot文档介绍了两种使用方法,一是继承,二是导入. 通过<parent>继承: ...

  8. jQuery UI 之 EasyUI 快速入门

    jQuery EasyUI 基础 转载自(http://www.shouce.ren/api/view/a/3350) jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面 ...

  9. SQLServer 2000 Driver for JDBC][SQLServer]传入的表格格式数据流(TDS)远程过程调用(RPC)协议流不正确解决方法

    问题:[SQLServer 2000 Driver for JDBC][SQLServer]传入的表格格式数据流(TDS)远程过程调用(RPC)协议流不正确.参数 1 (""): ...

  10. PHP Database ODBC 之 ODBC

    ODBC 是一种应用程序编程接口(Application Programming Interface,API),使我们有能力连接到某个数据源(比如一个 MS Access 数据库). 创建 ODBC ...