AJAX
Asynchronous JavaScript angXML
异步Javascript和XML
作用：在不刷新整页情况下更新页面数据
节省用户操作，减少数据请求
传输 获取数据
过程：
初始化-发送请求-服务器收到请求-服务器处理-返回结果
AJAX的方法
Open方法
open（method，url，async）
三个参数的含义：
1.提交方式
2.提交地址
3.异步（同步）
Send方法
发送数据请求
AJAN请求状态监控
onreadystatechange
readystate属性：请求状态
0(初始化)还没调用open（）方法
1(载入)已调用send（）方法，正在发送请求
2(载入完成)send（）方法完成，再整发送请求
3(解析)正在解析响应内容
4(完成)响应内容解析完成，可以再客户端调用了
status属性：服务器（请求资源）的状态
AJAX返回数据的处理
返回的内容：
responseText：返回以文本形式存放的内容
responseXML：返回XML形式的内容
返回数据的处理
数据类型;XML、HEML、JSON
JSON.parse():字符串解析成对象
异常处理：
try{
//此处的可能产生列为的语句
}catch（e）{
//此处是负责列外处理的语句
}finally{
//此处是出口语句 try/catch执行完成所执行
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script>
window.onload = function () {
function ajax(method,url,async,/*reqData,*/cb) {
var xmlHttp = null;
if(window.ActiveXObject){ //如果是IE
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP')
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest(); // 实例化一个xmlHttp
}
//如果实例化成功，就调用open()方法，开始准备向服务器发送请求
if(xmlHttp != null){
xmlHttp.open(method,url,async);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlHttp.send(null);
// xmlHttp.send(reqData);
xmlHttp.onreadystatechange = doReult //设置回调函数
}
//回调函数
//一旦readyState的值改变,将会调用这个函数,readyState=4表示完成响应
//设定函数doResult()
function doReult() {
if(xmlHttp.readyState == 4){
if(xmlHttp.status==200){
cb(xmlHttp.responseText)
}
}
}
}
ajax('post','http://192.168.1.182:3000/Handler/OfflineCourseHandler.ashx?action=indexshow ',true,function (resData) {
console.log(JSON.parse(resData))
});
// var reqData = 'userName=xiaoxiong';
// ajax('post','http://192.168.1.182:3000/Handler/UserHandler.ashx?action=isLogin',true,reqData,function (resData) {
// console.log(JSON.parse(resData))
// });
}
</script>
</head>
<body>
</body>
</html>