xmlhttprequest 订阅
XMLHTTP是一组API函数集,可被JavaScript、JScript、VBScript以及其它web浏览器内嵌的脚本语言调用,通过HTTP在浏览器和web服务器之间收发XML或其它数据。XMLHTTP最大的好处在于可以动态地更新网页,它无需重新从服务器读取整个网页,也不需要安装额外的插件。该技术被许多网站使用,以实现快速响应的动态网页应用。例如:Google的Gmail服务、Google Suggest动态查找界面以及Google Map地理信息服务。 展开全文
XMLHTTP是一组API函数集,可被JavaScript、JScript、VBScript以及其它web浏览器内嵌的脚本语言调用,通过HTTP在浏览器和web服务器之间收发XML或其它数据。XMLHTTP最大的好处在于可以动态地更新网页,它无需重新从服务器读取整个网页,也不需要安装额外的插件。该技术被许多网站使用,以实现快速响应的动态网页应用。例如:Google的Gmail服务、Google Suggest动态查找界面以及Google Map地理信息服务。
信息
外文名
XMLHTTP
标准化
对象还没有标准化
特    点
提供了对 HTTP 协议的完全的访问
中文名
XmlHttpRequest
优    点
得到了所有现代浏览器较好的支持
XMLHTTPRequest简介
XMLHTTP是一组API函数集,可被JavaScript、JScript、VBScript以及其它web浏览器内嵌的脚本语言调用,通过HTTP在浏览器和web服务器之间收发XML或其它数据。XMLHTTP最大的好处在于可以动态地更新网页,它无需重新从服务器读取整个网页,也不需要安装额外的插件。该技术被许多网站使用,以实现快速响应的动态网页应用。例如:Google的Gmail服务、Google Suggest动态查找界面以及Google Map地理信息服务。XMLHTTP是AJAX网页开发技术的重要组成部分。除XML之外,XMLHTTP还能用于获取其它格式的数据,如JSON或者甚至纯文本。 [1] 
收起全文
精华内容
下载资源
问答
  • XMLHttpRequest

    千次阅读 2020-06-03 14:07:22
    XMLHttpRequest之get请求 let xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { // 0:未开启open; 1: open(); 2: send; 3: 接收到部分数据; 4: 接收到所有数据 if(xhr.readyState === 4) { if...

     XMLHttpRequest中open方法的三个参数: 

          1. 第一个参数定义发送请求所使用的方法(GET 还是 POST)。

    • 与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
    • 然而,在以下情况中,请使用 POST 请求:
    • 无法使用缓存文件(更新服务器上的文件或数据库)
    • 向服务器发送大量数据(POST 没有数据量限制)
    • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

       2. 第二个参数规定服务器端脚本的 URL(该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp       和 .php (在传回响应之前,能够在服务器上执行任务))。

      3. 第三个参数规定应当对请求进行异步地处理(true(异步)或 false(同步))。

    XMLHttpRequest之get请求

    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = () => {
    // 0:未开启open; 1: open(); 2: send; 3: 接收到部分数据; 4: 接收到所有数据
        if(xhr.readyState === 4) {
            if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304 ) {
                console.log(xhr.responseText);
            } else {
                console.log(`Request is not successful ${res.status}`);
            }
    
        }
    }
    xhr.open("get", '/login', false);
    xhr.send(null);

    XMLHttpRequest之post请求

    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = () => {
    // 0:未开启open; 1: open(); 2: send; 3: 接收到部分数据; 4: 接收到所有数据
        if(xhr.readyState === 4) {
            if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304 ) {
                console.log(xhr.responseText);
            } else {
                console.log(`Request is not successful ${res.status}`);
            }
    
        }
    }
    xhr.open("post", '/login', false);
    xhr.send({username: 'xx', password: xxxx});

     

     

    参考地址:

    https://blog.csdn.net/long710910256/article/details/72875617

     

     

     

     

     

    展开全文
  • XmlHttpRequest

    2020-06-26 11:49:34
    XMLHttpRequest XMLHttpRequest 是一个API, 它为客户端提供了在客户端和服务器之间传输数据的功能。 它提供了一个通过 URL 来获取数据的简单方式,并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到...

    XMLHttpRequest

    XMLHttpRequest 是一个API, 它为客户端提供了在客户端和服务器之间传输数据的功能。
    XMLHTTP 是一组API函数集,可被JavaScript、JScript、VBScript以及其它web浏览器内嵌的脚本语言调用,通过HTTP在浏览器和web服务器之间收发XML或其它数据
    它提供了一个通过 URL 来获取数据的简单方式,并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。
    XMLHttpRequest 在 AJAX 中被大量使用。
    
    

    XMLHttpRequest 使用

    var xhr = new XMLHttpRequest(); // 创建xhr对象
    xhr.open( method, url );  #初始化一个请求
    xhr.onreadystatechange = function () { ... };   #等待远程主机做出回应,监控XMLHttpRequest对象的状态变化,指定回调函数。
    xhr.setRequestHeader( ..., ... );
    xhr.send( optionalEncodedData );  #向服务器发出一个 HTTP 请求:
    

    事件

    loadstart - 当程序开始加载时,loadstart 事件将被触发。
    progress - 进度事件会被触发用来指示一个操作正在进行中。
    abort - 当一个资源的加载已中止时,将触发 abort 事件。
    error - 当一个资源加载失败时会触发error事件。
    load - 当一个资源及其依赖资源已完成加载时,将触发load事件。
    timeout - 当进度由于预定时间到期而终止时,会触发timeout 事件。
    loadend - 当一个资源加载进度停止时 (例如,在已经分派“错误”,“中止”或“加载”之后),触发loadend事件。
    readystatechange - readystatechange 事件会在 document.readyState属性发生变化时触发。
    
    参考:https://juejin.im/post/58e4a174ac502e006c1e18f4
    
    展开全文
  • xmlhttprequest

    2019-10-08 13:55:53
    XMLHttpRequest包含一个小的QML例子来说明Qt QML's XMLHTTPRequest的功能.如果要看更多信息,请参见XMLHttpRequest区域. 使用XMLHttpRequest API获取数据,从服务器上抓取一个XML文档.他将显示HTTP响应头以及XML文档...

    前:

    点击按钮后:读取除了Xml内的内容了.

    XMLHttpRequest包含一个小的QML例子来说明Qt QML's XMLHTTPRequest的功能.如果要看更多信息,请参见XMLHttpRequest区域.

    使用XMLHttpRequest API获取数据,从服务器上抓取一个XML文档.他将显示HTTP响应头以及XML文档的内容.

    文件有:

    xmlhttprequest/data.xml

    1 <data>
    2     <element1 />
    3     <element2 />
    4 </data>

    xmlhttprequest/get.qml

     1 import QtQuick 2.0
     2 
     3 Rectangle {
     4     width: 350; height: 400
     5 
     6     function showRequestInfo(text) {
     7         log.text = log.text + "\n" + text
     8         console.log(text)
     9     }
    10 
    11     Text { id: log; anchors.fill: parent; anchors.margins: 10 }
    12 
    13     Rectangle {
    14         id: button
    15         anchors.horizontalCenter: parent.horizontalCenter; anchors.bottom: parent.bottom; anchors.margins: 10
    16         width: buttonText.width + 10; height: buttonText.height + 10
    17         border.width: mouseArea.pressed ? 2 : 1
    18         radius : 5; antialiasing: true
    19 
    20         Text { id: buttonText; anchors.centerIn: parent; text: "Request data.xml" }
    21 
    22         MouseArea {
    23             id: mouseArea
    24             anchors.fill: parent
    25             onClicked: {
    26                 log.text = ""
    27                 console.log("\n")
    28 
    29                 var doc = new XMLHttpRequest();
    30                 doc.onreadystatechange = function() {
    31                     if (doc.readyState == XMLHttpRequest.HEADERS_RECEIVED) {
    32                         showRequestInfo("Headers -->");
    33                         showRequestInfo(doc.getAllResponseHeaders ());
    34                         showRequestInfo("Last modified -->");
    35                         showRequestInfo(doc.getResponseHeader ("Last-Modified"));
    36 
    37                     } else if (doc.readyState == XMLHttpRequest.DONE) {
    38                         var a = doc.responseXML.documentElement;
    39                         for (var ii = 0; ii < a.childNodes.length; ++ii) {
    40                             showRequestInfo(a.childNodes[ii].nodeName);
    41                         }
    42                         showRequestInfo("Headers -->");
    43                         showRequestInfo(doc.getAllResponseHeaders ());
    44                         showRequestInfo("Last modified -->");
    45                         showRequestInfo(doc.getResponseHeader ("Last-Modified"));
    46                     }
    47                 }
    48 
    49                 doc.open("GET", "data.xml");
    50                 doc.send();
    51             }
    52         }
    53     }
    54 }

    xmlhttprequest/xmlhttprequest.qml

    内容:

     1 import QtQuick 2.0
     2 import "../../quick/shared" as Examples
     3 
     4 Item {
     5     height: 480
     6     width: 320
     7     Examples.LauncherList {
     8         id: ll
     9         anchors.fill: parent
    10         Component.onCompleted: {
    11             addExample("Get data", "Send get request and show received header and body",  Qt.resolvedUrl("get.qml"));
    12         }
    13     }
    14 }

    xmlhttprequest/main.cpp

    1 1 #include "../../quick/shared/shared.h"
    2 2 DECLARATIVE_EXAMPLE_MAIN(qml/xmlhttprequest/xmlhttprequest)

    xmlhttprequest/xmlhttprequest.pro

    内容:算是项目中的工程makefile.

     1 TEMPLATE = app
     2 
     3 QT += quick qml
     4 SOURCES += main.cpp
     5 RESOURCES += \
     6     xmlhttprequest.qrc \
     7     ../../quick/shared/quick_shared.qrc
     8 
     9 EXAMPLE_FILES = \
    10     data.xml
    11 
    12 target.path = $$[QT_INSTALL_EXAMPLES]/qml/xmlhttprequest
    13 INSTALLS += target

    xmlhttprequest/xmlhttprequest.qmlproject

    内容:工程中当前目录以及子目录下包含的文件格式.

     1 import QmlProject 1.0
     2 
     3 Project {
     4     mainFile: "xmlhttprequest.qml"
     5     /* Include .qml, .js, and image files from current directory and subdirectories */
     6 
     7     QmlFiles {
     8         directory: "."
     9     }
    10     JavaScriptFiles {
    11         directory: "."
    12     }
    13     ImageFiles {
    14         directory: "."
    15     }
    16 }

    xmlhttprequest/xmlhttprequest.qrc

    内容:该工程中相关的资源文件,自动生成

    1 <RCC>
    2     <qresource prefix="/qml/xmlhttprequest">
    3         <file>xmlhttprequest.qml</file>
    4         <file>get.qml</file>
    5         <file>data.xml</file>
    6     </qresource>
    7 </RCC>

    QML JavaScript 主机环境实现了以下主机对象和功能函数.这些可以被构建,或者从装载的JAVASCRIPT代码被使用再QML中,不需要多余的导入.
    The Qt object: 这个对象被指定再QML中,并且提供再qml环境中使用的帮助方法以及属性.
    qsTr(), qsTranslate(), qsTrId(), QT_TR_NOOP(), QT_TRANSLATE_NOOP(), and QT_TRID_NOOP() 函数:这些函数被指定再QML中,并且提供再QML环境中的转换能力.
    gc() 函数:这个函数指定在QML中,并且提供一种方式去手动触发垃圾收集.
    print() 函数:这个函数指定在QML中,并且提供了一种简单的方式去输出信息到控制台.
    The console object: 这个对象实线了FireBug Console API的子集.
    XMLHttpRequest, DOMException: 这些对象实线了一个W3C XMLHttpRequest指定的子集功能.

    XMLHttpRequest对象,能够被用来在网络上异步包含数据.
    XMLHttpRequest API实现了跟W3C一样的标准,就好像流行浏览器那样,除了一下功能:
    QML's XMLHttpRequest 不强制实现同源策略.
    QML's XMLHttpRequest 不支持同步请求.

    除此之外,当前被QML所支持的responseXML XML DOM tree是一个web浏览器支持的DOM Level 3 Core API的子集.以下对象和属性再QML中是可以实现了的:

     

    转载于:https://www.cnblogs.com/L-Arikes/p/4378565.html

    展开全文
  • XMLHTTPRequest

    千次阅读 热门讨论 2018-01-18 20:52:12
    前言XMLHTTPRequest和Ajax是什么关系呢?XMLHTTPRequest是Ajax使用的基础,详细来说就上篇博客提到的五个步骤点击打开链接下面详细分析五个步骤:一、建立xmlHttpRequest对象在IE6以下版本中: xmlhttp = ...

    前言

    XMLHTTPRequest和Ajax是什么关系呢?XMLHTTPRequest是Ajax使用的基础,详细来说就上篇博客提到的五个步骤点击打开链接

    下面详细分析五个步骤:

    一、建立xmlHttpRequest对象

    在IE6以下版本中: 
    xmlhttp = newActiveXObject("Microsoft.XMLHTTP")
    IE7以上及Firefox等其他浏览器中:
    xmlhttp = newXMLHttpRequest()

    二、设置回调函数  

    xmlHttp.onreadystatechange= callback;  

    callback是一个函数,callback函数是一种以参数形式传递给另一个函数的函数。如果我们写成如下形式:

    xmlHttp.onreadystatechange= callback();  //这种形式表示将callback的返回值赋给了xmlHttp.onreadystatechange,是错误的。  

    详细了解onreadystatechange事件onreadystatechange事件

    三、与服务器建立连接

    open()用于初始化HTTP请求参数,但并不发送(send);

    语法:open(method,url,async,username,password)

    下面看看每个参数代表的含义:

    1)method:取值可谓get,post,head。

    • GET方式使用URL提交数据,就是说提交的数据会附加在目标URL后,以"?"与URL分开,字符数字原样发送,空格替换为"+",其余字符使用%XX替换(XX是该字符对应的ASCII码)。

    xmlHttp.open("get","ajax?name="+ name,true)
    • POST方式则是将请求的数据放置在HTTP HEADER中提交。
    xmlHttp.open("post","ajax?name="+ name,true) //get方式  
      
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded") //此步注意设置请求头信息
    基于上述原因,GET方式对于提交数据有1024字节的限制,而POST方式则没有(因此上传文件只能使用POST方式);且POST方式要比GET方式要安全,因为GET方式发送的数据是会显示在地址栏的。
    2)url:指定了请求的目标文件地址
    3)async:取值为true或者false。指定了请求模式是同步(false)还是异步(true)
    • 当async为true时,表示为异步请求。即请求之后,不等待响应,继续执行之后的代码。此时需要规定在响应处于 onreadystatechange事件中的就绪状态时执行的函数。
    • 当async为false时,表示为同步请求。即请求之后,要等待完全响应才能继续执行之后的代码。(此种模式容易造成堵塞,因此推荐使用异步请求模式)

    四、向服务器端发送数据 

    如果是get方式,代码如下:

    xmlHttp.send(null); 
    如果是post方式,代码如下:

    xmlHttp.send(name="+ nam);  

    五、在回调函数中针对不同的响应状态进行处理  

     XMLHttpRequest对象有两个属性来存储响应的内容(应该就是读取的目标文件的内容):responseTextresponseXML

    1.responseText属性:目前为止从服务器端接收到的响应体(不包括头部),如果还没有接收到数据(例如readyState<3),则是一个空字符串。

    :如果响应包含了为响应体指定编码的头部,则使用该编码。否则,使用Unicode UTF-8。

    2.responseXML属性:对请求的响应,解析为XML并作为Document对象返回。

    ***************************************************************************************************************************
     

    XMLHttpRequest对象除了以上两个与相应内容相关的属性,还有三个于发送请求相关的属性:readyState、status、statueText
    1.readyState属性表示的是HTTP请求的状态,当一个XMLHttpRequest对象被创建时,这个属性值从0开始,直到接受到完整的HTTP响应,这个值增加到4。
    0:Uninitialized初始化状态。XMLHttpRequest对象已被创建或已被abort()方法重置;
    1:Open open()方法已调用,但send()方法还没被调用,请求尚未发送
    2:Sent send()方法已调用,HTTP请求已发送到服务器,但还没有收到响应
    3:Receiving 所有响应头部已经收到。响应体开始接收但尚未完成
    4:Loaded HTTP响应已经完全接收。

    readyState属性值不会递减,除非当一个请求在处理过程中调用了open()或abort()方法。
    每次这个属性值增加时,都会触发onreadystatechange事件句柄。

    2.status属性是由服务器返回的HTTP代码状态。只能在readyState的值大于或等于3的时候读取,否则会出错。
    status的值为200时,表示读取成功;而404表示"NotFound"错误。

    3.statusText属性与status参数代表的含义相同,只是该参数使用字符串而不是数字来表示当前状态。
    • status为200时对应的statusText的值为"OK";
    • status为404时对应的statusText的值为"Not Found"。

    结语

    Ajax,异步加载,部分更新,动态网页,很神奇的东西,想要完全掌握,还差很多,加油。
    展开全文
  • Access to XMLHttpRequest at '*' from origin '*' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 34,864
精华内容 13,945
关键字:

xmlhttprequest