初学JS，一直认为Ajax是个很高级的、不可亵玩的东西。这两天怀着忐忑的心情接触了一下它，

感觉它并没有想象中的那么难理解。

其实，Ajax就是浏览器端向服务器请求资源的一个对象（方法）。

就跟打电话的过程差不多。

先以打电话为例，我们分为四个步骤：

1.手机

2.拨号

3.说话

4.对方回话

那么在Ajax中也是这四步：

1.创建对象（XMLHttpRequest）

2.连接服务器（open(方法, 文件名, 异步传输)）

3.发送请求  （send()）

4.接收请求并响应

废话不多说，先上封装好的一个Ajax（命名为Ajax.js）

 function ajax(url, fnSucc, fnFaild)

 {

     //1.创建Ajax对象

     if(window.XMLHttpRequest)

     {

         var oAjax=new XMLHttpRequest();

     }

     else

     {

         //IE6

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

     }

     //2.连接服务器

     //open(方法, 文件名, 异步传输)

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

     //3.发送请求

     oAjax.send();

     //4.接收返回

     oAjax.onreadystatechange=function ()

     {

         //oAjax.readyState    //浏览器和服务器，进行到哪一步了

         if(oAjax.readyState==4)    //读取完成

         {

             if(oAjax.status==200)    //成功

             {

                 fnSucc(oAjax.responseText);

             }

             else

             {

                 if(fnFaild)

                 {

                     fnFaild(oAjax.status);

                 }

                 //alert('失败:'+oAjax.status);

             }

         }

     };

 }

然后我们在html里面直接用它就可以了

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <script src="Ajax.js"></script>

 <script>

 window.onload=function ()

 {

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

     oBtn.onclick=function ()

     {

         ajax('a.txt', function (str){

             alert(str);

         });

     };

 };

 </script>

 </head>

 <body>

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

 </body>

 </html>

注：

在计算机上装一个服务器

http://wamp-server-wamp5.cn.uptodown.com/

将文件放在www文件夹下

访问：locahost/文件名

就可以了。

Ajax的理解的更多相关文章

  1. Ajax初步理解

    最近在项目中经常会使用Ajax技术,用法上倒是熟练了,但是只知其然,不知其所以然,抽时间读了读JavaScript高级程序设计中关于Ajax的介绍有了些初步的理解,在此总结一下. 什么是Ajax Aj ...

  2. ajax的理解和运用

    AJAX : Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 譬 ...

  3. 面试时怎样回答：你对原生ajax的理解

    很多人跟我一样用习惯了jq封装好的$.ajax,但是面试时,原生ajax是很多面试官喜欢问的问题,今天再查资料,打算好好整理一下自己理解的原生ajax. 首先,jq的ajax:一般我常用的参数就是这些 ...

  4. 有关ajax的理解；

    jQuery是JavaScript封装的一个库,里面封装了一些便于我们使用的方法,同时还有$.ajax()的一些理解需要我们更加深入了解 ajax简介: 实现后台与前台交互的功能或方法就叫做ajax: ...

  5. input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年，我们被耍过的bug——has

    input屏蔽历史记录   设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处   ;(function($){$.ex ...

  6. ajax的理解与工作流程

    一.什么是ajax ajax是一种异步通信技术.在ajax出现之前,客户端与服务端之间直接通信.引入ajax之后,客户端与服务端加了一个第三者--ajax.有了ajax之后,通过在后台与服务器进行少量 ...

  7. $Ajax简单理解

    关于web开发的可能我们不能或缺的利器就是$Ajax,我们这里就不具体的将里面的原理(如果大家有时间的话可以好好的看看javascript里面的权威指南)里面讲的比较详细了 这里就在不说了.今天我们就 ...

  8. 对Ajax的理解

    一.Ajax的工作原理: 1. Ajax的机制是:完成异步请求,实现页面的局部刷新. 2. 发送异步请求:通过xmlhttprequest方法. 3. 浏览器向服务器发送异步请求: 服务器接收处理请求 ...

  9. 系统前端基本文件+ajax部分理解

    静态页面: 一.static: css dist fonts images js model 二.templates: html ajax搜索操作: <html> <head> ...

随机推荐

  1. 二维线段树 HDU 1823最简单的入门题

    xiaoz 征婚,首先输入M,表示有M个操作. 借下来M行,对每一行   Ih a l     I 表示有一个MM报名,H是高度, a是活泼度,L是缘分. 或   Q h1 h2 a1 a2    求 ...

  2. Emacs 配置 Python 编程环境

    python编程环境设置涉及到:自动完成.语法检查.虚拟环境. 为了不把系统搞乱,在python的虚拟环境中安装相关的插件. 一.安装python虚拟环境 virtualenvwrapper sudo ...

  3. MongoDB,HDFS, Spark to 电影推荐

    http://www.infoq.com/cn/news/2014/12/mongdb-spark-movie-recommend MovieWeb是一个电影相关的网站,它提供的功能包括搜索电影信息. ...

  4. yii2.0根据query查看sql语句

    时间长不用就总是忘记,好记性比不上烂笔头,记录下来备用: Yii::$app->getDb()->getQueryBuilder()->build($query));

  5. 机器学习之AdaBoost

    Adaboost是一种组合学习的提升算法,能将多个弱学习算法(甚至只比随机猜测好一点)组合起来,构成一个足够强大的学习模型. 组合学习 组合学习是将多个假说组合起来,并集成它们的预测.比如对于一个问题 ...

  6. linux 第一次获得root权限

    开机进入桌面,ctrl+alt+T打开终端————在此时终端显示的是 用户名@电脑名:-$   表示普通用户   在此处输入:sudo passwd root   此时提示———— [sudo] pa ...

  7. 【Cocos2d入门教程六】Cocos2d-x事件篇之触摸

    Cocos游戏当中产生一个事件时,可以有多个对象在监听该事件,所以有优先级(Priority).优先级越高(Priority值越小),事件响应越靠前. 关系图: 新 事件分发机制:在2.x 版本事件处 ...

  8. 推荐一款App运营工具：AYL爱盈利App榜单监控

    对包括开发者.产品运营.投资人在内的诸多移动互联网从业人员而言,国内Android应用市场和IOS应用市场的榜单变化数据时大家的必修功课之一:看看这段时间所关注的垂直领域里最火的是哪几款应用:看看竞争 ...

  9. 把CheckedListBoxControl设置为单选框

    private void chkControl_ItemChecking(object sender, DevExpress.XtraEditors.Controls.ItemCheckingEven ...

  10. 更换用installshield打包生成exe文件的图标【转】

    最近在研究用installshield2010为自己做的产品打包,自己在网上找写资料,胡乱折腾,最后弄成了一个exe安装包,想要修改exe文件的图标,发现Basic MSI project 无法用in ...