在研究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(),创建好之后我们就可以用对象下的方法属性进行数据交互了。
需要说明的是,这个对象实际是存在兼容问题的,IE6以下没有这个对象的,所以是获取不到数据的,IE6以下用的实际是一个插件的方式:
ActiveXObject(‘Microsoft.XMLHTTP') //ActiveXObject: IE6下插件的总称,包含很多插件 //Microsoft.XMLHTTP:具体某个插件的名字
所以我们需要对上面做一个兼容性的处理:
var xhr = null; if(window.XMLHttpRequest){ //加window是因为如果直接判断IE下不存在的东西会报错,加了window,就是在判断一个属性是否存在,这样就不会报错了(当然我们都知道所有的东西都在window对象下,所以这样判断是有效的) xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject(‘Microsoft.XMLHTTP'); }
接着看
xhr.open('get','1.txt',true); //设置请求信息
Open方法
三个参数的含义
1、提交方式 Form-method(get/post)
2、提交地址 Form-action
3、是否异步,是为(true)
首先讲提交方式:get/post 这两种的区别。
这里我们不用ajax的方式,先直接通过传统的表单提交数据来分析。
传统的表单提交就是在表单里面设置提交的一些参数,用户的信息输入提交,会跳到指定后台的页面。
表单的参数:
action:提交到哪里 默认是当前页面
method:提交方式 默认是Get
enctype: 提交的数据格式,默认是application/x-www-form-urlencoded
我们来具体看个get方式请求的栗子,并且了解前后端到底是怎么交互的。
栗子需求:建立HTML页面,PHP页面,填入数据,点击提交,然后输出我们输入的内容。
HTML页面:
<form action="1.get.php"> <input type="text"> <input type="text"> <input type="submit" value="按钮" /> </form>
1.get.php(如果不了解PHP语言,大概看下面的注释简单知道干啥就行了)