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

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资源:

<html>
<head><script src="http://example.com/abc.js"></script>...
</head>
<body>
...
</body>
</html>

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() {varjs = 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为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,否则,抛出一个错误。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/290275.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux下重启mysql php nginx

# /etc/init.d/mysql restart # /etc/init.d/php-fpm restart # /etc/init.d/nginx restart转载于:https://www.cnblogs.com/yiluxiuxing/p/4140627.html

C和指针之字符串编程练习9(在参数1中查找匹配参数2额任意字符)

1、问题 函数应该在第一个参数中进行查找&#xff0c;并返回匹配第二个参数所包含的字符的数目 2、代码实现 #include <stdio.h> #include <string.h>//函数应该在第一个参数中进行查找&#xff0c;并返回匹配第二个参数所包含的字符的数目 int count_chars(char…

最流行的 .NET 开源项目合集

Github 上有很多优秀的 .NET 开源项目&#xff0c;它们很适合用来学习 .NET 、设计模式和架构。nopCommerce https://github.com/nopSolutions/nopCommercestar: 7k ⭐nopCommerce 是最受欢迎最好的开源电子商务购物车解决方案之一&#xff0c;它基于 ASP.NET Core&#xff…

绿米开关如何重置_三种墙壁开关:绿米、调光、凌动/米家之间的异同

三种墙壁开关&#xff1a;绿米、调光、凌动/米家之间的异同2020-06-18 18:17:179点赞28收藏6评论三种墙壁开关&#xff1a;绿米、调光、凌动/米家之间的异同详细讲解绿米Aqara智能墙壁开关、Yeelight调光开关(86盒版)、Yeelight凌动开关/米家墙壁开关(米家墙壁开关也是Yeelight…

NES模拟器开发-PPU笔记

20151008 占坑,暂时没弄清楚PPU数据如何初始化,绘制顺序等. 转载于:https://www.cnblogs.com/Red_angelX/p/4860497.html

phpRedisAdmin 安装

phpRedisAdmin是一个web端管理redis的工具&#xff0c;每次都是命令行操作&#xff0c;今天安装了下&#xff0c;做个笔记[rootlocalhost linshi]# git clone https://github.com/ErikDubbelboer/phpRedisAdmin.git Initialized empty Git repository in /root/linshi/phpRedis…

GFS(Genetic Fuzzy Systems)—— 基于专家先验规则库和遗传算法相结合的智能体决策算法

文章目录1. FIS 系统&#xff08;Fuzzy Inference Systems&#xff09;1.1 什么是 FIS 系统&#xff1f;1.2 使用 FIS 算法的几个步骤2. GFS 系统&#xff08;GA FIS&#xff09;2.1 什么是基因遗传算法&#xff08;GA&#xff09;?2.2 使用GA算法进化FIS规则库在大规模的多智…

3-unit1 IPv6网络的管理

##########IPv6网络的管理#############学习目标了解IPv6管理IPv6##)IPv6简介Internet Protocol Version 6IPv6是IETF&#xff08;和互联网工程任务组&#xff09;设计的用与替代现行版本IP协议的下一代IP协议。IPv6采用128位2进制数码表示##IPv6示意图:##IPv6表示方式为方便操…

C和指针之字符串编程练习8实现char *my_strnchr(char const *str, int ch, int which)

1、问题 编写函数类似strchr函数,但是它有3个参数,第三个参数是1, 这个函数的功能就和strchr完全一样, 如果第三个参数是2,这个函数就返回一个指向ch字符在str字符串第二次出现的位置的指针,以此类推 2、代码实现 1 #include <stdio.h>2 #include <string.h>3…

Xamarin效果第一篇之时间轴

一直都想找个时间玩玩移动端,中间也去各种的调研快速的方式去开发;过程中还是太浮躁木有沉下心去学习;好早尝试过Flutter,二点让我不爽:1、配置环境好费劲(VS把我惯坏了)&#xff1b;2、套娃的写法真是恶心;来看看酸爽不:因为一直都是C#开发,所以这次再次摸索Xamarin去开发;前面…

bootstrap tabale 点击_jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据...

今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示:例子查看请演示查看.截图如图所示:实现步骤:几个需要注意的点:1. tab部分加一个data-id, 当中的id与下面要显示的具体内容的ta…

AJAX+json+jquery实现预加载瀑布流布局

AJAXjsonjquery实现预加载瀑布流布局转载于:https://www.cnblogs.com/zhujiabin/p/4860954.html

Lync 小技巧-42-动态-IP-统一沟通-环境-IP-变更后-操作

1. 查看-你的-公网IPhttp://www.ip138.com/2. 修改-你的-公网A记录https://www.godaddy.com/3. 修改-你的-拓朴-For-边缘服务器3.1.远程-前端服务器3.2.下载-拓朴3.3.选择-边缘服务器3.4.选择-边缘服务器3.5.修改-公网IP116.230.255.783.5.发布-拓朴3.6.导出-拓朴3.7.复制-拓朴…

C和指针之字符串memcpy、memmove、memset使用总结

1、介绍memcpy、memmove、memset 1) void *memcpy(void *dest, const void *src, size_t n); 从源src所指的内存地址的起始位置开始拷贝n个字节到目标dest所指的内存地址的起始位置中 2) void *memmove( void* dest, const void* src, size_t count ); 从src拷贝count个字节…

Blazor University (1)介绍 - 什么是 Blazor?

原文链接&#xff1a;https://blazor-university.com/overview/what-is-blazor/什么是 Blazor&#xff1f;Blazor 是一个单页应用程序开发框架。Blazor 这个名称是单词 Browser 和 Razor&#xff08;.NET HTML 视图生成引擎&#xff09;的组合/变异。这意味着 Blazor 不必在服务…

Git在版本2.13中继续改进了安全性和UI

Git的最新版本做了很多改进&#xff0c;旨在改进其用户界面&#xff0c;同时也修复了两个重要的漏洞。\\众所周知&#xff0c;Git用于唯一识别对象的SHA-1哈希算法最近被证明容易受到碰撞攻击。虽然Git团队准备过渡到一个新的更安全的散列算法&#xff0c;但它们已经实现了一种…

Mysql日期和时间函数

转载自:http://fanqiang.chinaunix.net/a2/b1/20010705/150000802.html 对于每个类型拥有的值范围以及并且指定日期何时间值的有效格式的描述见7.3.6 日期和时间类型。 这里是一个使用日期函数的例子。下面的查询选择了所有记录&#xff0c;其date_col的值是在最后30天以内&am…

jquery特效(1)—点击展示与隐藏全文

下班了~~~我把今天整理的一个jquery小特效发一下&#xff0c;个人觉得比较简单&#xff0c;嗖嗖的就写出来了~~~ 下面先来看最终的动态效果&#xff1a; 一、来看一下主体框架程序&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8&quo…

python中return和printf的区别_Python格式化输出:%s和format()用法比较

1、python格式化输出历史起源python2.5之前&#xff0c;我们使用的是老式格式化输出&#xff1a;%s。从python3.0开始起(python2.6同期发布)&#xff0c;同时支持两个版本的格式化&#xff0c;多出来的一个新版本就是利用format()函数&#xff0c;进行格式化输出。2、为什么要学…

C和指针之字符串简单实现 strcpy、strcat、strstr函数

1、实现strcpy函数 #include <stdio.h>//简单实现strcpy函数 char *my_strcpy(char *des, const char *src) {if (des == NULL || src == NULL)return des;char *result = des;while ((*des++ = *src++) != \0);return result; }int main() {char des[20];const char *sr…