纯Js实现ajax

更新日期: 2019-04-18 阅读: 4.2k 标签: ajax

这是一个纯js向后台进行post请求的前端实现,未考虑考虑的问题。

1.创建对象,并兼容各种浏览器

2.请求数据,这里写了两种方法,方法一最开始写的,但是后来发现灵活性不够,于是就写了第二个方法。至于怎么传递参数到服务器,我原来的做法是拼接在请求地址后面的。其实也可以XMLHttpReq.send(null);放在这里,就是null替换成参数,比如 user=bill&pc=hw .

3.请求数据,成功后就会执行回调函数,回调函数里会收到服务器返回的数据,在回调函数里可以对数据进行处理,完成自己的要求。


1.创建对象 

var XMLHttpReq;
var _XMLHttpReq;
 function createXMLHttpRequest() {
     try {
         XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");//IE高版本创建XMLHTTP  
     }
     catch (E) {
         try {
             XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE低版本创建XMLHTTP  
         }
         catch (E) {
             XMLHttpReq = new XMLHttpRequest();//兼容非IE浏览器,直接创建XMLHTTP对象  
         }
     }
    _XMLHttpReq=XMLHttpReq;
 }


向服务器进行请求,并执行调用回调函数,两种方法

//方法1  固定的回调处理  主要用在同步场景
function sendAjaxRequest(url,Sys) {
     createXMLHttpRequest();                                //创建XMLHttpRequest对象  
     XMLHttpReq.open("post", url, Sys);
     XMLHttpReq.onreadystatechange = processResponse; //指定响应函数  
     XMLHttpReq.send(null);
 }
//方法2  灵活的回调处理  同步异步皆可
 function sendAjaxRequestFunc(url, Sys, func) {
     createXMLHttpRequest();                                //创建XMLHttpRequest对象  
     XMLHttpReq.open("post", url, Sys);
     XMLHttpReq.onreadystatechange =func; //指定响应函数  
     XMLHttpReq.send(null);
 }


固定的回调

var _textReponse;
 function processResponse() {
     if (XMLHttpReq.readyState == 4) {
         if (XMLHttpReq.status == 200) {
             _textReponse = XMLHttpReq.responseText;
            
         }
     }
 }
//调用1 得到结果 _textReponse  在进行处理
sendAjaxRequest(‘xxx/xxx‘, false);

//调用2
sendAjaxRequestFunc(‘xx/xx‘, false, doSth);
function doSth(){
 if (_XMLHttpReq.readyState == 4) {
           if (_XMLHttpReq.status == 200) {
              //得到结果进行处理
               var data =_XMLHttpReq.responseText;

            }
      }
}



本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/2933

相关推荐

js 判断异步执行完成方法总汇,比如多个ajax执行完毕后执行其他方法

在多个异步操作中,由于不确定异步操作的执行顺序,如何判断异步操作在已经执行完成的情况下,再执行一个新的操作,有哪些方法可以实现?

Vue通过ajax获取数据,如何避免绑定的数据中出现 property of undefined错误

使用vue开发过程中,通过使用{{}}或者v-text=的形式进行数据绑定,如果数据是通过服务器异步获取的。在控制台我们会发现报这样的错误:Uncaught TypeError: Cannot read property name of null。通过v-if或者空对象来解决

Content-Type属性的取值和作用

Content-Type 的值类型:application/json:消息主体是序列化后的 JSON 字符串,application/x-www-form-urlencoded:数据被编码为名称/值对。这是标准的编码格式

如何等待ajax完成再执行相应操作

ajax广泛应用于异步请求,对于大多数业务来说,这是十分方便的,但对于一些特殊的业务,ajax的异步性会起到相反的作用。例如在ajax请求成功后,后续的操作需要依赖ajax执行成功后的相应操作。

使用Ajax同步请求时,等待时间过长增加页面提示问题

后台的处理时间比较长,根据合同的多少可能等待时间比较长,会达到10s左右,这个时候如果不加任何的提示,会导致用户因为没有看到是否执行而导致重复的操作,为了增加用户的体验感,以及项目的完善性,这个时候就需要增加一个等待页面进行提示。

ajax请求中的contentType和dataType

contentType设置你发送给服务器的格式,有以下三种常见情况。application/x-www-form-urlencoded :默认值,application/json:服务端消息主体是序列化后的 JSON 字符串。

解决ajax跨域访问sessionid不一致问题

根据浏览器的保护规则,跨域的时候我们创建的sessionId是不会被浏览器保存下来的,这样,当我们在进行跨域访问的时候,我们的sessionId就不会被保存下来,也就是说,每一次的请求服务器就会以为是一个新的人

ajax的优缺点

ajax异步的js和XML:以前更多的是使用XML的数据格式,现在数据格式更多的是json.;ajax的优势:单页面应用(SPA)无刷新更新数据(局部刷新);异步与服务器通信

Ajax异步请求

其实我理解前端如何通过url从后端获取数据,对于异步请求Ajax一直表示有点迷惑,所谓不尝试和不探索,光靠看概念你是永远不能理解代码的魅力的,正好公司的项目里用到了最经典的Ajax,正好作为一个案例来学习如何用json的Data

使用AJAX实现文件拖拽上传功能详解

前端选择文件上传的两种方式:对话框选择方式上传、拖拽选择方式上传;如何上传获取到的文件?使用AJAX即可通过表单方式上传文件。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!