### 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>
```