ajax

最新推荐文章于 2022-06-19 13:50:53 发布

w327690

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量53

点赞数

本文链接：https://blog.csdn.net/w327690/article/details/98723372

版权

AJAX包括以下几个步骤：

使用原生的XMLHttpRequest对象发出HTTP请求
得到服务器返回XML格式的字符串（）
JS解析XML，并更新局部页面

语法
XMLHttpRequest对象
用来在浏览器与服务器之间传送数据。
1.var ajax = new XMLHttpRequest();
2.ajax.open(‘GET’, url, true);
// 向指定的服务器网址，发出GET请求。

readyState
表示XMLHttpRequest请求当前所处的状态。
readyState === 4 表示整个请求过程已完毕

onreadystatechange
指向回调函数，监听通信状态（readyState属性）的变化。

responseText
返回从服务器接收到的字符串，如果本次请求没有成功，该属性就会等于null

封装ajax（）方法

<body>
    <div id="box"></div>
    <script src="ajax.js"></script>
    <script>
        var url='http://localhost:4000'
        var data='username=jake&pwd=111'
         
        // GTE 无参
        ajax('GTE',url)

         // GTE 有参
         ajax('GTE',url,data)

         //POST 无参
         ajax('POST',url)

         //POST 有参
         ajax('POST',url,function(res){
             var per=JSON.parse(res)
             document.querySelector('#box').innerHTML=`用户名：${per.name},密码：${per.pwd}`
         },data)
    </script>
</body>

function ajax(method,url,fn,parms){
   var xhr=new XMLHttpRequest()
   method=method.toUpperCase();
   if(method=="GTE"&&parms!=undefined){
       url=url+'?'+parms
   }
   xhr.open(method,url,true)
   if(method=="POST"&&parms!=undefined){
       xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
       xhr.send(parms)
   }else{
       xhr.send(null)
   }
   xhr.onreadystatechange=function(){
       if(xhr.readyState==4){
           fn(xhr.responseText)
       }
   }
}

w327690

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax

AJAX包括以下几个步骤：使用原生的XMLHttpRequest对象发出HTTP请求得到服务器返回XML格式的字符串（）JS解析XML，并更新局部页面语法XMLHttpRequest对象用来在浏览器与服务器之间传送数据。1.var ajax = new XMLHttpRequest();2.ajax.open(‘GET’, url, true);// 向指定的服务器网址，发出GE...
复制链接

扫一扫

ajax

“相关推荐”对你有帮助么？