xmlhttprequest

前端总结系列 前端总结·基础篇·CSS（一）布局 前端总结·基础篇·CSS（二）视觉 前端总结·基础篇·CSS（三）补充 前端总结·基础篇·JS（一）原型、原型链、构造函数和字符串（String） 前端总结·基础篇·JS（二）数组深拷贝、去重以及字符串反序和数组（Array） 前端总结·基础篇·JS（三）arguments、callee、call、apply、bind及函数封装和构造函数 前端总结·基础篇·JS（四）异步请求及跨域方案 前端总结·工具篇·管理（一）常用模块化方案 目录 一、异步请求 1.1 XHR（XMLHttpRequest） 1.2 Promise（ES6） 1.3 Fetch 二、跨域方案 2.1 JSONP（JavaScript Object Notation with Padding） 2.2 CORS（Cross-origin resource sharing） 一、异步请求 此文只进行简单的介绍，完整的用例请见我的 Github 。Github上的用例，对这三种方法的POST和GET请求都进行了封装。 Github演示不支持POST请求，所以会有部分报错。完整测试可以放在本机的localhost下。 a.json ------------- { "user":"张三", "folling":30, "foller": 20 } 1.1 XHR

当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时，资源会发起一个 跨域 HTTP 请求 。 比如，站点 http://domain-a.com 的某 HTML 页面通过 <img> 的 src 请求 http://domain-b.com/image.jpg。网络上的许多页面都会加载来自不同域的CSS样式表，图像和脚本等资源。 出于安全考虑，浏览器会限制从脚本内发起的跨域HTTP请求。例如， XMLHttpRequest 和 Fetch 遵循 同源策略 。因此，使用 XMLHttpRequest 或 Fetch 的Web应用程序只能将HTTP请求发送到其自己的域。为了改进Web应用程序，开发人员要求浏览器厂商允许跨域请求。 （译者注： 这段描述跨域不准确， 跨域并 非 不一定是浏览器限制了发起跨站请求， 而 也可能是跨站请求可以正常发起，但是返回结果被浏览器拦截了。最好的例子是 CSRF 跨站攻击原理，请求是发送到了后端服务器无论是否跨域！注意：有些浏览器不允许从 HTTPS 的域跨域访问 HTTP，比如 Chrome 和 Firefox，这些浏览器在请求还未发出的时候就会拦截请求，这是一个特例。） 跨域资源共享（ CORS ）机制允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。浏览器支持在 API 容器中（例如

