@H_4030@<span style="background-color: #ccffcc">ajax
@H403_0@是用来处理前后端交互的技术，可以改善用户体验，其本质是
@H_403_0@XMLHttpRequest，异步访问服务器并发送请求数据，服务器返回响应的数据，以页面无刷新的效果改变页面中的局部内容
@H_4030@同步：任务一个一个的执行，只有前面的任务执行完才会执行下一个任务，如果前面的任务是耗时操作，则需要一直等待
@H4030@异步：多条任务并发执行，也就是一个任务的开启，不需要等待其他任务执行结束，效率较高
@H403_0@ajax的语言载体是JavaScript，最大的特点是页面不刷新
@H_403_0@
1、获取ajax对象
@H_403_0@主流浏览器获取方式:火狐、谷歌、safari、opera、IE7以上
@H_4030@var xhr = new XMLHttpRequest();
@H4030@IE7以下
@H4030@var xhr = new ActiveXObject("microsoft.XMLHttp");
@H4030@
2、发起请求
@H4030@创建请求：xhr.open(请求方式get/post,请求地址);
@H4030@发送请求：xhr.send(post请求数据/get设置null);
@H4030@
3、接收数据
@H403_0@ajax可以接收字符串、html标签、css样式、xml、json
@H_403_0@通过监听onreadystatechange事件。来接收ajax状态的变化（readyState属性）
@H_4030@
readyState:
@H403_0@-0:表示未初始化，对象已经建立，但是没调用onen方法
@H_403_0@-1：对象已建立，但是未调用send方法
@H_403_0@-2：发送数据，已调用send方法，但当前状态及http头未知
@H_4030@-3：已接收部分数据，但是数据不全
@H4030@-4：数据接收完毕
@H403_0@4、常用属性和方法
@H_403_0@
属性：
@H_4030@-responseText：将响应的数据作为字符串返回，只读
@H4030@-responseXML:将响应的数据格式化为xml格式并返回，只读
@H4030@-status：当前请求的http状态码
@H403_0@
方法：
@H_4030@-open
@H4030@-send
@H4030@-setRequestHeader：设置请求头
@H4030@<span style="background-color: #ccffcc">
get请求
@H403_0@url以字符串形式传递数据，对中文、&、=需要特殊处理，可以使用encodeURIComponent()方法进行编码，编码后的内容在服务端不需要解码，可以正常接收,get多个参数之间用&连接，参数名和参数值用=连接
<div class="jb51code">
<pre class="brush:js;">
var xhr = null;
//获取ajax对象
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else{
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
xhr.onreadystatechange = function(){
console.log(xhr.readyState);
switch (xhr.readyState){
case 0:
console.log("尚未初始化");
break;
case 1:
console.log("尚未建立连接");
break;
case 2:
console.log("正在发送数据");
break;
case 3:
console.log("正在接受数据");
break;
case 4:
console.log("数据接收完成");
//处理接到的数据,这下面是重点
var text = xhr.responseText;
break;
}
}
//创建请求
xhr.open('get','http://localhost/PHP/ajax01.PHP?sel=4');
xhr.send(null);
