AJAX

2020-12-22  本文已影响0人  兰德索尔

Ajax4步

1.创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2.使用open建立请求open(method,url,async)
method —提交方式,get或post
get提交时要返回的参数直接写在url地址
xhr.open('提交方式','目标地址','异步请求')
url—提交的目标地址
async—同步异步操作,true或false
post请求:
open('post','目标地址')
setRequestHeader('content-type','application/x-www-form-urlencoded')
send('data参数')
3.使用send发送请求,当前提交方式为post时需要在send('data数据')
当get时,open中的url拼好参数,send中不传参数
当post时,open中url不带参数,send传入参数
4.使用onreadystatechange监听返回的状态
xhr.onreadystatechange = function(){
if (request.readyState==4 && request.status==200)
{
//responseText就是后台服务器发送给前端的json对象字符串,我们需要将它转换成json对象
var jsonStr = JSON.parse(request.responseText);
//公司里,要请求接口,后台人员会提供接口文档给你,你要请求什么页面,要传什么参,以什么方式,有什么返回值
if(jsonStr.status == 'success'){
document.write('不错')
}else if(jsonStr.status == 'fail'){
document.write('失败了,有可能是参数错了哦,请检查')
}
}
}
}

<script>
            function show(){
                //192.168.1.248
            //ajax是局部刷新技术
            //第一步,创建xmlhttpRequest
             var request=new XMLHttpRequest(); 
            //第二步,建立请求
            request.open('get','http://81.71.8.206/ajax/hello.php') //告诉浏览器以get方式去请求hello.php后台这个页面
            //第三步,发送请求
            request.send() //发送请求
            //第四步,处理后台返回的数据
            request.onreadystatechange=function(){
                if (request.readyState==4 && request.status==200)
                    {
                        //responseText就是后台服务器发送给前端的json对象字符串,我们需要将它转换成json对象
                        var jsonStr = JSON.parse(request.responseText);
                        //公司里,要请求接口,后台人员会提供接口文档给你,你要请求什么页面,要传什么参,以什么方式,有什么返回值
                        if(jsonStr.status == 'success'){
                            document.write('不错')
                        }else if(jsonStr.status == 'fail'){
                            document.write('失败了,有可能是参数错了哦,请检查')
                        }
                    }
            }
            }
        </script>
上一篇 下一篇

猜你喜欢

热点阅读