/*
注意：
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>

封装好的Ajax的更多相关文章

  1. 不借助jquery封装好的ajax，你能用js手写ajax框架吗

    不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...

  2. 封装通用的 ajax， 基于 jQuery。

    在前端异步获取数据时候每次都是使用 ajax:为了通用性更好,然而封装通用的 ajax 是一个一劳永逸的办法. 本次基于 jQuery 封装实现: 第一步: 引入 jQuery: <script ...

  3. 封装、调用ajax

    1.JavaScript代码 //封装ajaxfunction ajax(obj) { var xhr = new createXHR(); obj.url = obj.url + '?rand=' ...

  4. 封装JavaScript的AJAX

    // 创建request对象 function createXMLHttpRequest() { try { return new XMLHttpRequest();//大多数浏览器 } catch ...

  5. 封装自己的Ajax框架

    Ajax技术就是利用javascript和xml实现异步交互的功能. 首先先来介绍一下Ajax相关知识点 一.Ajax对象的创建 1.创建Ajax对象的方式 a.第一种方式是针对IE浏览器 b.第二种 ...

  6. AJAX的来龙去脉（由来）-如何被封装出来的--ajax发送异步请求（四步操作）

    <黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打 ...

  7. 使用es6的then()方法封装jquery的ajax请求

    使用场景: jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了. 示 ...

  8. 封装JS实现Ajax

    这两天仔细理解了一下Ajax,然后整理封装了一下,如果有什么不对的地方,请指教,谢谢! AJAX AJAX = Asynchronous JavaScript and XML(异步的 JavaScri ...

  9. 超简单 Promise封装小程序ajax 超好用 以及封装登录

    //网络类 //封装网络请求 const ajax = (ajaxData, method) => { wx.showLoading({ title: '加载中', mask: true }); ...

  10. 封装springmvc处理ajax请求结果

    原文链接:http://blog.csdn.net/qq_37936542/article/details/79064818 需求描述:ajax向后台发起请求,springmvc在处理完请求后返回的结 ...

随机推荐

  1. Android 网络请求Retrofit + RxJava

    一.背景 经常看到项目用Retrofit+RxJava+RxAndroid的框架,为了看懂项目的结构.现在来了解一下,Retrofit: Retrofit是Square 公司开发的一款正对Androi ...

  2. LC 794. Valid Tic-Tac-Toe State

    A Tic-Tac-Toe board is given as a string array board. Return True if and only if it is possible to r ...

  3. ant-pro使用Form表单验证上传图片出现的问题

    1.复现:用antd的Form表单验证上传图片必填项时出现问题:复现过程,先提交,提示图片需要上传,上传成功后,依旧提示:图片未上传 2.表单验证原理:先理解一下antd的Form表单验证的表层原理, ...

  4. Android之MVVM开发模式

    MVVM 模式简介 MVVM模式是指Model-View-ViewModel.相信看过笔者关于MVP的文章的读者也会发现,无论如何抽象化,在我们的View层中是无法避免的要处理一部分逻辑的.而MVVM ...

  5. numpy基本方法总结

    NumPy基本方法 一.数组方法 创建数组:arange()创建一维数组:array()创建一维或多维数组,其参数是类似于数组的对象,如列表等 读取数组元素:如a[0],a[0,0] 数组变形:如b= ...

  6. 安装win10提示“我们无法创建新的分区，也找不到现有分区”

    用U盘安装操作系统,但是遇到了这种问题. 出现这种情况可能是硬盘格式通过指令写死了,所以我们需要通过指令把格式清零, 补充: 其实系统找不到系统分区这种情况其实就是引导程序出了问题,可以用大白菜这种w ...

  7. JVM学习笔记之初识JVM(三)

    一.JVM在计算机中的位置 JVM调用操作系统,操作系统调用硬件,硬件反馈信息至操作系统,操作系统反馈信息至JVM 二.JVM的体系结构 JVM在执行过程中对内存的管理分为5个区域: 1.PC寄存器 ...

  8. redis基础学习---1

    5.1.xshell传输文件命令快捷键:alt+p 2.当运行一个程序时,想退出按ctrl+c退出 3.给用户权限:chmod 777 redis.conf 另一种方式:chmod –x 4. 5.查 ...

  9. Spring Boot默认日志logback配置解析

    前言 今天来介绍下Spring Boot如何配置日志logback,我刚学习的时候,是带着下面几个问题来查资料的,你呢 如何引入日志? 日志输出格式以及输出方式如何配置? 代码中如何使用? 正文 Sp ...

  10. JavaScript异步与Promise基本用法(resolve与reject)

    Promise解决的问题相信每个前端都遇到过这样一个问题,当一个异步任务的执行需要依赖另一个异步任务的结果时,我们一般会将两个异步任务嵌套起来,这种情况发生一两次还可以忍,但是发生很多次之后,就形成了 ...