2345技术员联盟

一份详细的AJAX与跨域处理讲解

  • 来源:未知 原创
  • 时间:2018-05-10
  • 阅读:
  • 本文标签:

           在前端的世界里也逛荡了不少日子了,目前已经get到大约5种发起请求的方式,主流的、非主流的可是1.我们可能想用GET POST PUT DELETE 方法2.不想刷新整个页面,想用一种更易于理解的方式来响应AJAX出现浏览器和服务器交互模式V1.0在AJAX未出现之前,浏览器想从服务器获得资源,注意是获取资源,会经过如下一个过程:浏览器发起请求->服务器接到请求响应给你HTML文档->浏览器收到资源,刷新页面,加载获得的的HTML。简略的过程。我称这种交互方式是V1.0,此时还是以获取资源为导向。后来随着时代的发展,人们日益增长的文化需求成为了社会的主要矛盾……有一天,小明看了一篇报道,他只是想在下面评论一下,发表对实事的亲切问候,问候完了,唉,你给我刷新页面干啥,我只是想评论一下啊。概那是网民们第一次对 良好的用户体验 提出了要求。后来的苹果爸爸,把大家惯坏了,天天嚷着"你这产品用户体验太差了"……彼时,微软还是对web做出了很大的贡献的。交互模式2.0大约1999年,微软发布IE 5.0版本,它允许Java脚本向服务器发起HTTP请求。不过很遗憾,当时也没有火起来,直到2004年Gmail发布和2005年Google Map发布,才引起广泛重视。2005年,一个叫Jesse James Garrett的人提出了一个新术语----AJAX,它是一系列技术的组合体,全称是 Asynchronous Java + XML(异步的JS和XML)可以阻止页面整体刷新,只是动态响应用户的操作,快速显示到局部,用户就可以很愉快的继续上网了。





               AJAX可以看出IE当时还是很猛的,随着IE 6.0市场份额进一步扩大,IE已经把火狐整的半死不活,放眼整个浏览器市场,微软是当之无愧的王者,后来微软就把浏览器团队解散了……不得不说这是一波神操作,能与之媲美的操作大概只有残血我能反杀 塔下我能秀他了。微软强行为后续各家浏览器的发展提供了优秀的工程师,尤其是08、09年出生的谷歌浏览器,再看如今的IE……既然AJAX是一系列的技术的组合体,接下来认识一下其中的几位主角对象是用来在浏览器和服务器之间传输数据的。古代的操作的是:浏览器构造实例化对象用这个对象发起请求服务器响应一个XML格式的字符串,是字符串,是字符串,是字符串,也就是说响应的第四部分是字符串。JS解析符合XML格式的字符串,更新局部页面。什么是XML?可扩展标记语言以上是最初的用法,用的是XML,前端代码片段如服务器端的对应代码片本地模拟的话,一定要记得开俩不同的端例如:node server.js 8001node server.js 8002实例的详解正如上面的前端代码片段写的一样,主要用到了open() send()方法, onreadystatechange readyState 属性。1.request.open(method, URL, async)方法。一般用三个参数,第一个参数是请求的方法,可以用GET POST DELETE PUT等等,URL是用访问的路径,async是是否使用同步,默认true,开启异步,不需要做修改即可,所以实际中只写前两个参数如果非要写false,开启同步,会对浏览器有阻塞效应,而且如果值为false,则send()方法不会返回任何东西,直到接受到了服务器的返回数据2.request.send()方法。发送请求. 如果该请求是异步模式(默认),该方法会立刻返回. 相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回。





         3.readyState属性。0 === 常量 UNSENT (未打开) open()方法未调用1 === OPENED (未发送) 只是open()方法调用了2 === HEADERS_RECEIVED (已获取响应头) send()方法调用了,响应头和响应状态已经返回了3 === LOADING (正在下载响应体) 响应体下载中,responseText已经获取了部分数据4 === DONE (请求完成) 整个响应过程完毕了。 这个值是实际中用到的。只要不等于4,就表示请求还在进行中。描述请求的五个状态。4.responseText属性是此次响应的文本内容。5.onreadystatechange属性。readyState属性的值发生改变,就会触发readyStateChange事件。我们可以通过onReadyStateChange属性,指定这个事件的回调函数,对不同状态进行不同处理。尤其是当状态变为4的时候,表示通信成功,这时回调函数就可以处理服务器传送回来的数据。即前面的代码片段的处理方式。6.其他的方法、属性、事件详见阮一峰博客、MDN文档习惯用java的前端是不想和XML打交道的,应该用一种符合js风格的数据格式语言。JSON后来一个美国程序员道格拉斯·克罗克福特发明了JSON,解决了上面的问题,这货还写了一本蝴蝶书Java语言精粹,还发明了一个JS校验器 ----JSLint。JSON(Java Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于Java Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, Java, Perl, Python等)。 这些特性使JSON成为理想的数据交换语言。





               以上是JSON官网的简介,可以看出它是一门全新的语言,不是Java的子集。JSON很简单,数据类型和JS有点不同的地方。浏览器的全局对象window上有JSON对象,直接使用window.JSON.parse(string)以上是JSON解析部分的代码。此时服务器端代码是:我们浏览器有同源政策,不是同协议同域名同端口的网页无法相互访问。AJAX恰好是同源政策的拥趸。CORS.如果AJAX向非同源的地址发起请求,会报错。这种错误无法通过状态码识别,因为HTTP回应的状态码有可能是200,也就是说即使你看到了200的正确码,也没有用.但是form表单无视同源政策,可以发起跨域请求。上述请求响应都没有问然而对于AJAX就不行这是为什么呢,因为因为原页面用 form 提交到另一个域名之后,原页面的脚本无法获取新页面中的内容,所以浏览器认为这是安全的。而 AJAX 是可以读取响应内容的,因此浏览器不能允许你这样做。如果你细心的话你会发现,其实请求已经发送出去了,你只是拿不到响应而已。所以浏览器这个策略的本质是,一个域名的,在未经允许的情况下,不得读取另一个域名的内容。但浏览器并不阻止你向另一个域名发送请求。那么如何让AJAX跨域发起请求呢?答案是CORSCORS目前是W3C的标准,它允许浏览器跨域发起请求,而且可以发起多种请求,不像JSONP只能发起GET请求,全称是"跨域/源资源共享"(Cross-origin resource sharing)。


本文来自电脑技术网www.it892.com),转载本文请注明来源.
本文链接:http://www.it892.com/content/web/ajax/0510932502018.html

推荐阅读
热点排行
  1. 一份详细的AJAX与跨域处理讲解
  2. ajax轮询在压测平台中的应用
无觅相关文章插件,快速提升流量