Ajax的核心技术XMLHttpRequest方法

2023-11-14

整个Ajax技术紧紧围绕在XMLHttpRequest对象的周围,Ajax整个技术的过程如下:XMLHttpRequest发送请求,在与服务器交互中,其readyState状态可以监听到服务器

的响应状态,当服务器的响应完成的时候,XMLHttpRequest负责解析服务器响应,获取到响应之后,解析出响应的数据,通过DOM操作来加载服务器的响应。

XMLHttpRequest方法
        abort():停止发送当前请求
        getAllResponseHeader():获取服务器返回的的全部响应头
        getResponseHeader("headerLabel"):根据响应头的名字获取对应的响应
        open("method","URL"[,asyncFlag[,"userName"[,"password"]])
          建立连接,设置方法和是否使用异步请求。用户名及密码
        send(content):发送请求
        setRequestHeader("label","value"):发送请求前,先设置请求头
         
XMLHttpRequest 属性
        onreadystatechange :用于指定XMLHttpRequest对象状态变化时的事件处理函数
        readyState : XMLHttpRequest对象的处理状态
        responseText :用于获取服务器的响应文本
        responseXML :用于获取服务器响应的XML文档对象
        status :服务器返回的状态码
        statusText :服务器返回的状态文本信息
           
XMLHttpRequest 对象状态(readyState)
         0 对象还没有完成初始化
         1 对象开始发送请求
         2 对象的请求发送完成
         3 对象开始读取服务器的响应
         4 对象读取服务器响应结束
           
  服务器响应有很多种,通过XMLHttpResponse对象的status和statusText属性都可以判断服务器响应是否正常。只有当服务器响应正常时,js才应该读取服务器响应信息。

  服务器常用状态码如下。
        200 :服务器响应正常
        304 :该资源在上次请求后没有任何修改,通常用于浏览器的缓存机制
        400 :无法找到请求的资源
        401 :访问资源的权限不够
        403 :没有权限访问资源
        404 :需要访问的资源不存在
        405 :需要访问的资源被禁止
        407 : 访问的资源需要代理身份验证
        414 :请求的URL太长
        500 :服务器内部错误
当readyState的值为4时,响应完成;当status的值为200时,服务器响应正确。

  发送请求步骤:
    初始化XMLHttpRequest对象
    打开连接:确定发送请求的方法:GET或POST,以及是否采用异步方式
    设置XMLHttpRequest状态改变时的事件处理函数
    发送请求,如采用POST方法发送,可发送带参数的请求
  创建XMLHttpRequest对象
        function createXHR(){
          if(window.XMLHttpRequest){
            xhr=new XMLHttpRequest();
          }else if(window.ActiveXObject){
                   xhr=new ActiveXObject("Microsoft.XMLHttp");
          }else return null;
        }

open()通常有三个参数:方法(get或post)、url、设置是否异步(TRUE或FALSE)

GET和POST
  GET请求用于从服务器上获取数据;将参数数据转换成一个字符串,并将字符串添加到请求的服务器程序URL之后
  POST请求用于向服务器发送数据;通过HTTP POST机制将请求的参数以及对应的值放在HTML HEADER中传输,用户看不到明码的请求参数值。
  通常在传输请求参数时,建议使用POST请求

发送POST请求
  使用open方法打开连接时,指定使用POST方法发送请求
  设置正确的请求头,POST请求通常应设置Content-Type请求头
  发送请求,请求参数可以在send方法中确定 “xmlRequest.send("id="+id);”
即使没有请求参数,使用send方法时,也一定要为其传入null参数。

发送XML请求
  xml请求实质还是post请求,只是在发送请求的时侯将请求参数封装成XML字符串形式,服务器端则负责解析该字符串
  客户端页面需要增加一个方法来创建xml字符串(如createXML()),将字符串作为send的参数“send(createXML())”
  服务器端:// 定义一个StringBuffer对象来接受请求参数
            StringBuffer xmlBuffer=new StringBuffer();
            String line=null;
            //通过request对象获取输入流
            BufferReader reader=request.getReader();
            //依次读取请求输入流的数据
            while((line=reader.readeLine())!=null){
              xmlBuffer.append(line);
            }
            //将输入流中读取的内容转换为字符串
            String xml=xmlBuffer.toString();
            //以DOM4J方式解析xml字符串
            Document xmlDoc=new XPPReader().read(new ByteArrayInputStream(xml.getBytes()));
            ......

处理服务器相应
  处理的时机
   if(xmlRequest.readyState==4&&(xmlRequest.status==200||
      xmlRequest.status==304)){
      ..........
      }

  responseText与responseXML
     文本响应:客户端需要自己分析字符串,并将字符串解析成更加复杂的形式
     xml响应:借助浏览器解析xml文档的能力。
            var xmldoc=xmlrequest.responseXML

  XMLHttpRequest对象的运行周期
   step 1 创建一个XMLHttpRequest实例,然后用它来发送请求,这种请求可以是GET方式,也可以是POST
   step 2 XMLHttpRequest发送后,服务器的响应何时到达、核实处理需要借助js的事件机制。XMLHttpRequest能触发的事件是onreadystatechange,
          当XMLHttpRequest对象的状态改变是,将触发XMLHttpRequest对象指定的onreadystatechange事件(为其绑定回调函数)
   step 3 readyState==4&&(xmlRequest.status==200||xmlRequest.status==304)时,可以开始处理服务器响应
   step 4 触发回调函数
   step 5 回调函数需借助XMLHttpRequest来解析服务器响应,当调用responseText或responseXML获取服务器响应后,XMLHttpRequest对象的运行周期结束
   step 6 js处理服务器响应

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Ajax的核心技术XMLHttpRequest方法 的相关文章

  • IE 中带有“删除”方法的 jQuery.ajax 问题

    我有一个页面 用户可以使用按钮编辑各种内容并选择触发 ajax 调用 特别是 一个操作会导致远程调用一个 url 其中包含一些数据和 放置 请求 这 因为我使用的是宁静的 Rails 后端 会触发我的更新操作 我还有一个删除按钮 它调用相同
  • 在 Struts2 中使用 AJAX 根据另一个选择菜单填充一个选择菜单

    我第一次尝试在 Struts2 中使用 AJAX 因此 我对此没有确切的想法 那里有两个
  • Javascript/jQuery 变量未给出预期值

    和我之前的其他人一样 我也在 Javascript 的范围内苦苦挣扎 那并试图阅读该死的东西 我已经检查了关于这个问题的一些先前的线程 但我似乎无法让它们正确地应用于我的问题 在下面的示例中 我想操纵中的值tagsArr数组 一旦数组已完全
  • 如何将从 MySQL 获取的数据以 JSON 形式返回到 php 文件中?

    我必须将从 MySQL 表中获取的数据作为 JSON 返回到 php 文件中 这是我连接到 mysql 并从中获取数据的代码 现在我怎么能将它作为 JSON 返回呢
  • 通过 HTTPS 加载页面但请求不安全的 XMLHttpRequest 端点

    我有一个页面 上面有一些 D3 javascript 该页面位于 HTTPS 网站内 但证书是自签名的 当我加载页面时 我的 D3 可视化效果不显示 并且出现错误 混合内容 页面位于 https integration jsite com
  • 使用ajax发送表单数据

    我想用 ajax 以表单形式发送所有输入 我有一个这样的表单
  • php循环中的ajax在按钮单击时执行操作

    所以我有一个 php 循环 我使用 jquery 滑动切换来隐藏 显示带有 sql 结果的表 目前该表仅使用 php 加载 但由于发生了很多事情 导致了一些加载问题 我需要使用滑动切换 btn 来触发 ajax 因此它仅在按下按钮时请求当前
  • SAPUI5 等待延迟对象 // 等待 .done() 函数

    我知道有几个线程对此进行讨论 但我认为在 SAPUI5 上下文中没有线程回答有关 SAPUI5 中的延迟 同步调用的一般主题 在我的控制器中我得到 test function var dfd Deferred var sServiceUrl
  • jquery ajax加载后丢失CSS

    大家知道如何解决 load Ajax 请求后的 css 问题吗 例如 如果我想从网页加载 DIV 在我的 Ajax 请求之后 container load path to div div id 我丢失了与该 div 关联的所有 css 和脚
  • angular.js ui + bootstrap typeahead + 异步调用

    我将 typeahead 与 angular js 指令一起使用 但填充自动完成的函数进行了异步调用 我无法返回它来填充自动完成 有没有办法让它与这个异步调用一起工作 我可以假设您正在使用 Bootstrap 2 x 的 typeahead
  • FormData 中的 Blob 为 null

    我正在尝试通过远程 API 通过 ajax 在 android 中发送创建的照片 我在用着相机图片背景 https github com an rahulpandey cordova plugin camerapicturebackgrou
  • VBA XML V6.0 如何让它等待页面加载?

    我一直在努力寻找答案 但似乎找不到任何有用的东西 基本上 我是从一个网站上拉取的 当您在该页面上时 该网站会加载更多项目 我希望我的代码在加载完成后提取最终数据 但不知道如何让 XML httprequest 等待 Edited Sub p
  • 使用 jQuery 更改 CSS 类属性

    有没有办法使用 jQuery 更改 CSS 类的属性 而不是元素属性 这是一个实际的例子 我有一个 div 类red red background red 我想转班级red背景属性 而不是具有类的元素red分配的背景 如果我用 jQuery
  • 使用 Jquery 传递隐藏字段值

    我有一个正常的hidden Input field我在哪里生成random string 我需要将其附加到我尝试将数据发布到另一个页面的 URL 中 我已经做到了这一点并且效果很好 url Upload html field1 newval
  • 如何将 STRUCT - OR - JSON 传递给 Coldfusion CFC 方法

    我有一个现有的 CFC 在将结构传递到方法中时可以正常工作 问题是 我们现在还需要通过 JSON 将数据传递到同一函数中 这是 CFC 片段
  • GWT - 如何组织项目以拥有多个网页以及它们之间的导航

    我是 GET 的新手 顺便说一句 它给我留下了深刻的印象 并且发现它对于像我这样熟悉 C NET 桌面技术并愿意编写 Web 应用程序的人来说非常有吸引力 我根据 GWT Eclipse 向导生成的示例启动了自己的项目 该项目生成带有面板的
  • 绑定到 ajax 调用的 Spinner 将不会显示,除非我在 javascript 中添加警报

    我编写了一个简单的方法 将微调器添加到 html 页面的主体 并将事件绑定到 ajaxstart 方法 然后在 ajaxstop 上将其删除 StartAjaxCallSpinner function spinnerObj var bod
  • 如何通过减少请求来改进 AJAX 实时搜索

    我正在构建一个 AJAX 实时搜索页面 到目前为止 一切都按预期运行 但我注意到我正在进行大量的 AJAX 调用 我知道发生这种情况的地点和原因 但我找不到阻止这些 AJAX 调用发生的方法 我将尝试给出快速解释 然后粘贴下面的代码 在页面
  • .live() 或 .livequery()

    我有一个Ajaxed的网站 Ajax的内容来自其他页面 例如about html contact html ajax 从名为 main content 的 div 获取内容 但是在 ajax 调用之后 我的其余脚本就中断了 比如tinysc
  • 全局传递 xhr onload 函数的值

    在我正在创建的应用程序中 我有以下 XMLHttpRequest 并且我正在尝试传递结果data在 的里面xhr onload 到在同一父函数中创建的数组中 var url http api soundcloud com resolve j

随机推荐

  • http和https协议

    HTTP协议 简介 HTTP是Hyper Text Transfer Protocol 超文本传输协议 的缩写 HTTP是一个属于应用层的面向对象的协议 由于其简捷 快速的方式 适用于分布式超媒体信息系统 HTTP协议以明文方式发送内容 不
  • 浮动元素无法撑开父元素问题

    如何解决浮动元素无法撑开父元素问题 首先我们看一下问题 div class wrapper div class content div div class content div div class content div div clas
  • 【Unity】新InputSystem中点按UI组件模拟键盘输入

    项目中用空格作为对话的交互键 想要实现对话时点按UI中的panel和空格有一样的效果 文档中创建event并传入的方法 原文地址 Input events Input System 1 3 0 第二个方法第二个参数搞不懂应该传入什么 第一个
  • 为你的VMware 15.5 虚拟机MacOS系统手动安装VMware Tools

    本博客同步发布在 为你的VMware 15 5 虚拟机MacOS系统手动安装VMware Tools VMware Tools 是VMware软件提供的一个辅助工具 可以提升虚拟机的使用体验 默认伴随虚拟机自动安装 但有时候自动安装会出错
  • 像数字化原生代那样思考——企业数字化转型的挑战与应对

    点击上方 中国云报 可关注 似乎是一眨眼间 90后 甚至 00后 已经成长起来 渐渐成了消费的主力军 他们使用的是各类移动智能设备 形形色色的社交工具 对云计算 大数据天生就具有亲近感 IDC有一个词来形容这一代消费者 数字化原生代 面对数
  • grafana创建dashboard

    前提 安装grafana 创建dashboard 点击侧边栏菜单Dashboards下的New dashboard 点击Add a new panel 进入到 New dashboard Edit 面板视图 到Query 标签页 配置你的Q
  • Android 隐藏虚拟按键,并且全屏

    隐藏虚拟按键 并且全屏 protected void hideBottomUIMenu 隐藏虚拟按键 并且全屏 if Build VERSION SDK INT gt 11 Build VERSION SDK INT lt 19 lower
  • 并发下sftp连接报错——com.jcraft.jsch.JSchException: connection is closed by foreign host

    当对单接口极限测试时 随着并发量上升 接口稳定性出现不稳定的情况 排查后台日志 发现报错在该接口调用sftp上传时出现问题 确切的是在初始化连接时失败 原因 系统SSH终端连接数配置过小 查看虚拟机该参数 该参数在 etc ssh sshd
  • 【操作系统】虚拟存储器概述

    存储管理分类 实存管理 分区 Partitioning 连续分配方式 包括固定分区 可变分区 分页 Paging 分段 Segmentation 段页式 Segmentation with paging 虚存管理 请求分页 Demand p
  • java 虚拟机类装载的原理、实现、以及应用

    一 引言 Java虚拟机 JVM 的类装载就是指 将包含在类文件中的字节码装载到JVM中 并使其成为JVM一部分的过程 JVM的类动态装载技术能够在运行时刻动态地加载或者替换系统的某些功能模块 而不影响系统其他功能模块的正常运行 本文将分析
  • python linux运行环境,Linux平台Python运行环境配置

    1 软件包管理工具 pip xiaokang localhost sudo yum install python2 pip 查看pip版本 xiaokang localhost pip V 大v pip 8 1 2 from usr lib
  • mysql8和5.7区别_MySQL8.0和MySQL 5的区别

    虽然MySQL8 0 x都出来了 自己一直使用 5 7的版本 对于新的版本今天抽了些时间来了解一下新的特性 而对于新的版本的了解往往都是从版本区别开始的 今天便算是作一个笔记吧 Oracle发布新版本的MySQL时 直接从5 7 x 跳到了
  • Redhat8.2 linux 忘记root密码破解方法 最详细!!!!!

    root密码破解方法 第一步 重启虚拟机 在开机标题界面 选择系统 按E进入 第二步 进入后在含LINUX开头结尾处加上 rd break 然后按CTRL X进入系统 第三步重新挂载根目录并给予读写权限 否则无法重置密码 第四步切换根目录位
  • TCP通信详解

    一 TCP简介 1 TCP介绍 a gt TCP协议 TCP协议 传输控制协议 英语 Transmission Control Protocol 缩写为 TCP 是一种面向连接的 可靠的 基于字节流的通信协议 1 面向连接 先连接 再通信
  • 疯壳-鸿蒙OS-HDF驱动框架

    一 简介 HDF HarmonyOS Driver Foundation 驱动框架 为驱动开发者提供驱动框架能力 包括驱动加载 驱动服务管理和驱动消息机制 旨在构建统一的驱动架构平台 为驱动开发者提供更精准 更高效的开发环境 力求做到一次开
  • 网络安全毕业设计题目大全

    文章目录 0 简介 1 如何选题 2 最新网安毕设选题 0 简介 毕业季马上就要开始了 不少同学询问学长管理选题开题类的问题 今天跟大家分享信息安全毕设选题 最新的信息安全 网络安全 专业毕设选题 难度适中 适合作为毕业设计 大家参考 学长
  • RuntimeError:shape ‘[4, 3, 85, 80, 80]‘ is invalid for input of size 537600

    在对yolov5进行剪枝训练时出现以下类型的错误 错误原因 1 使用自己 的数据集时 数据集与源代码的数据集的类别数不同 没有修改成对应的类别数 解决办法 修改cfg文件 把classes和filters进行修改 filters class
  • 启用电脑对远程服务器的访问,未启用对服务器的远程访问 win10家庭版

    未启用对服务器的远程访问 win10家庭版 卡饭网 本站整理 2019 07 09 这个问题比较常见小编整理的解决方法如下 方法一 用QQ远程协助对方电脑 需要QQ告诉对方右键单击计算机 这台电脑 点管理 打开计算机管理界面 选择本地用户和
  • git 工具使用--分支管理

    git 工具使用 分支管理 文章目录 git 工具使用 分支管理 理解分支 创建分支 切换分支 合并分支 删除分支 合并冲突 分支管理策略 分支策略 bug分支 删除临时分支 总结 理解分支 分支管理是Git的杀手级功能之一 分支 就是科幻
  • Ajax的核心技术XMLHttpRequest方法

    整个Ajax技术紧紧围绕在XMLHttpRequest对象的周围 Ajax整个技术的过程如下 XMLHttpRequest发送请求 在与服务器交互中 其readyState状态可以监听到服务器 的响应状态 当服务器的响应完成的时候 XMLH