Ajax的基本概念
Asynchronous Javascript And XML（异步JavaScript和XML）,他并不是凭空出现的新技术,而是对于现有技术的结合:核心是js对象XMLHttpRequest。
Ajax的使用一共分为5步
1.建立XMLHTTPRequest对象
2.注册回调函数
- 当服务器回应我们了,我们想要执行什么逻辑
3.使用open方法设置和服务器端交互的基本信息,即：设置提交的网址,数据,post提交的一些额外内容
设置发送的数据，开始和服务器端交互
4.发送数据
5.处理响应，在注册的回调函数中,获取返回的数据,处理返回回来的数据。
示例代码:GET
get的数据,直接在请求的url中添加即可
<script type="text/javascript">
// 创建XMLHttpRequest 对象
var xml = new XMLHttpRequest();
// 设置跟服务端交互的信息
xml.open('get','01.ajax.php?name=fox');
xml.send(null); // get请求这里写null即可
// 接收服务器反馈
xhr.onreadystatechange = function () {
// 这步为判断服务器是否正确响应
if (xhr.readyState == 4 && xhr.status == 200) {
// 打印响应内容
alert(xml.responseText);
}
};
</script>示例代码:POST
<script type="text/javascript">
// 异步对象
var xhr = new XMLHttpRequest();
// 设置属性
xhr.open('post', '02.post.php' );
// 如果想要使用post提交数据,必须添加
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 将数据通过send方法传递
xhr.send('name=fox&age=18');
// 发送并接受返回值
xhr.onreadystatechange = function () {
// 这步为判断服务器是否正确响应
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
</script>注意：
1.创建XMLHttpRequest对象(兼容性写法)
新版本浏览器:var xml=new XMLHttpRequest();
（IE5 和 IE6）:var xml=new ActiveXObject("Microsoft.XMLHTTP");
考虑兼容性创建Ajax对象
var request ;
if(XMLHttpRequest){
// 新式浏览器写法
request = new XMLHttpRequest();
}else{
//IE5,IE6写法
new ActiveXObject("Microsoft.XMLHTTP");
}2.发送请求:
| 方法 | 描述 |
|---|---|
open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST。 url：文件在服务器上的位置async：true（异步）或 false（同步） |
send(string) | 将请求发送到服务器。string：仅用于 POST 请求 |
3.onreadystatechange事件
当服务器给予我们反馈时,我们需要实现一些逻辑
| 属性 | 描述 |
|---|---|
onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。（0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪。） |
status | 200: "OK"。404: 未找到页面 |
附录：封装的方法：
function ajax(option) {
// 创建对象
var xmlRequest ;
if (XMLHttpRequest) {
xmlRequest = new XMLHttpRequest();
}else{
xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
// 格式化传入的数据为name=fox&age=18这样的格式
var formatStr = "";
for(var item in option.data){
// 获取属性名,属性值,进行拼接
formatStr+=item;// 属性名
formatStr+="=";//等号
formatStr+=option.data[item];//属性值
formatStr+="&";//分隔符
}
// 去除最后一个&
formatStr = formatStr.slice(0,-1);
// open方法 如果是get方法,那么url之后需要添加数据
if(option.method == "get"){
option.url = option.url+"?"+formatStr;
option.data = null;
}
// 调用open方法
xmlRequest.open(option.method,option.url)
// 如果是post设置HTTP协议头
if (option.method=="post") {
xmlRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
}
// send方法 这里的data已经是修改过的,如果使用的是get方法,那么data为null
xmlRequest.send(option.data);
// 判断状态改变,调用方法
xmlRequest.onreadystatechange = function () {
// 这步为判断服务器是否正确响应
if (xhr.readyState == 4 && xhr.status == 200) {
option.success(这里的数据是ajax获取的);
}
};
}