博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js温故而知新11(AJAX)——学习廖雪峰的js教程
阅读量:5949 次
发布时间:2019-06-19

本文共 2843 字,大约阅读时间需要 9 分钟。

Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求。

如果仔细观察一个Form的提交,你就会发现,一旦用户点击“Submit”按钮,表单开始提交,浏览器就会刷新页面,然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因,就会得到一个404页面。

这就是Web的运作原理:一次HTTP请求对应一个页面。

如果要让用户留在当前页面中,同时发出新的HTTP请求,就必须用JavaScript发送这个新请求,接收到数据后,再用JavaScript更新页面,这样一来,用户就感觉自己仍然停留在当前页面,但是数据却可以不断地更新。

如果你想把标准写法和IE写法混在一起,可以这么写:

var request;if (window.XMLHttpRequest) {    request = new XMLHttpRequest();} else {    request = new ActiveXObject('Microsoft.XMLHTTP');}

当创建了XMLHttpRequest对象后,要先设置onreadystatechange的回调函数。在回调函数中,通常我们只需通过readyState === 4判断请求是否完成,如果已完成,再根据status === 200判断是否是一个成功的响应。

XMLHttpRequest对象的open()方法有3个参数,第一个参数指定是GET还是POST,第二个参数指定URL地址,第三个参数指定是否使用异步,默认是true,所以不用写。

最后调用send()方法才真正发送请求。GET请求不需要参数,POST请求需要把body部分以字符串或者FormData对象传进去。

跨域:

一是通过Flash插件发送HTTP请求,这种方式可以绕过浏览器的安全限制,但必须安装Flash,并且跟Flash交互。不过Flash用起来麻烦,而且现在用得也越来越少了。

二是通过在同源域名下架设一个代理服务器来转发,JavaScript负责把请求发送到代理服务器:

'/proxy?url=http://www.sina.com.cn'

代理服务器再把结果返回,这样就遵守了浏览器的同源策略。这种方式麻烦之处在于需要服务器端额外做开发。

第三种方式称为JSONP,它有个限制,只能用GET请求,并且要求返回JavaScript。这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源:

        ......

JSONP通常以函数调用的形式返回,例如,返回JavaScript内容如下:

foo('data');

这样一来,我们如果在页面中先准备好foo()函数,然后给页面动态加一个<script>节点,相当于动态读取外域的JavaScript资源,最后就等着接收回调了。

因此我们需要首先在页面中准备好回调函数:

function refreshPrice(data) {    var p = document.getElementById('test-jsonp');    p.innerHTML = '当前价格:' +        data['0000001'].name +': ' +         data['0000001'].price + ';' +        data['1399001'].name + ': ' +        data['1399001'].price;}

最后用getPrice()函数触发:

function getPrice() {    var        js = document.createElement('script'),        head = document.getElementsByTagName('head')[0];    js.src = 'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice';    head.appendChild(js);}

CORS

Cross-Origin Resource Sharing
Origin表示本域,也就是浏览器当前页面的域。当JavaScript向外域(如sina.com)发起请求后,浏览器收到响应后,首先检查Access-Control-Allow-Origin是否包含本域,如果是,则此次跨域请求成功,如果不是,则请求失败,JavaScript将无法获取到响应的任何数据。
用一个图来表示就是:

clipboard.png

假设本域是my.com,外域是sina.com,只要响应头Access-Control-Allow-Origin为,或者是*,本次请求就可以成功。

可见,跨域能否成功,取决于对方服务器是否愿意给你设置一个正确的Access-Control-Allow-Origin,决定权始终在对方手中

无论你是否需要用JavaScript通过CORS跨域请求资源,你都要了解CORS的原理。最新的浏览器全面支持HTML5。在引用外域资源时,除了JavaScript和CSS外,都要验证CORS。例如,当你引用了某个第三方CDN上的字体文件时:

/* CSS */@font-face {  font-family: 'FontAwesome';  src: url('http://cdn.com/fonts/fontawesome.ttf') format('truetype');}

如果该CDN服务商未正确设置Access-Control-Allow-Origin,那么浏览器无法加载字体资源。

对于PUT、DELETE以及其他类型如application/json的POST请求,在发送AJAX请求之前,浏览器会先发送一个OPTIONS请求(称为preflighted请求)到这个URL上,询问目标服务器是否接受:

OPTIONS /path/to/resource HTTP/1.1Host: bar.comOrigin: http://my.comAccess-Control-Request-Method: POST

服务器必须响应并明确指出允许的Method:

HTTP/1.1 200 OKAccess-Control-Allow-Origin: http://my.comAccess-Control-Allow-Methods: POST, GET, PUT, OPTIONSAccess-Control-Max-Age: 86400

浏览器确认服务器响应的Access-Control-Allow-Methods头确实包含将要发送的AJAX请求的Method,才会继续发送AJAX,否则,抛出一个错误。

转载地址:http://glsxx.baihongyu.com/

你可能感兴趣的文章
【转】ubuntu右键在当前位置打开终端
查看>>
mysql 查询当天、本周,本月,上一个月的数据
查看>>
Scrum团队开发
查看>>
【C#公共帮助类】分页逻辑处理类
查看>>
关于最短路的随笔
查看>>
css 伪元素
查看>>
url-pattern配置
查看>>
springmvc管理资源开放
查看>>
成为Java顶尖程序员 ,看这11本书就够了
查看>>
新手入门学习(一)
查看>>
day10 nfs服务,nginx负载均衡,定时任务
查看>>
linux概念之/dev/shm
查看>>
shell之条件表达式
查看>>
实例!软件缺陷数据度量和分析
查看>>
sql performance Kill Lock
查看>>
php上传视频html代码,HTML_html5拍照功能实现代码(htm5上传文件),1、 视频流HTML5 The Media Capture - phpStudy...
查看>>
php intelephense,vsCode 使用 PHP Intelephense插件函数跳转跟踪
查看>>
mysql 日期小时,如何从MySQL中的日期时间减去3小时?
查看>>
mysql存储过程批量多表删除,[mysql]表批量操作的存储过程
查看>>
linux界面如何配置永久路由,linux 添加永久路由的几种方法。
查看>>