zoukankan      html  css  js  c++  java
  • 封装好的Ajax

    /*
    注意:
    1、检查提交方式类型:get/post是否和后台一致(该类型接口文档会标注,若一致仍然报错,请与后台再次确认)
    2、检查接口url是否写错
    3、检查接口是否需要传数据到后台,若需上传,便仔细把自己上传的数据和接口文档上对比,
    观察有没有错写、多写、少写,数据格式是否正确(一般和后台人员确认一下要传什么数据格式),观察上传的值是否会出现undefined
    4、若以上都正确了还是报错,那么便让后台人员看看是否是后台程序出错(一般http状态码返回500就是后台程序出错,但是也不排除是前端传递过去的数据不对导致后台报错)
    6、如果出现跨域问题,就找后台解决

    */

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>ajax封装</title>
        </head>
        <body>
            <!-- ajax:异步的javascript和XML,能够向服务器请求额外的数据而无需卸载页面,会带来更好的用户体验,包含XML但与ajax通信与数据格式无关 -->
            <!-- ajax核心:XMLHttpRequert对象(简称XHR);request(请求) -->
            <script type="text/javascript">
                // 封装
                function ajax(method,_url,data,fun) {
                    // 1、定义一个xhr变量存放ajax对象
                    var xhr;
                    // 2、当window对象里面存在XMLHttpRequest时
                    if (window.XMLHttpRequest) {
                        // 实例化一个XMLHttpRequest()构造函数
                        xhr = new XMLHttpRequest();
                    } else {
                        // 为防止一些浏览器中没有XMLHttpRequest
                        // 当window对象里面没有XMLHttpRequest时就实例化一个ActiveXObject()构造函数
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                    }
    
                    // 3、使用XHR时要调用open(a1,a2,a3);方法a1:请求类型,a2:请求的url,a3:是否发送异步请求(ture/false)
                    xhr.open(method,_url,true);
                    
                    // 4、send();请求在主体发送的数据
                    // 发送请求如果需要发送到服务器的端的数据,那么send(data) ,data:数据 需转换为字符串类型的
                    xhr.send(JSON.stringify(data));
                    //当readyState值每发生一次变化就调用一次onreadystatechange方法
                    xhr.onreadystatechange = function() {
                        // readystate为4代表已经接收全部响应数据,并且已经可以在客户端使用
                        if (xhr.readyState == 4) {
                            // readystate:状态为200时表示请求已经完全成功
                            if (xhr.status == 200) {
                                // responseText:作为响应主体被返回的文本
                                // JSON.parse():将字符串json转换为数组类型的json
                                // 把返回的数据responseText从string转换为JSON数据格式并打印出来
                                fun(JSON.parse(xhr.responseText));
                            }
                        }
                    }
                }
                
                
                // 调用封装好的函数
                ajax("get","http://192.168.95.237:81/ajaxapi/public/index.php/api/api/index",null,function(data){
                    document.body.innerHTML=data.code;
                });
                
                // post提交
                var data={
                    stuid:"1027"
                }
                ajax("post","http://192.168.95.237:81/ajaxapi/public/index.php/api/api/selectuserid",data,function(data){
                    document.body.innerHTML=data.code;
                });
                
                
                /* 
                    注意:
                        1、检查提交方式类型:get/post是否和后台一致(该类型接口文档会标注,若一致仍然报错,请与后台再次确认)
                        2、检查接口url是否写错
                        3、检查接口是否需要传数据到后台,若需上传,便仔细把自己上传的数据和接口文档上对比,
                            观察有没有错写、多写、少写,数据格式是否正确(一般和后台人员确认一下要传什么数据格式),观察上传的值是否会出现undefined
                        4、若以上都正确了还是报错,那么便让后台人员看看是否是后台程序出错(一般http状态码返回500就是后台程序出错,但是也不排除是前端传递过去的数据不对导致后台报错)
                        6、如果出现跨域问题,就找后台解决
                 
                 */
            </script>
        </body>
    </html>
  • 相关阅读:
    vim复制
    嵌入式Linux学习(二)
    (Java实现) 洛谷 P1042 乒乓球
    (Java实现) 洛谷 P1042 乒乓球
    (Java实现) 洛谷 P1071 潜伏者
    (Java实现) 洛谷 P1071 潜伏者
    (Java实现) 洛谷 P1025 数的划分
    (Java实现)洛谷 P1093 奖学金
    (Java实现)洛谷 P1093 奖学金
    Java实现 洛谷 P1064 金明的预算方案
  • 原文地址:https://www.cnblogs.com/xiaozhou223/p/11473699.html
Copyright © 2011-2022 走看看