跨域 XMLHttpRequest对象
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) |
添加一个请求头 |
采用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对象的更多相关文章
- 支持JSONP跨域的对象
支持JSONP跨域的对象 1:img 2:iframe 3:link 4:script 为什么,JSONP 最终选择是 script 实现呢?度娘来也! 平常我们进行JSONP请求数据,因为 json ...
- JavaScript权威设计--跨域,XMLHttpRequest(简要学习笔记十九)
1.跨域指的是什么? URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a. ...
- AJAX-CORS 跨域
1.CORS就是一套AJAX跨域问题的解决方案. 2.CORS的原理: CORS定义一种跨域访问的机制,可以让AJAX实现跨域访问. 3.CORS浏览器支持情况: Chrome 3+ Firefox ...
- XMLHTTPRequest对象不能跨域获取数据?!
写了一小段代码,是用XMLHTTPRequest对象来获取数据的,在本地服务器中,运行的很顺利,但是转向实际服务器(实质上就是转向http://gumball.wickedlysmart.com获取一 ...
- 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 ...
- xmlHttpRequest 跨域和上传或下载进度条
跨域 XMLHttpRequest 请求 普通网页能够使用XMLHttpRequest对象发送或者接受服务器数据, 但是它们受限于同源策略. 扩展可以不受该限制. 任何扩展只要它先获取了跨域请求许可, ...
- js中几种实用的跨域方法原理详解(转)
今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...
- js_跨域
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- js中几种实用的跨域方法原理详解
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
随机推荐
- 什么是联机分析处理(OLAP)
OLAP的提出引起了很大的反响,OLAP作为一类产品同联机事务处理 (OLTP) 明显区分开来. 当今的数据处理大致可以分成两大类:联机事务处理OLTP(on-line transaction pro ...
- MyBatis-进阶1
接入门的实例,我们知道MyBatis可以使用注解和配置文件实现接口和sql语句的绑定. 那么一个接口方法同时使用注解和xml配置会怎么样. @Select("select * from us ...
- 学习基础和C语言基础调查
学习基础和C语言基础调查 一.一种比大多数人(超过90%以上)更好的技能 说句实话,我还没有那种特别特别自信的.说我能拿得出手的.所谓能超过百分之九十以上的人的技能.毕竟人外有人,天外有天. 姑且算上 ...
- 看完此文还不懂NB-IoT,你就过来掐死我吧...
看完此文还不懂NB-IoT,你就过来掐死我吧....... 1 1G-2G-3G-4G-5G 不解释,看图,看看NB-IoT在哪里? 2 NB-IoT标准化历程 3GPP NB-IoT的标准化始于20 ...
- Windows下文件夹扩展名
回收站.{645ff040-5081-101b-9f08-00aa002f954e} 拨号网络.{992CFFA0-F557-101A-88EC-00DD010CCC48} 打印机.{2227a280 ...
- Vue-动态修改数组
需求描述: 点击删除时,仅删除当前选中的这个对象. html: <el-card shadow="never" style="position: relative; ...
- css和javascript代码写在页面中的位置说明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 查看当前APP打开的是哪个Activity
按下 “window键+R键” 打开电脑的 “运行” 窗口,输入“cmd”,进入你的adb.exe所在的目录,输入 “ adb shell "dumpsys window | grep mC ...
- Java+selenium chrome 常见的问题WebDriverException: unknown error: call function result missing 'value'
运行chrome浏览器 报错:"main" org.openqa.selenium.WebDriverException: unknown error: call function ...
- elasticsearch索引自动清理
一 es 基本操作 查看所有的索引文件: curl -XGET http://localhost:9200/_cat/indices?v GET /_cat/indices?v DELETE /fi ...