XHR笔记

xhr的使用

        //创建xhr
        var xhr =new XMLHttpRequest();
        //调用open函数
        xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
        //调用send函数
        xhr.send()
        //监听onreadystatechange
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){   //请求数据成功
        
            }
        }

xhr.readyState值的意义

带参数的get请求

       xhr.setRequestHeader( 'Content-Type','application/x-www-form-urlencoded')

多个参数用&分隔 参数后面直接加值 参数=值 不用加""

 每个字占3组%

JSON 格式  属性名加双引号“”    字符串的形式 只能包括 数字，字符，对象，数组，布尔型，null

    var jsonStr = '{"a": "Hello", "b": "world"}'

 JSON—>JS

JSON.parse(要改变的数据）

JS—>JSON

JSON.stringify(要改变的数据)

创建form对象

        var form=new FormData()  创建一个form对象
        form.append("uname",'aa')        向form中添加数据
        form.append("upwd",'1234')
       var xhr=new XMLHttpRequest();
       xhr.open('post','http://www.liulongbin.top:3006/api/formdata')
       xhr.send(form)    将数据上传

    不需要   xhr.setRequestHeader( 'Content-Type','application/x-www-form-urlencoded')

loaded=下载了的长度  total=总长度

关键属性 contentType   processData 

 ajax开始与结束  

只能附加到文档document上

document.ajaxStart(callback)   document.ajaxStop(callback)

            $(document).ajaxStart(function(){
                $('#img').show()
            })
            $(document).ajaxStop(function(){
                $('#img').hide()
                
            })

 

 

 get不加data   post不加params