实现ajax发送异步请求方法

这次给大家带来实现ajax发送异步请求方法,实现ajax发送异步请求的注意事项有哪些,下面就是实战案例,一起来看一下。

ajax发送异步请求,供大家参考,具体内容如下

第一步(得到XMLHttpRequest)

ajax其实只需要学习一个对象:XMLHttpRequest,如果掌握了它,就掌握了ajax!!!

1.得到XMLHttpRequest

大多数浏览器都支持:var xmlHttp=new XMLHttpRequest();
IE6.0:var xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
IE5.0以更早版本的IE:var xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);

2.编写创建XMLHttpRequest对象的函数

function createXMLHttpRequest(){     try{     return new XMLHttpRequest();     } catch(e){     try{     return new ActiveXObject(“Msxml2.XMLHTTP”);    }catch(e){     try{      return new ActiveXObject(“Microsoft.XMLHTTP”);     }catch(e){       alert(“哥们儿,你用的是什么浏览器啊?”);       throw e;    }    }     } }

登录后复制

第二步(打开与服务器的连接)

xmlHttp.open():用来打开与服务器的连接,它需要三个参数:   

请求方式:可以是GET与POST
请求的URL:指定服务器端资源,例如:/day23_1/AServlet
请求是否为异步:如果为true表示发送异步请求,否则同步请求

xmlHttp.open(“GET”,”/day23_1/AServlet”,true);//比如

第三步(发送请求)

xmlHttp.send(null):如果不给可能会造成部分浏览器无法发送! 

      参数:就是请求体内容!如果是GET请求,必须给出null。
      如果是POST请求,如下

xmlHttp.send(“username=zhangSan&password=123”);

第四步:

在xmlHttp对象的一个事件上注册监听器:onreadystatechange
xmlHttp对象一共有5个状态

0:初始化未完成状态,只是创建了XMLHttpRequest对象,还未调用open()方法
1:请求已开始,open()方法已调用,但还没调用send()方法
2:请求发送完成状态,send()方法已调用
3:开始读取服务器响应
4:读取服务器响应结束(通常我们只关心最后这个状态!!!)

得到xmlHttp对象的状态

var state = xmlHttp.readyState;//可能是0、1、2、3、4

登录后复制

得到服务器响应的状态码(200:成功 304:状态没有改变 404 500:服务器错误)

var status=xmlHttp.status;//例如200、404、500

登录后复制

得到服务器响应的内容

var content=xmlHttp.responseText;//得到服务器的响应的文本格式的内容(这更通用)var content=xmlHttp.responseXML;//得到服务器的响应的xml响应的内容,它是document对象了!

登录后复制

所以监听器应该这样写

xmlHttp.onreadystatechange = function(){  //xmlHttp的5种状态都会调用本方法    if(xmlHttp.readyState ==4 && xmlHttp.status == 200){  //双重判断:判断是否为4状态,而且还要判断是否为200      var text=xmlHttp.responseText;     } };

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

vue-cli+sass使用详解

Date对象怎么做出倒计时功能

以上就是实现ajax发送异步请求方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2771864.html

(0)
上一篇 2025年3月8日 13:05:42
下一篇 2025年3月8日 13:05:48

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • AFN封装网络请求详解

    这次给大家带来AFN封装网络请求详解,AFN封装网络请求的注意事项有哪些,下面就是实战案例,一起来看一下。 相信大家都知道,我们一般在一个项目中,网络请求都封装成一个单例,以确保整个项目的网络请求 Session 是同一个. 单例模式定义:…

    编程技术 2025年3月8日
    200
  • 源生JS怎样实现文件异步上传

    这次给大家带来源生js怎样实现文件异步上传,源生js实现文件异步上传的注意事项有哪些,下面就是实战案例,一起来看一下。 名称文件确定 function ajaxUploadFile() { var formData = new FormDa…

    编程技术 2025年3月8日
    200
  • 原生ajax的get和post方法使用详解

    login.onclick = function(){var xhr = new XMLHttpRequest();xhr.open(“get”,”http://localhost/ajax2/test2.php?username=”+us…

    编程技术 2025年3月8日
    200
  • Promise实现异步

    这次给大家带来Promise实现异步,Promise实现异步的注意事项有哪些,下面就是实战案例,一起来看一下。 为了保证可读性,本文采用意译而非直译,并且对源代码进行了大量修改。另外,本文版权归原作者所有,翻译仅用于学习。 使用Promis…

    编程技术 2025年3月8日
    200
  • vue-resouce怎么设置请求头

    这次给大家带来vue-resouce怎么设置请求头,vue-resouce设置请求头的注意事项有哪些,下面就是实战案例,一起来看一下。 第一种:在Vue实例中设置 var vm = new Vue({ el:’#rrapp’, data:{…

    编程技术 2025年3月8日
    200
  • vue proxyTable怎么实现接口跨域请求调试

    这次给大家带来vue proxyTable怎么实现接口跨域请求调试,vue proxyTable实现接口跨域请求调试的注意事项有哪些,下面就是实战案例,一起来看一下。 在不同域之间访问是比较常见,在本地调试访问远程服务器。。。。这就是有域问…

    编程技术 2025年3月8日
    200
  • Ajax使用原理分析

    这次给大家带来Ajax使用原理分析,Ajax使用的注意事项有哪些,下面就是实战案例,一起来看一下。 其实AJAX内部实现并不麻烦,主要通过一个叫XMLHttpRequest的对象,而这个对象在现有的浏览器均被支持。 可以说,它是整个AJAX…

    编程技术 2025年3月8日
    200
  • vue+axios制作登录请求拦截

    这次给大家带来vue+axios制作登录请求拦截,vue+axios制作登录请求拦截的注意事项有哪些,下面就是实战案例,一起来看一下。 当我们在做接口请求时,比如判断登录超时时候,通常是接口返回一个特定的错误码,那如果我们每个接口都去判断一…

    编程技术 2025年3月8日
    200
  • vue实现减少对服务器请求次数

    这次给大家带来vue实现减少对服务器请求次数,vue实现减少对服务器请求次数的注意事项有哪些,下面就是实战案例,一起来看一下。 下面看下通过vue提供的keep-alive减少对服务器的请求次数 VUE2.0中提供了一个keep-alive…

    编程技术 2025年3月8日
    200
  • Postman发送token请求

    这次给大家带来Postman发送token请求,Postman发送token请求的注意事项有哪些,下面就是实战案例,一起来看一下。 Postman模拟发送带token的请求方法 1)google浏览器中安装扩展程序Interceptor 2…

    2025年3月8日
    200

发表回复

登录后才能评论