AJAX = （Asynchronous JavaScript and XML异步的 JavaScript 和 XML）
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX是一种无需加载整个网页,可以对网页的某部分进行更新,称之为与服务器交换数据的艺术
核心与基础就是XMLHttpRequest对象,存在兼容问题,当前所有主流浏览器都支持,但是在IE56上不支持,在IE56上支持ActiveXObject
创建XMLHttpRequest()
xmlhttp = new XMLHttpRequest();
老版本IE56中使用ActiveX对象
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
兼容处理
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest;
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
AJAX的步骤
1.创建请求对象
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest;
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
2.准备请求open(),三个参数
参数1:表示请求方式,是一个字符串,不区分大小写,请求方式有get.post
参数2:表示请求的url,
参数3:表示请求同步或异步,true表示异步,fasle表示同步
get:通过url提交数据,数据在url中可以看到
:提交的数据最多只能有1024字节
:get方式提交的数据显示在url上,不安全
:get方式传播速率更快
post:方式提交的数据被隐藏,不会显示在url上,适合敏感数据
数据放置在html header内提交
没有提交数据的大小限制
post请求的时候需要建立请求头
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
假设用post 1.xhr.open("post","data.txt",true);
2.xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
3.xhr.send();
3.发送请求 .send()方法:
4.监听请求的状态,此方法每当readyState的值发生改变时会自动调用
onreadystatechange
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
//一定可以获得服务器返回的数据
//返回的数据存在属性responseText/responseXML中
//前端通常不直接处理xml格式的数据
document.write(xhr.responseText);
}
}
如果需要获得服务器的响应,请使用XMLHttpRequest对象的responseText或者responseXML
readyState属性存有XMLHttpRequest的状态信息
状态值从0到4发生变化
0:请求未初始化
1:服务器已经建立连接
2:服务器已经接受
3:请求处理中
4.请求已经完成,且响应已经就绪
status属性
200:OK请求成功
404:未找到页面
500:表示服务器错误
readyState和status区别
status体现的是服务器对请求的反馈,readyState表示AJAX所经历的几种状态
status体现的是服务器对请求的反馈，而readystate表明客户端与客户的交互状态过程。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>AJAX</title>
</head>
<body>
<input type="button" id="btn" value="请求">
</body>
<script>
btn.onclick = function(){
//1.创建请求对象
var xhr ;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest;
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.建立请求
//参数1:请求方式,参数2,请求的url,参数3:true为异步请求,false为同步请求
xhr.open("get","classDate1.json",true);
//3.发送请求
xhr.send();
//4.监听请求
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
//此时获得的是一个JSON格式的字符串数据
var date = xhr.responseText;
//需要JSON.parse()方法将其转换为JS对象
console.log(date);
date = JSON.parse(date);
//班号的获取:className
document.write("班号:"+date.classname+"<br/>");
//姓名性别信息:nameList
var namelist = date.namelist;
for(var i=0;i<namelist.length;i++){
//数组中的每一个元素都代表每一个同学
var stu = namelist[i];
document.write("姓名:"+stu.name+", 性别:"+stu.sex+"<br>");
}
}
}
}
</script>
</html>
//以下为JDON文件内容
{
"classname":"xhh180503",
"namelist":[
{"name":"张大仙","sex":"仙女"},
{"name":"张大碗","sex":"仙女"},
{"name":"张小金","sex":"仙男"}
]
}