zoukankan      html  css  js  c++  java
  • 原生JS 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;
    
                }
          }
    
    }
  • 相关阅读:
    layui动态修改select的选中项
    layui 鼠标悬停单元格显示全部
    使用LayUI操作数据表格
    layer.msg 弹出不同的效果的样式
    layer父页面刷新
    layui 获取radio单选框选中的值
    使用Dapper.Contrib
    微信公众号的文章爬取有三种方式
    centos的 各种安装包下载位置
    git pull一直弹出vim编辑器
  • 原文地址:https://www.cnblogs.com/zyskr/p/10732577.html
Copyright © 2011-2022 走看看