zoukankan      html  css  js  c++  java
  • 原生javascript封装ajax

    目的:

      用原生js封装自己的ajax,可以在返回响应时根据项目发送统一的数据请求和根据接口返回的响应处理统一的内容,也可以增加自己的特殊功能,如,在加上loading功能等等。

    工作原理:

      核心对象(XMLHttpRequest对象):它是XML里DOM技术中的一个重要对象。它提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。可以同步或异步地返回 Web 服务器的响应,并且能够以文本或者一个 DOM 文档的形式返回内容。它并不限于和 XML 文档一起使用:它可以接收任何形式的文本文档。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    使用步骤:

      1,创建XMLHTTPRequest对象,如

    1 var xhr = new XMLHttpRequest()

      2,使用open方法设置和服务器的交互信息,如:其中options.type为请求方式:“post”或者“get”;options.url:发送的地址;options.async:请求是否异步处理(true:异步,false:同步)

    1 xhr.open(options.type, options.url, options.async);

      3,设置响应HTTP请求状态变化的函数

    状态名称描述
    0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
    1 Open open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。
    2 Sent Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。
    3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。
    4 Loaded HTTP 响应已经完全接收。

      4,设置发送的数据,开始和服务器端交互

    1 xhr.send();

      5,接收返回数据

      6,使用JavaScript和DOM实现局部刷新

     

           代码地址:https://gitee.com/wxwphp/myAjax

  • 相关阅读:
    ReaHat7.6/7.7 最小化安装更新yum源
    Navicat Premium For Mac 12.0.2x 破解教程
    java程序员经常使用的Intellij Idea插件
    NDK版本 下载地址
    在Intellij IDEA下用X-debug调试PHP
    DMSFrame 之查询表达式用法(一)
    Wise 打包细节
    将Centos的yum源更换为国内的阿里云(163)源
    Centos下安装 .net Core运行程序
    使用 Docker 一步搞定 ZooKeeper 集群的搭建
  • 原文地址:https://www.cnblogs.com/wxw1314/p/8568882.html
Copyright © 2011-2022 走看看