1. AJAX 的概念 AJAX，即 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML） 同步：前面的代码不执行完毕，后面的代码无法执行 异步：前面的代码不执行完毕，后面的代码也可正常执行 作用：在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页，实现异步无刷新 运用场景：表单验证，搜索框输入，论坛，博客等 2. XMLHttpRequest 对象 XMLHttpRequest 用于在后台与服务器交换数据 创建XMLHttpRequest 对象 var xmlhttp; if(window.XMLHttpRequest){ //ie7以上、谷歌、火狐支持 xmlhttp = new XMLHttpRequest(); }else{ //老版本的ie5、6使用ActiveX xmlhttp = new ActiveXObject(); } 向服务器发送请求 　　open(请求类型get/post，发送地址，同步true/异步false) 　　send(string仅用于post请求)　　 xmlhttp.open("get","01.txt",true); xmlhttp.send(); 　　当选择同步时，规定在响应处于 onreadystatechange(存储函数，当 readyState 属性改变时调用

// XMLHttpRequest请求 function xhr (url, data) { var xhr = new XMLHttpRequest() if (xhr) { xhr.open('POST', url, true) // 默认为异步true、同步为false xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') xhr.send(data) // 需要传递的参数 　xhr.onreadystatechange = function() { // 0：未初始化。尚未调用open()方法。 // 1：启动。已经调用open()方法，但尚未调用send()方法。 // 2：发送。已经调用send()方法，但尚未接收到响应。 // 3：接收。已经接收到部分响应数据。 // 4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。 if (xhr.readyState == 4) { if (xhr.status == 200) { console.log(xhr.responseText) } } } } } xhr('https://www.baidu.com', {}) // fetch请求 function fth (url, data) { fetch(url, {

fetch和XMLHttpRequest 如果看网上的fetch教程，会首先对比XMLHttpRequest和fetch的优劣，然后引出一堆看了很快会忘记的内容(本人记性不好)。因此，我写一篇关于fetch的文章，为了自己看着方便，毕竟工作中用到的也就是一些很基础的点而已。 fetch，说白了，就是XMLHttpRequest的一种替代方案。如果有人问你，除了Ajax获取后台数据之外，还有没有其他的替代方案？ 这是你就可以回答，除了XMLHttpRequest对象来获取后台的数据之外，还可以使用一种更优的解决方案fetch。 如何获取fetch 到现在为止，fetch的支持性还不是很好，但是在谷歌浏览器中已经支持了fetch。fetch挂在在BOM中，可以直接在谷歌浏览器中使用。 查看fetch的支持情况： fetch的支持情况 当然，如果不支持fetch也没有问题，可以使用第三方的ployfill来实现只会fetch： whatwg-fetch fetch的helloworld 下面我们来写第一个fetch获取后端数据的例子： // 通过fetch获取百度的错误提示页面 fetch('https://www.baidu.com/search/error.html') // 返回一个Promise对象 .then((res)=>{ return res.text() // res

Ajax：是对Asynchronous Javascript + XML 的简写，它是无须刷新页面也可以从服务器取得数据的一种方法。总结为以下几方面： 1.负责Ajax的运作核心对象是XMLHTTPRequest（XHR）对象; 2. 3. Ajax的工作流程 0-4 表示： xhr对象的readyState属性的属性值；该属性表示请求/响应过程的当前活动阶段； 0 UNSENT 未初始化。未发送请求。尚未调用open()方法 1 OPENED 启动。已经调用open()方法，尚未调用send()方法 2 HEADERS_RECEIVED 发送。已经调用send()方法，尚未接到响应（即未返回内容，只返回了响应头部） 3 LOADING 接收部分数据中。（返回内容，数据量大，分批返回） 4 DONE 完成。 （数据完全接受完成，可以在客户端使用了） 1.1 XHR的用法 1.1.1 xhr.open(); 3个参数： 第一个：发送的请求的类型（get、post等） 第二个：请求的URL; 第三个：是否异步发送请求的布尔值； false 同步 在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个执行将会一直等待下去，直到收到返回信息才继续执行下去 true 异步 不需要一直等下去，而是继续执行下面的操作，不管其他执行的状态。当有消息返回时系统会进行通知处理

Ajax与JSON的一些总结 1.1.1 摘要 Ajax技术的核心是 XMLHttpRequest 对象（简称XHR），可以通过使用XHR对象获取到服务器的数据，然后再通过DOM将数据插入到页面中呈现。虽然名字中包含XML，但Ajax通讯与数据格式无关，所以我们的数据格式可以是XML或JSON等格式。 XMLHttpRequest对象用于在后台与服务器交换数据，具体作用如下： 在不重新加载页面的情况下更新网页 在页面已加载后从服务器请求数据 在页面已加载后从服务器接收数据 在后台向服务器发送数据 本文目录 XMLHttpRequest的用法 Ajax同源请求 同源策略与跨源策略 Ajax跨源请求 1.1.2 正文 XMLHttpRequest是一个JavaScript对象，它是由微软设计，并且被Mozilla、Apple和Google采纳，W3C正在标准化它。它提供了一种简单的方法来检索URL中的数据。 我们要创建一个XMLHttpRequest实例，只需new一个就OK了： //// Creates a XMLHttpRequest object. var req = new createXHR(); 也许有人会说：“这可不行啊！IE6不支持原始的XHR对象”，确实是这样，我们在后面将会介绍支持IE6或更老版本创建XHR对象的方法。 XMLHttpRequest的用法

一、什么是 AJAX ？ AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。 有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。 1、AJAX是基于现有的Internet标准 AJAX是基于现有的Internet标准，并且联合使用它们： XMLHttpRequest 对象 (异步的与服务器交换数据) JavaScript/DOM (信息显示/交互) CSS (给数据定义样式) XML (作为转换数据的格式) 注意：AJAX应用程序与浏览器和平台无关的！ 2、AJAX 工作原理 二、AJAX - 创建 XMLHttpRequest 对象 1、XMLHttpRequest 对象 XMLHttpRequest 是 AJAX 的基础。所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。 XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 2、创建 XMLHttpRequest