### AJAX是什么
AJAX =异步JavaScript和XML（json）。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某个部分进行更新。
### 使用AJAX请求数据
```
1、创建XMLHttpRequest对象：
标准浏览器的创建方法：new XMLHttpRequest()
IE5、6的创建方法：new ActiveXObject("Microsoft.XMLHTTP")
2、向服务器发送请求
2.1配置请求 open()方法的三个参数
参数一：请求的方式
GET：
直接把请求参数拼接在URL之后，.send方法中传null。
POST：
把请求参数放在send（）方法中，如果参数中有中文，需要用encodeURL进行编码
参数二：请求的文件在服务器上的位置
相对路径：info.json
绝对路径：http://127.0.0.1:8020/info.json
参数三：是否异步请求
true：异步请求
false：同步请求
2.2 发送请求
send（）方法：
发送请求，如果是POST请求，请求参数放在这里
2.3、监听readystatechange事件
每次readystate属性值发送改变都会触发这个事件
ready state取值情况：0：请求末初始化。1：服务器连接已建立。2：请求已接受。3：请求处理中。4：请求已完成，且响应已就绪。
ststues属性取值情况：200：请求成功。404：未找到页面。500：服务器错误。
```
### 创建一个完整的AJAX
```
<!doctype html>
<html lang="en">
<head>
<meta charset = "utf-8"/>
<title></title>
</head>
<body>
<script type = "text/javascript">
// 1、创建对象
var xhr = new XMLHttpRequest();
// 2、配置请求
xhr.open('GET','data.json',true)
//3、发送请求
xhr.send()
// 4、监听请求状态
xhr。onreadystatechange = function () {
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.responseText)
}
}
</script>
</body>
</html>
data.json数据
{
“title”：“北京昨夜大雨”，
“des”:"我台消息，昨夜北京一场大雨，小车成船"
}
###兼容性问题
<script type="text/javascript>
// 1、创建请求对象
// var xhr = new ActiveXObject('Microsoft.XMLHTTP');
// var xhr = new XMLHttpRequest()
var xhr = window.XMLHttpRequest? new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP')
// 配置请求对象
// 在open方法中配置请求对象，有三个常用参数：
// 1、请求方法：GET/POST
// 2、请求接口的路径：绝对路径/相对路径
// 3.实发发起异步请求，默认是true，可以更改为同步请求
// 第二个参数情况取决于第一个参数，如果是GET请求，请求的接口需要参数，则把参数字符串拼接在接口后，使用“？”链接
// 如果是POST请求，请求的接口需要参数，就把参数字符串当做send（）方法的参数传递给服务器
xhr.open('GET','data.xml',true)
// 发送请求
xhr.send(null);
// 监听请求情况
xhr.onreadystatechange=function(){
// 只有在服务器处理完毕请求，且处理成功时才可以获取服务器返回的数据，
// 当xhr.readystate值是4时，代表服务器请求处理完毕
// 当xhr.status的值是200-300或304时，表示服务器成功的把数据返回下来，一般情况下值为200
if(xhr.readyState==4&&xhr.status==200){
//获取服务器返回的值
// 如果传输的数据格式是json格式，则需要从responseText属性中获取中
//console.log(xhr.responseText)
// 如果服务器传输的数据格式是XML格式，则需要从responseXML属性中取值
console.log(xhr.responseXML)
</script>
```
网友评论