XMLHttpRequest对象是ajax编程的基础,用于发送请求(数据)与服务端进行交互。

目前主流浏览器都内置了XMLHttpRequest对象。

浏览器会使用XMLHttpRequest对象来创建Ajax请求。

XMLHttpRequest对象的方法

方法 说明
open(method, url, async) 指定请求类型
method: 请求类型: GET 或 POST
url: 服务器URL
async: true (asynchronous)异步  或 false (synchronous) 同步
send() 发送请求到服务端
send(string) 发送请求到服务端
setRequestHeader(header, value)

添加一个请求头
header请求头名
value请求头值

采用GET还是POST

methond请求有GET和POST,应该选择哪种呢?

GET比 POST 更简单、更快, 并且可以在大多数情况下使用。

但是, 在下列情况下始终使用 POST 请求:

  • 更新服务器上的数据。
  • 向服务器发送大量数据 (POST 没有大小限制)。
  • 发送用户输入 (可以包含未知字符), POST 比获取更健壮、更安全。

采用异步还是同步

通过异步发送, JavaScript 不必等待服务器响应, 而是可以:

  • 在等待服务器响应时执行其他脚本
  • 响应就绪后处理响应
1
xhttp.open("GET", "ajax_test.jsp", true);

open () 方法的异步参数设置为 true表示采用异步:

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    function loadDoc() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("demo").innerHTML =
          this.responseText;
        }
      };
      xhttp.open("GET", "ajax_info.txt", true);
      xhttp.send();
    }
</script>

第一步:创建一个XMLHttpRequest对象实例

第二步:xhttp.open("GET", "ajax_info.txt", true);  准备处理GET请求,请求地址是ajax_info.txt

第三步:发送请求,xhttp.send();

第四步:根据请求返回的状态,实现不同的响应。

跨域 XMLHttpRequest对象的更多相关文章

  1. 支持JSONP跨域的对象

    支持JSONP跨域的对象 1:img 2:iframe 3:link 4:script 为什么,JSONP 最终选择是 script 实现呢?度娘来也! 平常我们进行JSONP请求数据,因为 json ...

  2. JavaScript权威设计--跨域,XMLHttpRequest(简要学习笔记十九)

    1.跨域指的是什么? URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a. ...

  3. AJAX-CORS 跨域

    1.CORS就是一套AJAX跨域问题的解决方案. 2.CORS的原理: CORS定义一种跨域访问的机制,可以让AJAX实现跨域访问. 3.CORS浏览器支持情况: Chrome 3+ Firefox ...

  4. XMLHTTPRequest对象不能跨域获取数据?!

    写了一小段代码,是用XMLHTTPRequest对象来获取数据的,在本地服务器中,运行的很顺利,但是转向实际服务器(实质上就是转向http://gumball.wickedlysmart.com获取一 ...

  5. Cross-origin resource sharing JSON with Padding 同源策略 JSONP 为什么form表单提交没有跨域问题,但ajax提交有跨域问题? XMLHttpRequest and the Fetch API follow the same-origin policy 预检请求(preflight request)

    https://zh.wikipedia.org/wiki/跨来源资源共享 跨来源资源共享(CORS)是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略[1 ...

  6. xmlHttpRequest 跨域和上传或下载进度条

    跨域 XMLHttpRequest 请求 普通网页能够使用XMLHttpRequest对象发送或者接受服务器数据, 但是它们受限于同源策略. 扩展可以不受该限制. 任何扩展只要它先获取了跨域请求许可, ...

  7. js中几种实用的跨域方法原理详解(转)

    今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...

  8. js_跨域

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  9. js中几种实用的跨域方法原理详解

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

随机推荐

  1. android 多模块项目构建一

    项目构建之项目文件搭建: 1.在android studio中new project,如:mydemo,如在D盘下. 2.创建几个module,选择为Library. 3.项目中用到多模块,最好使用动 ...

  2. MySQL:Your password has expired. To log in you must change it using a client that supports expired passwords

    MySQL:V5.6.37 安装后发现没远程权限,为了方便,就直接把hostname@root修改为%@root,密码修改为和localhost@root一样 然后尴尬的事情发生了,本地登陆正常,远程 ...

  3. STL中vector、list、deque和map的区别

    1 vector     向量 相当于一个数组    在内存中分配一块连续的内存空间进行存储.支持不指定vector大小的存储.STL内部实现时,首先分配一个非常大的内存空间预备进行存储,即capac ...

  4. 使用Let's Encrypt为网站加入SSL证书

    一直没有为网站配置过HTTPS,因为怕麻烦.不过这次工作要求,没有办法,只能硬着头皮上了. 老板提供了一个关键字,Let's Encrypt.其实最早看到这句话,我以为是一个动词,让我行动的意思.但是 ...

  5. 题解-APIO2010 特别行动队

    题目 洛谷 & bzoj 简要题意:给定一个长为\(n\)的序列\(\{s_i\}\)与常数\(a,b,c\),序列的一个连续子段\(s_i\)到\(s_j\)的贡献为\(at^2+bt+c\ ...

  6. 用户 'IIS APPPOOL\xxxx' 登录失败

    一.现象发布到iis后,网站出现以下提示异常详细信息: System.Data.SqlClient.SqlException: 用户 'IIS APPPOOL\IdealTest' 登录失败. 二.分 ...

  7. [NOI2004]郁闷的出纳员(到底是谁郁闷啊?)

    一道 FHQ treap 的裸水题,卡了这么久.(咦~一看就是修为不够)   题解什么的,不用看的(话说那我为什么要写这篇题解咧...),直接 FHQ 模板腾上去就能秒 A 了(打脸)   谈谈 de ...

  8. HBase的replication原理及部署

    一.hbase replication原理 hbase 的复制方式是 master-push 方式,即主集群推的方式,主要是因为每个rs都有自己的WAL. 一个master集群可以复制给多个从集群,复 ...

  9. 微信小程序商业级实战

    1.微信开放能力:微信支付.微信登录.二维码生成.分享

  10. C# Winform控件对透明图片重叠时导致图片不透明的解决方法(转)

    在Winform中如果将一个透明图片放在窗体上能正常显示透明,但是如果将该图片放在另一个控件上会导致不能显示透明效果. 解决这种情况,可以采取在控件上使用GDI+绘画出透明图片. 这里我们就以一个pi ...