Ajax的基本原理
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。
这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解。XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。
首先,需要先了解XMLHttpRequest这个对象的属性和方法:
AJAX运行步骤
在AJAX实际运行当中,对于访问XMLHttpRequest(XHR)时并不是一次完成的,而是分别经历了多种状态后取得的结果,对于这种状态在AJAX中共有5种,分别是。
0 – (未初始化)还没有调用send()方法
1 – (载入)已调用send()方法,正在发送请求
2 – (载入完成)send()方法执行完成,
3 – (交互)正在解析响应内容
4 – (完成)响应内容解析完成,可以在客户端调用了
对于上面的状态,其中“0”状态是在定义后自动具有的状态值,而对于成功访问的状态(得到信息)我们大多数采用“4”进行判断。
使用ajax的基本步骤:
1、创建ajax引擎对象
2、声明监听函数
//判断ajax状态码
//判断响应状态码
//获取响应信息(普通字符串和json格式的字符串)
//处理响应
3、创建并发送ajax请求
创建请求(设置请求方式,设置请求地址,设置异步或者同步)
发送请求
4、其他处理
创建并发送ajax请求
1、创建ajax请求(设置异步或者同步)
ajax.open(method,url,ansyc);
method:表示请求方式
get方式:请求数据以?隔开的形式拼接在url的后面。请求数据不能写在send方法中
post方式:post方式需要单独的进行请求数据的设置。使用ajax.setRequestHeader(\”Content-Type\”,\”application/x-www-form-urlencoded\”);
设置请求数据为键值对数据。如果有请求数据则ajax.send(\”键值对数据&键值对数据…\”),如果没有请求数据则ajax.send(null)
url:请求地址
ansyc:设置异步或者同步请求,true表示异步,false,表示同步。默认是异步的。
异步:当前js函数继续执行,无须等待ajax请求的响应以及响应的处理。
同步:当前js函数会等待ajax请求以及响应,当ajax响应处理完毕后,继续执行函数的剩余代码。
2、发送ajax请求
get请求方式
post方式