Ajax这一篇就够了????
ajax这一篇就够了???
固然不够,这是一个小垃圾本身整理来看的笔记javascript
张三丰：“无忌，我教你的ajax还记得多少？” 张无忌：“回太师傅，我只记得一大半” 张三丰：“那，如今呢？” 张无忌：“已经剩下一小半了” 张三丰：“那，如今呢？” 张无忌：“我已经把全部的全忘记了！” 张三丰：“你丫的赶忙滚去复习…”php
o(╥﹏╥)o好的师傅,是的师傅css
1http协议的简单回顾
http协议 是文本传输协议html规定了浏览器和服务器之间的通讯规则前端
`HTTP1协议规定了请求和响应的标准java
http的特色jquery
- 1.简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法经常使用的有
GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不一样。因为HTTP协议简单，使得HTTP服务器的程序规模小，于是通讯速度很快。 - 2.灵活：
HTTP容许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。 - 3.无链接：无链接的含义是限制每次链接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开链接。采用这种方式能够节省传输时间。
- 4.无状态：
HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺乏状态意味着若是后续处理须要前面的信息，则它必须重传，这样可能致使每次链接传送的数据量增大。另外一方面，在服务器不须要先前信息时它的应答就较快。 - 五、支持
B/S及C/S模式。
1.1请求与请求报文
1.1.1get请求的请求报文
//---请求行
// /mydata/01.php?username=pp&password=123456 请求路径+参数（注意点）
// HTTP/1.1 HTTP的版本号
GET /day02/01.php?username=pp&password=123456 HTTP/1.1
//---请求头
Host: www.study.com
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,`*/*`;q=0.8
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
//---请求体
//get请求没有请求体,须要传递的数据会拼接到请求行中
复制代码
1.1.2post请求的请求报文
//---请求行
POST /day02/01.php HTTP/1.1
//---请求头
Host: www.study.com
Connection: keep-alive
//传递的参数的长度。
Content-Length: 29
Cache-Control: max-age=0
Origin: http://www.study.com
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36
//内容类型：表单数据，若是是post请求，必须指定这个属性。
Content-Type: application/x-www-form-urlencoded
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,`*/*`;q=0.8
Referer: http://www.study.com/day02/01-login.html
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
//---请求体
username=pp&password=123456
复制代码
1.1.3 get请求与post请求的对比
get没有请求体所需的参数头都拼接到地址栏了post有请求体,请求体内是post要提交的数据
1.2响应与响应报文
- 状态行:响应的状态
- 响应头
- 响应体要响应的内容
//---------------------状态行（响应行）-------------------------------
//HTTP/1.1 HTTP版本
//200 响应的状态
//200表示成功
//304表示文档未修改
//404表示找不到资源
//500表示服务端错误
HTTP/1.1 200 OK
//----------------------响应头-----------------------------------------------
Date: Thu, 22 Jun 2017 16:51:22 GMT
Server: Apache/2.4.23 (Win32) OpenSSL/1.0.2j PHP/5.4.45
X-Powered-By: PHP/5.4.45
Content-Length: 18
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
//内容类型，告诉浏览器该如何解析响应结果
Content-Type: text/html;charset=utf-8
//-----------------------响应体------------------------------------------------
hello world
复制代码
2ajax
2.1什么是ajax
问个简单的问题,什么是爱情...咳咳咳,不什么是ajaxweb
ajax不是一种新的语言ajax本质上是在HTTP协议的基础上以异步的方式与服务器进行通讯
2.2为何会有ajax
-
同步渲染须要先获取数据,可是若是数据获取的速度慢了,就会影响整个页面的渲染速度,数据也没法更新面试
-
form表单获取数据ajax获取数据页面会跳转 页面不会跳转,能够局部刷新 只可以发送同步的请求 能够发送异步请求 用 html书写用 js书写
2.3同步与异步
ajax能够异步的获取数据ajax那么请问什么是异步
同步与异步
- **同步:**事情一件一件作,作完前一件才能作下一件
- **异步:**不受当前任务的影响,两件事情同时进行,作一件事情的时候不影响另外一件事情的进行
- **编程中的异步:**异步程序代码执行的时候不会阻塞其余程序代码执行,提升了总体执行的效率
网页异步的应用
- 表单验证,输入的同时获取数据与后台对比
- 百度搜索输入的同时,反馈回相关的内容
怎么实现异步
XMLHttpRequest能够以异步的请求数据处理程序,可实现对网页的部分更新,不会刷新页面
那么问题又又又来了什么是XMLHttpRequest
2.4XMLHttpRequest对象
什么是XMLHttpRequest对象来着,百度使我快乐
XMLHttpRequest对象用于在后台与服务器交换数据。XMLHttpRequest对象是开发者的梦想，由于您可以：- 在不从新加载页面的状况下更新网页
- 在页面已加载后从服务器请求数据
- 在页面已加载后从服务器接收数据
- 在后台向服务器发送数据
注意全部现代的浏览器都支持 XMLHttpRequest 对象。
2.4.1发送get请求
XMLHttpRequest以异步的方式发送HTTP请求，所以在发送请求时，同样须要遵循HTTP协议。
使用
XMLHttpRequest用异步的方式发送HTTP请求,所以在发送请求时,同样须要遵循HTTP
//1. 建立一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//2. 设置请求行
// 第一个参数:请求方式 get/post
// 第二个参数:请求的地址 须要在url后面拼上参数列表
// 第三个参数: 是否异步请求,默认是true true就是异步,false是同步
xhr.open("get", "01.php?name=haha");
//3. 设置请求头(get不用设置)
//请求头中能够设置Content-Type,用以说明请求主体的内容是如何编码
//get请求时没有请求体,无需设置请求头
//xhr.setRequestHeader()
//4. 设置请求体
//get请求的请求体为空,由于参数列表拼接到url后面了
xhr.send(null);
复制代码
注意点 :
get请求,设置请求行时,须要把参数列表拼接到url后面get请求不用设置请求头, 不用说明请求主体的编码方式get请求的请求体为null
2.4.2发送post请求
//1. 建立一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 2. 设置请求行 post请求的参数列表在请求体
xhr.open("post", "02.php");
// 3. 设置请求头, post 请求必需要设置 content-type, 标记请求体内容的解析方式, 否则后端没法解析获取数据
xhr.setRequestHeader( "content-type", "application/x-www-form-urlencoded" );
//在请求发送过程当中会对数据进行序列化处理，以键值对形式？key1=value1&key2=value2的方式发送到服务器
// 4. 设置请求体
xhr.send( "name=zs&age=18" );
复制代码
注意点 :
post请求, 设置请求行时, 不拼接参数列表post必须设置请求头中的content-type为application/x-www-form-urlencoded, 标记请求体解析方式post请求须要将参数列表设置到请求体中
2.4.3 readyState
readyState:记录了XMLHttpRequest对象的当前状态
readyState有五种可能的值：
xhr.readyState = 0时，UNSENT open还没有调用
xhr.readyState = 1时，OPENED open已调用
xhr.readyState = 2时，HEADERS_RECEIVED 接收到响应头信息
xhr.readyState = 3时，LOADING 接收到响应主体
xhr.readyState = 4时，DONE 响应完成
不用记忆状态，只须要了解有状态变化这个概念
复制代码
HTTP响应分为3个部分，状态行、响应头、响应体。
注意:
- 1响应完成了不表明响应成功了,只有当状态码为200的时候才表示成功
- 2
onreadystatechange只会被触发3次
//给xhr注册一个onreadystatechange事件，当xhr的状态发生状态发生改变时，会触发这个事件。
//只会被触发3次(2,3,4)
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
//1. 获取状态行
console.log("状态行:"+xhr.status);
//2. 获取响应头
console.log("全部的响应头:"+xhr.getAllResponseHeaders());
console.log("指定响应头:"+xhr.getResponseHeader("content-type"));
//3. 获取响应体
console.log(xhr.responseText);
}
}
复制代码
2.5数据交互
浏览器端只是负责用户的交互和数据的收集以及展现，真正的数据都是存储在服务器端的。
咱们如今经过ajax的确能够返回一些简单的数据（一个字符串）,
可是在实际开发过程当中，确定会会设计到大量的复杂类型的数据传输，
好比数组、对象等，可是每一个编程语言的语法都不同。
所以咱们会采用经过的数据交换格式（XML、JSON）来进行数据的交互。
复制代码
2.5.1xml
什么是XML
XML指可扩展标记语言（EXtensible Markup Language）XML是一种标记语言，很相似HTMLXML的设计宗旨是传输数据，而非显示数据XML标签没有被预约义。您须要自行定义标签。
语法规范
- 第一行必须是版本信息
- 必须有一个根元素（有且仅有一个）
- 标签不可有空格、不能够数字或.开头、大小写敏感
- 不可交叉嵌套，都是双标签，若是是单标签，必须闭合
- 属性双引号（浏览器自动修正成双引号了）
- 特殊符号要使用实体
- 注释和
HTML同样
<?xml version="1.0" encoding="utf-8" ?>
<students>
<student >
<name>张三</name>
<age>18</age>
<gender>男</gender>
<desc>路人甲</desc>
</student>
<student>
<name>李四</name>
<age>20</age>
<gender>男</gender>
<desc>路人乙</desc>
</student>
</students>
复制代码
php获取xml文件的内容
// 注意: 若是须要返回 xml 数据, 须要将 content-type 改为 text/xml, 否则浏览器以 text/html 解析
header( 'content-type:text/xml;charset=utf-8' );
// file_get_content 用于获取文件的内容
// 参数: 文件的路径
$result = file_get_content( "data.xml" );
echo $result;
复制代码
js解析xml
//获取服务端返回的xml数据，须要使用xhr.responseXML，这是一个document对象，可使用DOM中的方法查找元素。
var data = xhr.responseXML;
//获取全部的学生
var students = data.querySelectorAll("student");
复制代码
缺点：太麻烦
2.5.2 json数据
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript 规范，采用独立于编程语言的文本格式来存储和表示数据。
- 数据在 键值对 中
- 数据由逗号分隔(最后一个 键值对 不能带逗号)
- 花括号保存对象，方括号保存数组
- 键使用双引号
var obj = {a: 'Hello', b: 'World'}; //这是一个js对象
var obj = {"a": "Hello", "b": "World"}; //这是一个json对象
// 这是一个 JSON 字符串，本质是一个字符串
var json = '{"a": "Hello", "b": "World"}';//这是一个json字符串
{"name": "zs"}
[{"name": "zs"},{"name":"ls"}]
复制代码
JSON数据在不一样语言进行传输时，类型为字符串，不一样的语言各自也都对应有解析方法，解析完成后就能很方便的使用了
js处理json
JS对象 ==>JSON字符串JSON.stringify(obj)
//obj是一个js对象
var obj = {a: 'Hello', b: 'World'}
//result就变成了一个json字符串了
var result = JSON.stringify(obj);// '{"a": "Hello", "b": "World"}'
复制代码
JSON字符串 ==>JS对象JSON.parse(str)
//json是一个json字符串
var json = '{"a": "Hello", "b": "World"}';
//obj就变成了一个js对象
var obj = JSON.parse(json);// {a: 'Hello', b: 'World'}
复制代码
2.6封装ajax工具函数
整了半天仍是似懂非懂啊o(╥﹏╥)o
封装步骤
-
建立
xhr对象 -
设置请求行
-
设置请求头
-
设置请求体
-
监听响应状态
-
获取响应内容
完整版本
var $ = {
ajax: function (options) {
//若是options参数没有传递，直接返回。
if (!options || typeof options !== "object") {
return;
}
//处理默认参数
//若是参数不是post，那就默认为get
var type = options.type == "post" ? "post" : "get";
//若是没有传url，那就传当前地址
var url = options.url || location.pathname;
//若是参数不是false，那就默认是true，发异步请求
var async = options.async == false ? false : true;
var params = this.getParams(options.data);
var xhr = new XMLHttpRequest();
//设置请求行
if (type == "get") {
url = url + "?" + params;
}
xhr.open(type, url, async);
//设置请求头
if (type == "post") {
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
}
//设置请求参数
xhr.send(params);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
/*根据响应头的content-type属性指定方法接收到的内容*/
var contentType = xhr.getResponseHeader('content-type');
var data = null;
if (contentType.indexOf('json') > -1) {
data = JSON.parse(xhr.responseText);
} else if (contentType.indexOf('xml') > -1) {
data = xhr.responseXML;
} else {
data = xhr.responseText;
}
/*执行成功函数*/
options.success && options.success(data);
} else {
options.error && options.error(xhr.responseText);
}
}
}
},
getParams: function (obj) {
//将obj对象转换成参数
//将对象转换成参数列表
if (!obj) {
return null;
}
var arr = [];
for (var k in obj) {
arr.push(k + "=" + obj[k]);
}
return arr.join("&");
}
}
复制代码
2.7jQuery中的ajax方法
jQuery为咱们提供了更强大的Ajax封装,我好像只记得这种而已
参数列表
| 参数名称 | 描述 | 取值 | 示例 |
|---|---|---|---|
| url | 接口地址 | url:"02.php" | |
| type | 请求方式 | get/post | type:"get" |
| timeout | 超时时间 | 单位毫秒 | timeout:5000 |
| dataType | 服务器返回的格式 | json/ xml/text(默认) | dataType:"json" |
| data | 发送的请求数据 | 对象 | data:{name:"zs", age:18} |
| beforeSend | 调用前的回调函数 | function(){} | beforeSend:function(){ alert(1) } |
| success | 成功的回调函数 | function (data) {} | success:function (data) {} |
| error | 失败的回调函数 | function (error) {} | error:function(data) {} |
| complete | 完成后的回调函数 | function () {} | complete:function () {} |
使用示例：
$.ajax({
type:"get",//请求类型
url:"02.php",//请求地址
data:{name:"zs", age:18},//请求数据
dataType:"json",//但愿接受的数据类型
timeout:5000,//设置超时时间
beforeSend:function () {
//alert("发送前调用");
},
success:function (data) {
//alert("成功时调用");
console.log(data);
},
error:function (error) {
//alert("失败时调用");
console.log(error);
},
complete:function () {
//alert("请求完成时调用");
}
});
$.get
$.post
复制代码
3同源与跨域
3.1同源
3.1.1同源策略的基本概念
1995年，同源政策由 Netscape 公司引入浏览器。目前，全部浏览器都实行这个政策。 同源策略：最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页"同源"。所谓"同源"指的是"三个相同"。
协议相同
域名相同
端口相同
复制代码
举例来讲，这个网址http://www.example.com/dir/page.html协议是http://，
域名是www.example.com，端口是80（默认端口能够省略）。它的同源状况以下。
http://www.example.com/dir2/other.html：同源
file:///F:/phpStudy/WWW/day01/04-demo/04.html 不一样源(协议不一样)
http://v2.www.example.com/dir/other.html：不一样源（域名不一样）
http://www.example.com:81/dir/other.html：不一样源（端口不一样）
复制代码
3.1.2同源策略的目的
同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。
3.1.3同源策略的限制范围
随着互联网的发展，“同源策略”愈来愈严格，目前，若是非同源，如下三种行为都将收到限制。
1. Cookie、LocalStorage 和 IndexDB 没法读取。
2. DOM 没法得到。
3. AJAX 请求不能发送。
复制代码
虽然这些限制是颇有必要的，可是也给咱们平常开发带来很差的影响。好比实际开发过程当中，每每都会把服务器端架设到一台甚至是一个集群的服务器中，把客户端页面放到另一个单独的服务器。那么这时候就会出现不一样源的状况，若是咱们知道两个网站都是安全的话，咱们是但愿两个不一样源的网站之间能够相互请求数据的。这就须要使用到跨域 。
3.2跨域
3.2.1jsonp( 无兼容性问题 )
JSONP(JSON with Padding)、可用于解决主流浏览器的跨域数据访问的问题。
原理：服务端返回一个定义好的js函数的调用，而且将服务器的数据以该函数参数的形式传递过来，这个方法须要先后端配合
script 标签是不受同源策略的限制的，它能够载入任意地方的 JavaScript 文件。相似的还有img和link标签
<!--不受同源策略限制的标签-->
<img src="http://www.api.com/1.jpg" alt="">
<link rel="stylesheet" href="http://www.api.com/1.css">
<script src="http://www.api.com/1.js"></script>
复制代码
jsonp演化过程1
html文件
<script src="http://www.api.com/testjs.php"></script>
复制代码
原理：其实src的路径是什么文件不重要，不管引入js文件仍是php文件，最后返回给浏览器的都是字符串，所以咱们script标签是能够引入一个php文件的。
jsonp演化过程2
php文件
header("content-type:text/html;charset=utf-8");
echo "var a = 118;";
复制代码
html文件
<script src="http://www.api.com/testjs.php"> </script>
<script> //a打印出来了118 console.log(a); </script>
复制代码
咱们如今作到了一件事情，从不一样源的php文件中获取到了数据
缺点：获取数据的script标签必须写在使用的script标签的前面，必须保证先有数据才能对数据进行渲染。
jsonp演化过程
php代码
header("content-type:text/html;charset=utf-8");
$arr = array(
"name"=>"zs",
"age"=>18
);
$result = json_encode($arr);
//这是一段js函数的调用的代码，$result就是咱们想要的数据
echo "func($result)";
复制代码
js代码
<script> function func(data) { console.log(data); } </script>
<script src="http://www.api.com/testjs.php"></script>
复制代码
缺点：后端必须知道前端声明的方法的名字，后端才能调用。
jsonp演化过程4
php代码
header("content-type:text/html;charset=utf-8");
$arr = array(
"name"=>"zs",
"age"=>18
);
$result = json_encode($arr);
//这是一段js函数的调用的代码，$result就是咱们想要的数据
echo $_GET['callback']."($result)"; //fun($result)
复制代码
javascript代码
function fun(data) {
console.log(data);
}
var button = document.querySelector("button");
button.onclick = function () {
var script = document.createElement("script");
script.src = "http://www.api.com/testjs.php?callback=fun";
document.body.appendChild(script);
}
复制代码
- 说白了，jsonp的原理就是 借助了script标签 src 请求资源时, 不受同源策略的限制.
- 在服务端返回一个函数的调用，将数据当前调用函数的实参。
- 在浏览器端，须要程序要声明一个全局函数，经过形参就能够获取到服务端返回的对应的值
jsonp原理你们须要知道，面试中常常会问到，实际工做中不用纠结, 由于jquery已经帮咱们封装好了，咱们使用起来很是的方便。
3.1.2jquery对于jsonp的封装
注意: jsonp仅支持get请求
//使用起来至关的简单，跟普通的get请求没有任何的区别，只须要把dataType固定成jsonp便可。
$.ajax({
type:"get",
url:"http://www.Jepson.com/testjs.php",
dataType:"jsonp",
data:{
uname:"zs",
upass:"123456"
},
success:function (info) {
console.log(info);
}
});
复制代码
4XMLHttpRequest2.0
XMLHttpRequest是一个javascript内置对象，使得Javascript能够进行异步的HTTP通讯。2008年2月，就提出了XMLHttpRequest Level 2 草案。
老版本的XMLHttpRequest的缺点：
1. 仅支持传输文本数据，没法传输二进制文件，好比图片视频等。
2. 传输数据时，没有进度信息，只能提示完成与否。
3. 受到了"同源策略"的限制
复制代码
新版本的功能：
1. 能够设置timeout超时时间
2. 可使用formData对象管理表单数据
3. 容许请求不一样域名下的数据（跨域）
4. 支持上传二进制文件
5. 能够获取数据传输的进度信息
复制代码
注意：咱们如今使用new XMLHttpRequest建立的对象就是2.0对象了，咱们以前学的是1.0的语法，如今学习一些2.0的新特性便可。
4.1timeout设置超时
xhr.timeout = 3000;//设置超时时间
xhr.ontimeout = function(){
alert("请求超时");
}
复制代码
4.2formData管理表单数据
formData对象相似于jquery的serialize方法，用于管理表单数据
formData仅支持post请求不须要设置请求头, 浏览器会自动检测帮咱们设置
使用特色：
1. 实例化一个formData对象， new formData(form); form就是表单元素
2. formData对象能够直接做为 xhr.send(formData)的参数。注意此时数据是以二进制的形式进行传输。
3. formData有一个append方法，能够添加参数。formData.append("id", "1111");
4. 这种方式只能以post形式传递，不须要设置请求头，浏览器会自动为咱们设置一个合适的请求头。
复制代码
代码示例：
//1. 使用formData必须发送post请求
xhr.open("post", "02-formData.php");
//2. 获取表单元素
var form = document.querySelector("#myForm");
//3. 建立form对象，能够直接做为send的参数。
var formData = new FormData(form);
//4. formData可使用append方法添加参数
formData.append("id", "1111");
//5. 发送，不须要指定请求头，浏览器会自动选择合适的请求头
xhr.send(formData);
复制代码
4.3文件上传
之前，文件上传须要借助表单进行上传，可是表单上传是同步的，也就是说文件上传时，页面须要提交和刷新，用户体验不友好，
xhr2.0中的formData对象支持文件的异步上传。
var formData = new FormData();
//获取上传的文件，传递到后端
var file = document.getElementById("file").files[0];
formData.append("file", file);
xhr.send(formData);
复制代码
4.4显示文件进度信息
xhr2.0还支持获取上传文件的进度信息，所以咱们能够根据进度信息能够实时的显示文件的上传进度。
1. 须要注册 xhr.upload.onprogress = function(e){} 事件，用于监听文件上传的进度.注意：须要在send以前注册。
2. 上传的进度信息会存储事件对象e中
3. e.loaded表示已上传的大小 e.total表示整个文件的大小 单位是字节
复制代码
代码参考：
xhr.upload.onprogress = function (e) {
inner.style.width = (e.loaded/e.total*100).toFixed(2)+"%";
span.innerHTML = (e.loaded/e.total*100).toFixed(2)+"%";
}
xhr.send(formData);
toFixed(2) //保留两位两数
复制代码
4.5跨域资源共享(CORS) ( 兼容性IE10+ )
4.5.1cors的使用
新版本的XMLHttpRequest对象，能够向不一样域名的服务器发出HTTP请求。这叫作"跨域资源共享"（Cross-origin resource sharing，简称CORS）。
跨域资源共享（CORS）的前提
- 浏览器支持这个功能( 兼容性IE10+ )
- 服务器必须容许这种跨域。
服务器容许跨域的代码：
//容许全部的域名访问这个接口
header("Access-Control-Allow-Origin:*");
//容许www.study.com这个域名访问这个接口
header("Access-Control-Allow-Origin:http://www.study.com");
复制代码
4.5.2CORS的具体流程（了解）
-
浏览器发送跨域请求
-
服务器端收到一个跨域请求后，在响应头中添加
Access-Control-Allow-Origin Header资源权限配置。发送响应 -
浏览器收到响应后，查看是否设置了
header('Access-Control-Allow-Origin:请求源域名或者*');若是当前域已经获得受权，则将结果返回给JavaScript。不然浏览器忽略这次响应。
结论：
- 跨域行为是浏览器行为，响应是回来了, 只是浏览器安全机制作了限制, 对于跨域响应内容进行了忽略。
- 服务器与服务器之间是不存在跨域的问题的
4.5.3jsonp与cors的对比
- jsonp兼容性好，老版本浏览器也支持，可是jsonp仅支持get请求，发送的数据量有限。使用麻烦
- cors须要浏览器支持cors功能才行。可是使用简单，只要服务端设置容许跨域，对于客户端来讲，跟普通的get、post请求并无什么区别。
- 跨域的安全性问题：由于跨域是须要服务端配合控制的 ，也就是说不论jsonp仍是cors，若是没有服务端的容许，浏览器是无法作到跨域的。
到最后已经没有在用脑子记了,先都摘抄下来,再顺顺把!!今天也是不知所谓的一天
相关文章
- 1. AJAX入门这一篇就够了
- 2. 看这一篇就够了！-Ajax详解
- 3. nginx 这一篇就够了
- 4. centos7-ECS-LNMP-就这一篇就够了！！
- 5. Ajax原理一篇就够了
- 6. 了解 MongoDB 看这一篇就够了
- 7. 了解爬虫，这一篇就够了！
- 8. 了解HandlerThread这一篇就够了
- 9. SpringMVC看这一篇就够了(一)
- 10. 学Redis这篇就够了
- 更多相关文章...
- • AJAX 简介 - PHP教程
- • PHP - AJAX 与 PHP - PHP教程
- • 再有人问你分布式事务，把这篇扔给他
- • 三篇文章了解 TiDB 技术内幕——说存储
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Window下Ribbit MQ安装
- 2. Linux下Redis安装及集群搭建
- 3. shiny搭建网站填坑战略
- 4. Mysql8.0.22安装与配置详细教程
- 5. Hadoop安装及配置
- 6. Python爬虫初学笔记
- 7. 部署LVS-Keepalived高可用集群
- 8. keepalived+mysql高可用集群
- 9. jenkins 公钥配置
- 10. HA实用详解
欢迎关注本站公众号,获取更多信息
相关文章
- 1. AJAX入门这一篇就够了
- 2. 看这一篇就够了！-Ajax详解
- 3. nginx 这一篇就够了
- 4. centos7-ECS-LNMP-就这一篇就够了！！
- 5. Ajax原理一篇就够了
- 6. 了解 MongoDB 看这一篇就够了
- 7. 了解爬虫，这一篇就够了！
- 8. 了解HandlerThread这一篇就够了
- 9. SpringMVC看这一篇就够了(一)
- 10. 学Redis这篇就够了