js温故而知新11(AJAX)——学习廖雪峰的js教程

kun_jian 发布于2019-08-20 16:45 / 2734人阅读

摘要：在回调函数中，通常我们只需通过判断请求是否完成，如果已完成，再根据判断是否是一个成功的响应。因此我们需要首先在页面中准备好回调函数当前价格最后用函数触发表示本域，也就是浏览器当前页面的域。

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()函数，然后给页面动态加一个

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

可见，跨域能否成功，取决于对方服务器是否愿意给你设置一个正确的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.1
Host: bar.com
Origin: http://my.com
Access-Control-Request-Method: POST

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

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://my.com
Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS
Access-Control-Max-Age: 86400

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

idc机房托管云服务器廖雪峰的python教程 python教程廖雪峰 python廖雪峰教程廖雪峰python视频教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83133.html

js温故而知新8(浏览器)——学习廖雪峰的js教程

摘要：对象不但充当全局作用域，而且表示浏览器窗口。对象有和属性，可以获取浏览器窗口的内部宽度和高度。对象表示当前页面的信息。由于在浏览器中以形式表示为树形结构，对象就是整个树的根节点。这个行为由浏览器实现，主流浏览器均支持选项，从开始支持。浏览器目前主流的浏览器： IE 6~11：从IE10开始支持ES6标准； Chrome：基于Webkit内核，内置了非常强悍的JavaScript引...

charles_paul 2019-08-20 15:07 评论0 收藏0
js温故而知新4——学习廖雪峰的js教程

摘要：你可能认为调用，和结果应该是，，，但实际结果是全部都是原因就在于返回的函数引用了变量，但它并非立刻执行。返回闭包时牢记的一点就是返回函数不要引用任何循环变量，或者后续会发生变化的变量。真的是看着很晕那闭包另一个需要注意的问题是，返回的函数并没有立刻执行，而是直到调用了f()才执行。我们来看一个例子： function count() { var arr = []; ...

genefy 2019-08-21 11:35 评论0 收藏0
js温故而知新10(操作表单)——学习廖雪峰的js教程

摘要：用操作表单和操作是类似的，因为表单本身也是树。因此，第二种方式是响应本身的事件，在提交时作修改可以在此修改的继续下一步注意要来告诉浏览器继续提交，如果，浏览器将不会继续提交，这种情况通常对应用户输入有误，提示用户错误信息后终止提交。用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。 HTML表单的输入控件主要有以下几种：文本框，对应的，用于输入文本； ...

simon_chen 2019-08-20 15:08 评论0 收藏0
js温故而知新6(JSON)——学习廖雪峰的js教程

JSON JSON是JavaScript Object Notation的缩写，它是一种数据交换格式。道格拉斯·克罗克福特（Douglas Crockford）--雅虎的高级架构师--发明了JSON这种超轻量级的数据交换格式. 序列化让我们先把小明这个对象序列化成JSON格式的字符串： var xiaoming = { name: 小明, age: 14, gender...

20171112 2019-08-21 11:36 评论0 收藏0
js温故而知新2——学习廖雪峰的js教程

摘要：让我们拆开写小明正常结果单独调用函数怎么返回了请注意，我们已经进入到了的一个大坑里。如果单独调用函数，比如，此时，该函数的指向全局对象，也就是。函数 1. arguments JavaScript还有一个免费赠送的关键字arguments，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array： function fo...

Caizhenhao 2019-08-21 11:34 评论0 收藏0