1.什么是XMLHttpRequest
XMLHttpRequest是一个浏览器接口,使得Javascript可以进行HTTP(S)通信,这就是我们熟悉的AJAX。
早期,各个浏览器的实现都不同,HTML5之后,W3C进行了统一。
2.XMLHttpRequest使用示例

<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.timeout = 3000;
xhr.ontimeout = function (event) {
alert("请求超时!");
}
var formData = new FormData();
formData.append('tel', '18217767969');
formData.append('psw', '111111');
xhr.open('POST', 'http://www.test.com:8000/login');
xhr.send(formData);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
else {
alert(xhr.statusText);
}
}
</script>

运行结果:

属性说明:

* xhr.readyState:XMLHttpRequest对象的状态,等于4表示数据已经接收完毕。
* xhr.status:服务器返回的状态码,等于200表示一切正常。
* xhr.responseText:服务器返回的文本数据
* xhr.responseXML:服务器返回的XML格式的数据
* xhr.statusText:服务器返回的状态文本。

3.跨域资源共享(CORS)
XMLHttpRequest可以向不同域名的服务器发出HTTP请求,叫做CORS
可以进行CORS有两个条件:
1)浏览器要支持CORS
2)服务器允许跨域:响应头需要添加一下选项

self.set_header('Access-Control-Allow-Origin', '*')
self.set_header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS')
self.set_header('Access-Control-Max-Age', 1000)
self.set_header('Access-Control-Allow-Headers', '*')
self.set_header('Content-type', 'application/json')

XMLHttpRequest使用详解的更多相关文章

  1. Ajax中的XMLHttpRequest对象详解

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

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

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

  3. Ajax中的XMLHttpRequest对象详解(转)

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

  4. window.XMLHttpRequest对象详解

    来自:http://blog.csdn.net/lccone/article/details/7743946 window.XMLHttpRequest XMLHttpRequest对象是当今所有AJ ...

  5. XMLHttpRequest详解

    XMLHttpRequest详解: https://xhr.spec.whatwg.org/

  6. AJAX(XMLHttpRequest)进行跨域请求方法详解

    AJAX(XMLHttpRequest)进行跨域请求方法详解(三) 2010年01月11日 08:48:00 阅读数:24213 注意:以下代码请在Firefox 3.5.Chrome 3.0.Saf ...

  7. AJAX请求详解 同步异步 GET和POST

    AJAX请求详解 同步异步 GET和POST 上一篇博文(http://www.cnblogs.com/mengdd/p/4191941.html)介绍了AJAX的概念和基本使用,附有一个小例子,下面 ...

  8. 「JavaScript」四种跨域方式详解

    超详细并且带 Demo 的 JavaScript 跨域指南来了! 本文基于你了解 JavaScript 的同源策略,并且了解使用跨域跨域的理由. 1. JSONP 首先要介绍的跨域方法必然是 JSON ...

  9. jqGrid APi 详解

    jqGrid APi 详解 jqGrid皮肤 从3.5版本开始,jqGrid完全支持jquery UI的theme.我们可以从http://jqueryui.com/themeroller/下载我们所 ...

随机推荐

  1. JDK5.0特性,使用ProcessBuilder执行本地命令

    import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; import java.io.IO ...

  2. hadoop safemode error

    http://www.cnblogs.com/hustcat/archive/2010/06/30/1768506.html 1.safemode bin/hadoop fs -put ./input ...

  3. 用Java实现AES加密(坑!)

    大坑!使用SecureRandom默认的加密方式即SHA1PRNG生成的密码有误,即使使用相同的password来生成,不同runtime或时刻生成的随机密码也有可能不同,造成的错误为javax.cr ...

  4. hdu 4893 Wow! Such Sequence!(线段树)

    题目链接:hdu 4983 Wow! Such Sequence! 题目大意:就是三种操作 1 k d, 改动k的为值添加d 2 l r, 查询l到r的区间和 3 l r. 间l到r区间上的所以数变成 ...

  5. 封装document.getElementById(id)

      CreateTime--2016年12月18日11:42:45Author:Marydon封装document.getElementById(Id)方法 <script type=" ...

  6. pythong 中的 __call__

    python __call__ (可调用对象) __call__ Python中有一个有趣的语法,只要定义类型的时候,实现__call__函数,这个类型就成为可调用的. 换句话说,我们可以把这个类型的 ...

  7. xargs详解

    一.场景 这个命令是错误的 find ./ -perm +700 |ls -l 这样才是正确的 find ./ -perm +700 |xargs ls -l  二.用法 [root@localhos ...

  8. 【LeetCode】56. Merge Intervals

    Merge Intervals Given a collection of intervals, merge all overlapping intervals. For example,Given  ...

  9. Google C++单元测试框架

    一.概述 Google C++单元测试框架(简称Gtest),可在多个平台上使用(包括Linux, Mac OS X, Windows, Cygwin和Symbian),它提供了丰富的断言.致命和非致 ...

  10. SDL的基础知识以及利用SDL播放视频

    原文地址:http://blog.csdn.net/i_scream_/article/details/52714378 此博文相关知识点从雷神的博客以及视频学习,截图也是用了他的课件, 雷神博客地址 ...