Ajax基础详解教程(一)

什么是Ajax?

在研究ajax之前首先让我们先来讨论一个问题 ——什么是Web 2.0 。听到 Web 2.0 这个词的时候，应该首先问一问 “Web 1.0 是什么？” 虽然很少听人提到 Web 1.0，实际上它指的就是具有完全不同的请求和响应模型的传统 Web。比如，到 hdu.edu.cn 网站上点击一个按钮。就会对服务器发送一个请求，然后响应再返回到浏览器。该请求不仅仅是新内容和项目列表，而是另一个完整的 HTML 页面。因此当 Web 浏览器用新的 HTML 页面重绘时，可能会看到闪烁或抖动。事实上，通过看到的每个新页面可以清晰地看到请求和响应。

Ajax也是前端必备技能了，学习任何语言，都需要以理论为基础的大量实践才能真正学会，之前学了Ajax很多遍，因为缺乏大量实践，总是会忘。所以不实践是失败之母。。。当然理论基础也很重要啦，今天谈谈我对Ajax的基础认知。

定义：全称：Asynchronous JavaScript and XML（用异步的形式的JavaScript去操作XML) 用来传输进行数据交互 其实就是拿数据发数据。

应用：我们来想想我们编写的HTML代码的时候，当我们改变了里面内容了并且想看效果的时候，是不是先保存，然后去浏览器刷新页面，而Ajax就是做到当页面内容发生改变的时候能不刷新页面，就能把改变告知我们。比如，我们注册的时候信息填写错误，是不是没刷新页面就能直接看到信息提示，比如我们玩QQ的时候，有什么消息都会提醒你，丝毫没有刷新页面，丝毫没有影响你干别的事情，这就是Ajax做的事情。

下面我们先不解析具体的原理，先来看一个大致的实现过程。

当然首先，你得知道是把代码放在服务器下运行的，打开的时候不能用本地的地址，要用localhost/。。这种形式才是在服务下访问的。要是这不了解的话，可以先自行百度下。

栗子需求：新建一个文字1.txt,随便输入什么内容，新建HTML页面，点击页面里的按钮获取1.txt里面的内容

var oBtn = document.getElementById('btn');oBtn.onclick = function(){var xhr = new XMLHttpRequest(); //创建Ajax对象xhr.open('get','1.txt',true); //设置请求信息 xhr.send();//提交请求//等待服务器返回内容xhr.onreadystatechange = function() {if ( xhr.readyState == 4 ) {alert( xhr.responseText ); //弹出内容} } }

当点击按钮的时候，你会发现弹出了1.txt里面的内容。

我们来具体解析一下这个步骤

var xhr = new XMLHttpRequest(); //创建Ajax对象

我们要用Ajax获取数据，首先呢，要创建一个Ajax对象，就跟你想获取系统时间要创建一个时间对象是一个道理。对象的名称就是 XMLHttpRequest()，创建好之后我们就可以用对象下的方法属性进行数据交互了。