原生JavaScript实现ajax异步请求代码

本文介绍了如何在不使用jQuery的情况下,利用原生JavaScript实现AJAX异步请求,包括XMLHttpRequest对象的使用、基本方法以及详细的步骤。通过示例代码展示了如何发送POST请求并处理响应头。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

jQuery封装了JavaScript的一些常用方法,而jQuery中的$ajax(),$get(),$post()是比较常用的方法,也是大家最熟悉,最常用的,但是在面试时,通常面试官,会要求你手写原生ajax异步请求的代码,此时即便你的jquery学的再好,也是无济于事的。所以下面我将分享ajax异步请求的原生js代码,希望对你有所帮助

1.XMLHttpRequest对象:

XMLHttpRequest 对象用于在后台与服务器交换数据,他可以:

1) 在不重新加载页面的情况下更新网页

2) 在页面已加载后从服务器请求数据

3) 在页面已加载后从服务器接收数据

4) 在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。

2.XMLHttpRequest的方法:

XMLHttpRequest对象的方法不多,下面是一些最基本的方法:

a. abort():停止发送当前请求。

b. getAllReponseHesders():获取服务器返回的全部响应头。

c. getReponseHesders(“headersLabel”):根据响应头名字,获取对应的响应头。

d. Open(“method”,url,“[,asyncFlag[,“username“[,”password“]]]”):与服务器建立url连接,并设置请求方法提供信息。

e. Send(content):发送请求,content是请求参数。

f. setRuestHeader(”label“,”value“):在发送请求前先设置请求头。

3.原生ajax代码步骤:

1) 定义XMLHttpRequest对象

2) 与服务器建立连接

3) 发送请求

4) 接受来自服务器的信息并处理

4.原生ajax代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
 <script src="ajax.js"></script>
  <script type="text/javascript">
  window.onload = function(){
    var xmlrequest;
    //完成XMLHttpRequest初始化
    function creatXMLHttpRequest(){
      if(window.XMLHttpRequest){ //判定兼容性
        xmlrequest= new XMLHttpRequest(); //Dom2浏览器
      }
      else if(window.ActiveXObject){  //IE浏览器
        try{
          xmlrequest= new ActiveXObject("msxml2.XMLHTTP");
        }catch(e){
          try{
            xmlrequest= new ActiveXObject("Microsoft.XMLHTTP");
          }catch(e){}
        }
      }
    }
    function change(url){//接受请求响应的URL
      creatXMLHttpRequest();
      xmlrequest.open("POET",url,true);//连接服务器
      xmlrequest.setRequestHeader("content-Type","applicaion/x-www-form-urlencoded");
      //设置请求头编码方式
      xmlrequest.onreadystatechange = processResponse;
      xmlrequest.send(null);  //发送请求
    }
    //定义处理响应的回调函数
    function processResponse(){
      if(xmlrequest.status ==4){
        if(xmlrequest.status ==200){  //请求成功
          var headers = xmlrequest.getAllResponseHeaders();
          alert("响应头类型"+typeof headers+"\n"+headers);
          document.getElementById('odiv').innerHTML = headers;   //请求成功后要做的事情
        }
        else{
          window.alert("请求页面有异常");
        }
      }
    }
}
  </script>
 </head>
 <body>
  <div id="odiv"></div>
 </body>
</html>


上述代码中,系统采用post方法发送请求,当请求得到响应后,使用getAllResponseHeaders()方法获取所有的请求头,并将其输出,当然这里可以做其他的事情。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值