<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
background-image:linear-gradient
</style>
<script type="text/javascript">
1、创建出ajax这个对象
var xhr;
ajax请求对象
if(window.XMLHttpRequest) {
//有表示当前标准的浏览器
xhr = new XMLHttpRequest();
} else {
无,是ie 5、6、7这几个浏览器,使用ActiveXObject()创建
在IE5\6\7这几个老板浏览器中ajax组件是放在ActiveXObject()组件库中,需要
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.window.XMLHttpRequest
2、配置请求信息
open函数中三个参数
1、设置请求方式 GET POST
2、设置请求的数据的接口地址
3、设置请求是否异步请求(异步请求)当请求发出后,不再等待请求的数据,而是先执行其他任务,当数据到达本地后再处理(默认的请求方式)
//xhr.open('open','index.html',true)
post请求参数问题,把post请求所需要的参数放在send()方法中
xhr = ("post","demo.text",true/false)
//xhr.send('user=liwei&password=1234567');
//内容放在这里
post请求中如果有中文字符,则需要对中文字符进行编码操作
xhr.send('user=' + encodeURI('李威') + '&password=1234567');
console.log(encodeURI("李威")); * /
get请求,如果有参数则把请求参数直接拼接在url之后
在get请求中如果每次请求的是同一个接口,则浏览器会从缓存中取数据,而不是向服务器请求数据,如果服务器该接口中的数据内容发生改变,则永远拿不到最新的数据,所以我们可以在请求的接口后拼接一个随机数参数,这样浏览器每次拿到接口在缓存中都找不到这个接口对应的数据,旧会从服务器拿数据了,(而服务器端并没有开设接手随机数参数的字段,所有get发送过来的随机数会被服务器丢弃,只返回能处理的接口数据)
xhr.open('GET', 'myJSON.json', true);
//3、发送请求
xhr.send(null);
4、监听数据传输情况
通过xhr的onreadystate事件来获取并判断当前服务器状态
xhr.onreadystatechange = function() {
每当xhr的对象的readystate属性值改变时,都会执行这个函数
我们是通过xhr的onreadystate事件来获取并判断当前的服务器状态
只有当readystate的值为4,且status的值为200时,服务器的数据才算发送到本地 响应才算成功
if(xhr.readyState == 4 && xhr.status == 200) {
var result = xhr.responseText;
获取到的json字符串换位json对象
var resultObj = JSON.parse(reslt);
alert(xhr.responseText);
alert(xhr.responseXML);
当请求的数据是使用XML格式传递的,则responseTEXT属性会把这些数据转换为一个字符串,但是responseXML属性会把这些数据当成XML的文档对象,在解析时方便
当请求的数据是Json格式传输时,则responseTEXT属性会把这些数据转换为一个json字符串,而responseXML属性并不会接收到这些数据
//xhr.responseText 保存 不是XML格式 之外的格式
//xhr.responseXML 保存 XML的 格式
}
}
</script>
</head>
<body>
</body>
</html>