原生的ajax实现方式

是通过XMLHttpRequest对象来实现的,该对象包含了一些方法来进行请求的发送、监听请求过程中的状态、接收响应内容等:

var xhr = new XMLHttpRequest();
xhr.onReadyStateChange = function() {
    if (xhr.readyState === 4) { //不使用this更靠谱
        if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
        alert(xhr.responseText);
        }
};
xhr.open('get','url',true);
xhr.setRequestHeader('name','value');
xhr.send(null); //不发送任何内容必须使用null

readyState 共有5种状态,在此一一不作说明。其中4 表示已接收到所有的响应内容。readyStateChange 事件绑定需要在open 方法调用之前。setRequestHeader 方法需要在opensend 之间调用。

此外,如果需要在url上加参数,必须使用encodeURIComponent 来对参数的namevalue 进行编码。encodeURIComponent只能使用UTF-8编码格式.

插播一下URL编码:

RFC 1738规定:

“只有字母和数字[0-9a-zA-Z]、一些特殊符号”$-_.+!*’(),”[不包括双引号]、以及某些保留字,才可以不经过编码直接用于URL。”

而不同的操作系统、不同的浏览器、不同的网页字符集,将导致完全不同的编码结果。并且URL本身和后面追加的查询参数的编码方式很可能不同。这样会比较混乱,因此可以提前使用JS对URL进行编码,使得统一,而不直接通过浏览器。

参考:
关于URL编码
url的三个js编码函数escape(),encodeURI(),encodeURIComponent()简介

跨域

当异步请求地址的协议、主域名、子域名(例如www)、端口号中有任何一个同源页面不同,则是一次跨域请求。

跨域资源共享

CORS是W3C的一个工作草案。是通过头部来进行浏览器和服务器间的沟通。
通过设置自定义头部Origin,该头部内容为请求源的地址和端口号。服务器如果接收请求,则会在Access-Control-Allow-Origin 相应头部中返回与Origin 相同内容或者* (公共资源)。如果不接受,则不返回该头部或者头部不匹配。浏览器就会驳回该请求。

现代浏览器已经通过原生的xhr对象实现了跨域请求(IE10+)。使用方式和同源的没什么区别,当浏览器发现ajax进行跨域后,会自动添加一些请求头部。主要需要服务器实现CORS接口。
但跨域xhr对象也有一些使用上的限制。
同时,跨域请求分为简单请求和非简单请求,当为非简单请求时,预先发送一个option 类型的请求进行预检(preflight),服务器通过后,浏览器才会发送真正的请求(和简单请求一样)。

参考:
跨域资源共享 CORS 详解

JSONP

跨域资源共享方式比JSONP更强大,前者支持所有请求方式,而后者只支持GET 。不过JSONP对于那些不支持CORS的浏览器来说是实现跨域的一种方式。
JSONP的实现原理是src 是不受同源策略限制的,当script标签出现在文档树种时,会请求一段JS代码,获取到该代码后立即执行。
需要前端和服务端之间约定好callback的字段名(即下例中的callbackName),方便后端取到回调函数,并用将数据作为参数传递给回调函数然后返回这个回调函数,页面在获取到这个回调函数后会立即执行。
前端需要做的:

//1. 声明一个回调函数
function callback(data) {
    //deal with data
}

//2. 动态生成一个script标签并插入文档树
var script = document.createElement('script');
script.src = 'http://write.blog.csdn.net?callbackName=callback';
document.getElementsByTagName("head")[0].appendChild(script);

还有一些其他跨域方式:
前端跨域的整理

访问未声明的变量会报错,但访问不存在的对象的属性不会报错,返回undefined

ajax与跨域的更多相关文章

  1. HTML5 播放 RTSP 视频的实例代码

    目前大多数网络摄像头都是通过 RTSP 协议传输视频流的,但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码,需要的朋友参考下吧

  2. 详解使用postMessage解决iframe跨域通信问题

    这篇文章主要介绍了详解使用postMessage解决iframe跨域通信问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  3. 浅析HTML5中的download属性使用

    这篇文章主要介绍了浅析HTML5中的download属性使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  4. 解析html5 canvas实现背景鼠标连线动态效果代码

    流行的动态背景连线特效。今天小编通过实例代码给大家解析html5 canvas实现背景鼠标连线动态效果,感兴趣的朋友一起看看吧

  5. HTML5 Blob 实现文件下载功能的示例代码

    这篇文章主要介绍了HTML5 Blob 实现文件下载功能的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  6. web字体加载方案优化小结

    这篇文章主要介绍了web字体加载方案优化小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  7. ios – 在WKWebView中获取链接URL

    我想在WKWebView中获取tapped链接的url.链接采用自定义格式,可触发应用中的某些操作.例如HTTP://我的网站/帮助#深层链接对讲.我这样使用KVO:这在第一次点击链接时效果很好.但是,如果我连续两次点击相同的链接,它将不报告链接点击.是否有解决方法来解决这个问题,以便我可以检测每个点击并获取链接?任何关于这个的指针都会很棒!解决方法像这样更改addobserver在observeValue函数中,您可以获得两个值

  8. ios – 加载空白页面的SFSafariViewController

    我正在使用SFSafariViewController在我的iOS应用程序中打开一个URL..它在iOS9上完美运行但在将我的设备更新到iOS10后,它只是在地址栏中加载了一个没有URL的空白页面.甚至safariViewController(控制器:SFSafariViewController,didCompleteInitialLoaddidLoadSuccessfully:Bool)在控制器

  9. ios – 应用更新,NSURL和文档目录

    我应该存储相对图像网址或字符串来表示这些资源的位置,还是应该可以存储最终成为绝对网址的内容?

  10. ios – 从Facebook这样的任何URL获取特定图像

    我的问题看起来可能与其他问题类似,但事实并非如此.(据我所知).我无法理解如何从任何URL获取特定图像像Facebook一样,我无法向您显示屏幕截图,因为我没有真正的设备.但我可以告诉你Skype的屏幕截图来自MAC.任何帮助将不胜感激.thanks.编辑:我使用这个link获得了favicon,但它非常小我想要更大的尺寸.解决方法最后,我得到了答案.这可能对你有帮助,这就是为什么我发布这个答案.

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部