11.30 AJAX

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)
            }
        }
    }
}
console.log(JSON.parse(resData))
});
// var reqData = 'userName=xiaoxiong';
    // console.log(JSON.parse(resData))
// });
}
</script>
</head>
<body>
 
</body>
</html>

转载于:https://www.cnblogs.com/xiaoxiongv1/p/7928105.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值