AJAX XMLHttpRequest对象

 
XMLHttpRequest 对象用于与服务器交换数据,能够在不重新加载整个网页(刷新)的情况下,对网页进行部分更新。

XMLHttpRequest 对象是 AJAX 的基础,讲 AJAX ,大部分是在讲 XMLHttpRequest 对象。

所有现代浏览器(IE 7.0+、Chrome、FireFox、Opera、Safari)均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。

XMLHttpRequest 对象还没有标准化,但是 W3C 已经开始了标准化的工作,讲解的内容都是基于标准化的工作草案。

对于较新的浏览器,创建 XMLHttpRequest 对象的语法:

  1. var xmlhttp=newXMLHttpRequest();
 

对于比较老的IE浏览器(IE5 和 IE6),使用 ActiveX 来创建:

  1. var xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
 

兼容所有浏览器的创建 XMLHttpRequest 对象的代码:

  1. <script type="text/javascript">
  2. var xmlhttp;
  3. if(window.XMLHttpRequest){
  4. // code for IE7+, Firefox, Chrome, Opera, Safari
  5. xmlhttp=newXMLHttpRequest();
  6. }else{
  7. // code for IE6, IE5
  8. xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
  9. }
  10. </script>
 

如果担心浏览器出现错误提示,请用 try..catch 代替 if...else ,如下所示:

  1. <script type="text/javascript">
  2. var xmlhttp;
  3. try{
  4. // code for IE7+, Firefox, Chrome, Opera, Safari
  5. xmlhttp=newXMLHttpRequest();
  6. }catch(e){
  7. // code for IE6, IE5
  8. xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
  9. }
  10. </script>
 

XMLHttpRequest 对象有多个属性和方法,还有一个事件句柄。

XMLHttpRequest 对象属性和方法
属性 说明
readyState HTTP 请求的状态。当一个 XMLHttpRequest 初次创建时,这个属性的值从 0 开始,直到接收到完整的 HTTP 响应,这个值增加到 4。
responseText 从服务器接收到的数据(不包括头部)(解析为一个字符串)。
responseXML 从服务器接收到的数据(不包括头部)(解析为 XML 并作为 Document 对象返回)。
status 由服务器返回的 HTTP 状态代码。如 200 表示成功, 404 表示 "Not Found" 错误。
statusText 这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说,当状态为 200 的时候它是 "OK",当状态为 404 的时候它是 "Not Found"。
事件句柄 说明
onreadystatechange 每次 readyState 属性改变的时候调用的事件句柄函数。
方法 说明
abort() 取消当前响应,关闭连接并且结束任何未完成的网络活动。
getAllResponseHeaders() 把 HTTP 响应头部(所有头部)作为一个字符串返回。
getResponseHeader() 返回指定的 HTTP 响应头部的值,其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字,和响应头部的比较是不区分大小写的。
open() 初始化 HTTP 请求参数,例如 URL 和 HTTP 方法,但是并不发送请求。
send() 发送 HTTP 请求,使用传递给 open() 方法的参数,以及传递给该方法的可选请求体。
setRequestHeader() 向一个打开但未发送的请求设置或添加一个 HTTP 请求。

  1. var xhr =new XMLHttpRequest();
  2. console.log(xhr);
浏览器:(如果不记得属性和方法了,可以直接在浏览器查看)
 
 

参考:

互联网。
 
 
 

【02】AJAX XMLHttpRequest对象的更多相关文章

  1. 不同浏览器创建 ajax XMLHTTPRequest对象的方法及兼容性问题总结

    XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpReques ...

  2. 原生Ajax XMLHttpRequest对象

    一.Ajax请求 - 现在常见的前后端分离项目中,一般都是服务器返回静态页面后浏览器加载完页面,运行script中的js代码,通过ajax向后端api发送异步请求获取数据,然后调用回调函数,将数据添加 ...

  3. 【转载并整理】AJAX XmlHttpRequest对象详解

    一. XMLHttpRequest由来及原生介绍 XMLHttpRequest(XHR)是一个API对象,其中的方法可以用来在浏览器和服务器端传输数据.这个对象是浏览器的js环境提供的.从XHR获取数 ...

  4. AJAX——XMLHttpRequest对象的使用

    AJAX是web2.0即动态网页的基础,而XMLHttpRequest对象又是AJAX的核心.XMLHttpRequest对象负责将用户信息以异步通信地发送到服务器端,并接收服务器响应信息和数据 一. ...

  5. Ajax XMLHttpRequest对象的三个属性以及open和send方法

    (1)onreadystatechange 属性onreadystatechange 属性存有处理服务器响应的函数.下面的代码定义一个空的函数,可同时对 onreadystatechange 属性进行 ...

  6. PHP. 02®. Ajax异步处理、常见的响应状态、XMLHttpRequest对象及API、ajax的get/post方法、

    异步对象 a)创建异步对象 b)设置请求的url等参数 c)  发送请求 d)注册时间 e)在注册的事件中获取返回的内容并修改页面显示的内容 布尔类型不能直接用echo输出 常见的响应状态 Ajax概 ...

  7. AJAX——核心XMLHttpRequest对象

    AJAX大家已经都知道了,是为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,Jquery,Css……)重新融合的一个新的知识框架.而,XMLHttpR ...

  8. AJAX原理及XMLHttpRequest对象分析

    今天的主题是前端都了解的AJAX,但其中都有哪些知识点,还需要深入分析. 首先揭示AJAX的字面意思,Asynchronous Javascript And XML,通俗点就是“异步Javascrip ...

  9. Ajax中的XMLHttpRequest对象详解

    XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求 ...

随机推荐

  1. [USACO 2011 Dec Gold] Threatening Letter【后缀】

    Problem 3: Threatening Letter [J. Kuipers, 2002] FJ has had a terrible fight with his neighbor and w ...

  2. 使用 JSX 描述 UI 信息

    这一节我们通过一个简单的例子讲解 React.js 描述页面 UI 的方式.把 src/index.js 中的代码改成: import React, { Component } from 'react ...

  3. js点击修改按钮后修改

    <button id="click">改变内容</button> <div id="t">要改变的内容</div> ...

  4. 2017-11-29 HTML5样式、链接和表格

    HTML5样式.链接和表格HTML5列表<ol> 有序列表<ul> 无序列表<li> 列表项 <dl> 列表<dt> 列表项<dd&g ...

  5. jvm 脑图

  6. linux下php开启pdo扩展

    前提:网页报错 为解决问题:Undefined class constant 'MYSQL_ATTR_INIT_COMMAND' 解决方案 : 下载安装PHP_MYSQL扩展 wget http:// ...

  7. linux下svn安装(ALI ECS)

    yum安装svn 搭建和使用SVN 可参考阿里云文档:https://help.aliyun.com/document_detail/52864.html?spm=5176.8208715.110.1 ...

  8. 快速开发框架天梭(Tissot)

    天梭(Tissot)集成SpringBoot+Dubbo等主流互联网技术栈,高度集成.优化方便快速搭建应用.某互金科技公司内部孵化框架,已应用于公司90%业务系统. 框架划分模块有: tissot-c ...

  9. asp.net 实现treeview 选中父节点其子节点也选种中 选中子节点其父节点与根节点也被选中

    1.在 Page_Load(object sender, EventArgs e) 里面加入: TreeView1.Attributes.Add("onclick", " ...

  10. C++11并发之std::mutex

    知识链接: C++11并发之std::thread   本文概要: 1. 头文件. 2.std::mutex. 3.std::recursive_mutex. 4.std::time_mutex. 5 ...