XMLHttpRequest对象提供了在网页加载后与服务器进行通信的方法。

使用XMLHttpRequest对象,能够:
在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据,接受数据
在后台向服务器发送数据
 
创建XMLHTTPRequest对象
xmlhttp=new XMLHttpRequest() //现代浏览器,包括IE7
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") //IE5,IE6

一个小例子:


var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
} function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = OK
    // ...our code here...
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}

上例中,onreadystatechange 是一个事件句柄。它的值 (state_Change) 是一个函数的名称,当 XMLHttpRequest 对象的状态发生改变时,会触发此函数。

xmlhttp.open 的第三个参数,规定请求是否异步处理。True表示脚本会在 send() 方法之后继续执行,而不等待来自服务器的响应。通过把该参数设置为 "false",可以省去额外的 onreadystatechange 代码。如果在请求失败时是否执行其余的代码无关紧要,那么可以使用这个参数。

readyState: HTTP 请求的状态

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

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

responseText: 服务器接收到的响应体(不包括头部)

如果 readyState 小于 3,这个属性就是一个空字符串。当 readyState 为 3,这个属性返回目前已经接收的响应部分。如果 readyState 为 4,这个属性保存了完整的响应体。

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

status: 由服务器返回的 HTTP 状态代码。当 readyState 小于 3 的时候读取这一属性会导致一个异常。

statusText: 这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。

onreadystatuschange: 事件句柄

每次 readyState 属性改变的时候调用的事件句柄函数。当 readyState 为 3 时,它也可能调用多次。

abort(): 取消当前响应,关闭连接并且结束任何未决的网络活动。这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态,并且取消所有未决的网络活动。例如,如果请求用了太长时间,而且响应不再必要的时候,可以调用这个方法。

open(): 初始化 HTTP 请求参数以供 send() 方法稍后使用,例如 URL 和 HTTP 方法,但是并不发送请求。

XMLHttpRequest.open():

open(method, url, async, username, password)

method 参数是用于请求的 HTTP 方法。值包括 GET、POST 和 HEAD。

url 参数是请求的主体。大多数浏览器实施了一个同源安全策略,并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。

async 参数指示请求使用应该异步地执行。如果这个参数是 false,请求是同步的,后续对 send() 的调用将阻塞,直到响应完全接收。如果这个参数是 true 或省略,请求是异步的,且通常需要一个 onreadystatechange 事件句柄。

username 和 password 参数是可选的,为 url 所需的授权提供认证资格。如果指定了,它们会覆盖 url 自己指定的任何资格。

send(): 发送 HTTP 请求,使用传递给 open() 方法的参数,以及传递给该方法的可选请求体。

XMLHttpRequest.send():发送一个 HTTP 请求

XML HttpRequest的更多相关文章

  1. 初识JavaScript,Ajax,jQuery,并比较三者关系

    一.基本认识 1.JavaScript 定义: javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态 ...

  2. ajx技术解析以及模拟jQuery封装

    1.后台处理程序 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...

  3. java学习路线(好资源大家分享)

    对于入门java将近两年的时间,曾经迷惘过,一直想知道java的具体学习路线,看过了许许多多的java经验分享的帖子,评论,以及其他各种培训机构所谓的学习路线,发现没有一个符合我个人需求的学习路线,根 ...

  4. webapp调试工具weinre的使用

    在设计师与前端开发人员的努力下,一个WebApp出炉了,可是测试人员说了一堆的问题:某某机型下页面表现不一致,某某系统下页面如何如何,某某 系统浏览器下页面怎么怎么滴.看着满满的测试汇总文档,我们曾经 ...

  5. Java体系总结

    一.Java SE部分 1.java基础:基础语法:面向对象(重点):集合框架(重点):常见类库API: 2.java界面编程:AWT:事件机制:Swing: 3.java高级知识:Annotatio ...

  6. JavaScript、Ajax与jQuery的关系

    简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...

  7. EXT.NET高效开发(三)——使用Chrome浏览器的开发人员工具

    这篇帖子老少皆宜,不分男女,不分种族,不分职业.俗话说:“磨刀不误砍柴工”.掌握一些开发工具的使用,对自己帮助是很大的(无论是用于分析问题,还是提高生产力).本篇就讲述如何利用Chrome浏览器(这里 ...

  8. 史上最全的AJAX

    概述 对于web应用程序:用户浏览器发送请求.服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML),渲染并显示浏览器上· Ajax和Form表单提交数据的的好 ...

  9. 性能优化之AJAX

    明天就放假啦~哈哈.四月份好像还没有输出呢,吓得我赶紧写点东西... Ajax是高性能JavaScript的基础. Ajax,从最基本的层面来说,是一种与服务器通信而无需重载页面的方法.数据可以从服务 ...

随机推荐

  1. PHP 投票练习

    重点:1.进度条的显示2.操作数据库<form action="chuli.php" method="post"> <?php include ...

  2. mplayer-for-windows change color scheme in win 7

    Q: When I play movie on Windows7, always comes this message: The color scheme has been changed The f ...

  3. EXT--当defaultType与items的子组件默认xtype冲突时items的子组件的xtype为panel

    示例图 直接看下面示例代码: /** * 获取导入表单 * @returns {Ext.FormPanel} */ function getImportForm() { return new Ext. ...

  4. iOS类的继承关系

  5. GDB技巧整理

    https://blog.atime.me/note/gdb-tricks.html 整理常用的gdb技巧. 常用命令 常用的gdb命令... 启动gdb 直接运行 gdb --args prog a ...

  6. 老李推荐:第6章2节《MonkeyRunner源码剖析》Monkey原理分析-事件源-事件源概览-获取命令字串

    老李推荐:第6章2节<MonkeyRunner源码剖析>Monkey原理分析-事件源-事件源概览-获取命令字串   从上一节的描述可以知道,MonkeyRunner发送给Monkey的命令 ...

  7. 团队作业7——第二次项目冲刺(Beta版本12.10)

    项目每个成员的进展.存在问题.接下来两天的安排. 已完成的内容:头像功能原型设计.头像裁剪功能.头像上传功能.测试 计划完成的内容:头像功能测试.bug修复 每个人的工作 (有work item 的I ...

  8. 小程序实践(五):for循环绑定item的点击事件

    微信展示列表效果借助于 wx:for  简单写一个列表(wxml文件中): 对应的数据源(js文件中): 写一个点击监听: 效果: 以上.可以实现列表的item点击效果,但是无法到点击的item对应的 ...

  9. linux下编译tex,bib成pdf文件

    参考linux下编译bib.tex生成pdf文件 为了编译出出正确的pdf文件,需要执行4条命令完成整个编译过程. 编译命令及输出 $ pdflatex bb.tex #目录下会生成bb.aux.bb ...

  10. python+selenium安装方法

    一.准备工具: 下载 python[python 开发环境] http://python.org/getit/ 下载 setuptools [python 的基础包工具] http://pypi.py ...