问题引入

在学习Ajax技术之前，我们先回顾一下之前，客户端和服务器是如何通讯的呢？我们客户端和服务器端的通讯往往是在浏览器的地址栏输入一个地址后或者点击一个a链接之后，浏览器帮我们发送http请求，去找服务器要对应的数据（html文本）；然后服务器接受请求，返回对应的数据，最后浏览器在将获取的数据在页面显示（页面渲染html–显示界面）。但是往往这个过程是会导致整个页面的刷新（网速比较卡、等待时间很长），相对来说用户体验不怎么友好。

这样的无跳转刷新，在有些时候是十分必要，例如 当用户在优酷观看VIP试看视频的过程中，试看完毕后，突然需要登录账号完成一些操作，而如果登录验证的过程必须跳转到服务器中才能完成，那么页面就会刷新，等跳转回来 又是长时间的广告，还要手动定位到之前播放的位置，给用户的访问带来极大的不便 ，因此在这里，一把会做一个弹框，做无跳转的登录。或者有的时候在看视频的时候，需要进行留言处理，也是需要进行无刷新完成的。

留言

网易云音乐

总之，很多时候用户只想更新页面的局部内容，而不是刷新整个页面，那我们是否可以在页面不刷新的情况下，还可以和服务器进行通讯，获取数据呢？

那什么是Ajax技术呢？

口语化定义-面试-日常用语

Ajax就是一门在浏览器不刷新的情况下，还可以和服务器进行通讯，数据传输的技术（一般数据传输的格式满足两种：1. xml 相对比较少 2. json 格式很多）。

注意1：客户端和服务器端进行通信的时候，其本质只能用文本做信息的传递，只是这个文本满足一定的人为规定的数据的格式，我们才有了XML传递或者json传递，以及jsonp传递。

注意2：Ajax技术是数据浏览器的技术，不同的浏览器对其有不同的实现方式(w3c IE低版本678)。js也是属于浏览器的技术（浏览器一个js解析环境）。浏览器也开放了一定的接口供js去操作Ajax。

官方定义

ajax全称 Async Javascript And XML（异步的JavaScript和XML），它是不指代某个特定的技术，主要有如下的技术一起组成：

Async ：指AJAX能够创建异步进程的请求

Javascript：AJAX实现的主体，就是用JS来实现的AJAX，js里面存在一个XMLHttpRequest构造函数

XML：一种数据格式，用户AJAX请求中客户端和服务器交换数据，除此以外还有JSON

现在所有局部刷新、无刷新操作 都叫”ajax”，它是使得JS能够同浏览器一样请求服务器，并且获取返回结果。

论文：（最原始的定义）

ajax发展历史

AJAX诞生于1998年，同期的互联网技术还有XML和CSS2.0，允许客户端发送请求到服务器的第一个应用来自于微软的Outlook Web Access开发小组，尔后称为IE4.0的一部分，并在IE5中开始运用。

AJAX真正被广泛认识是在2005年，伴随着一些大型互联网公司的产品中开始出现ajax，例如谷歌的邮箱产品Gmail 内置了一个Gtalk的网页聊天工具，聊天的过程中需要反复不断的刷新数据 而又不能跳转 这就是引起了人们好奇 也使得原本不太受关注的ajax得到了人们的青睐。

Ajax常见使用场景

1. Ajax技术一般用在账户注册时候用户名和邮箱是否重复检查
2. 还可以实现一种按需加载的布局加载数据的效果，瀑布流布局，按需加载
3. 无刷新分页显示数据
4. 无刷新留言
5. 无刷新登录…..

例如：

http://reg.email.163.com/unireg/

http://36kr.com/

http://www.iterduo.com/

网易邮箱注册

滚动加载

瀑布流布局

文档：

http://www.zhangxinxu.com/wordpress/2012/03/%E5%A4%9A%E6%A0%8F%E5%88%97%E8%A1%A8%E5%8E%9F%E7%90%86%E4%B8%8B%E5%AE%9E%E7%8E%B0%E7%9A%84%E7%80%91%E5%B8%83%E6%B5%81%E5%B8%83%E5%B1%80-waterfall-layout/

下一个永远是惊喜（永远不知道下一个商品是否是最好的？）

花瓣网：http://huaban.com/all/

远古时代的无刷新技术

在没有ajax技术的时候，如何实现客户端和服务器进行无刷新的通信呢？

答：思考，如果要完成这个操作：

1. 必须要进行网络通信
2. 同时还可以接收到服务器端的响应

解决：

答：思考在前端里面那些技术是可以发送网络请求？

1. ajax可以（不使用）
2. img标签、link标签、script标签（js、执行）（都具有src 、href 属性都可以发送网络请求）
3. 网页嵌套iframe（页面放一个，显示出来，穿件隐身衣）【无刷新文件上传，如果是兼容低版本的IE做文件上传】（自行百度学习）

知道：可以使用script标签来完成网络请求？

客户端代码：

服务器端代码：

浏览器效果：

jQuery基本使用

jQuery是什么？

官网：http://jquery.com/

jQuery主要是帮我们做js代码的简化操作。

原始：

1. 获取某个元素 document.getElementById(‘div1’)
2. 获取内容 document.getElementById(‘div1’).innerHTML

通过上面的操作既麻烦、也存在兼容性问题（低版本IE和现代浏览器不兼容）

有人试想是否可以做一个工具库，可以简化操作。提出来jQuery（javascript + query）主要地方在于DOM元素的获取，自己进行操作（1. 获取dom元素的值 2. 设置css样式….）

简化：

1. 元素获取 $(‘#div1’) // 通过id获取DOM元素

2. 获取元素的值 $(‘#div1’).html() // 获取 id为div1的元素的html值

3. 设置样式 $(‘#div’).css(‘color’, ‘red’); // 设置字体验证

4. 设置样式类 $(‘#div’).addClass(‘box-red’); // 设置一个 .box-red的样式

5. 事件绑定 $(‘#btn1’).click(function(){ // 事件回调函数 });

目前主要存在三个大的版本。

1. x系列 [工具库代码有点大，做兼容]
2. x系列
3. x系列

这三个版本的使用的方式都是一样的，但是需要注意：2.x之后的版本不在兼容IE678。

为什么要使用jQuery呢？

从官网logo上的标语我们可以看到 write less, do more。 可以得知jQuery可以让我们用最少的代码完成最多的功能。

1. 提供了强大的选择器，可以快速的选取页面上的DOM元素
2. 提供了众多的方法
3. 强大的链式操作
4. 对浏览器的兼容性做了处理
5. …………

设计：less is more

选择器-内容-样式

从jQuery的字面意思理解： jQuery = javascript + Query，由此可以看出jQuery的强大之初在于其选择器，即强大的DOM节点查询。同时需要注意的是，jQuery的选择器基本和Css的选择器一样。

主要学习两个选择器

1. id选择器
2. 类选择器

id选择器

代码：

注意：这里通过 $(‘#container’) ID选择器选择DOM元素，返回值是一个对象，可以调用jQuery为对象提供的方法。

效果

类选择器

代码：

效果：

事件操作

代码：

效果

ajax入门使用

Ajax的使用，满足如下的步骤：

1. 实例化一个Ajax对象
2. 设置一个回调函数，帮我们处理后台返回的数据，当对象的一个属性readyState == 4 就可以操作数据了
3. 设置一个URL地址，并设置http的请求方式（get、post）
4. 发送请求

实操-ajax请求和响应

在页面不刷新的请求，现在给服务器进行通信，在客户端如何显示服务器返回的数据？

a. 客户端代码，发送Ajax请求

b. demo1.php后台处理请求

c. 效果: 当在客户端点击【按钮】的时候，会给服务器端发送请求，服务器的输出会作为响应返回给浏览器

实操-ajax传参

传递一定的参数，让ajax接收，然后让Ajax返回一定的信息，供客户端使用。

a. 在客户端编写一定的代码，显示服务器端返回的数据

b. demo2.php服务器端代码

c. 效果

实操-用户名校验

使用Ajax完成一个用户名是否重复的检测

a. 布置一个注册的表单，给用户名input框绑定一个失去焦点的事件，当失去焦点的时候，发送Ajax请求

效果：

b. 编写js代码，完成Ajax请求

c. demo3.php服务器端checkuser.php处理请求

效果：

Ajax之GET常见问题-面试问题

简介

Ajax常见的问题：主要是出现在IE低版本下。

1. IE的实现方式不一样（IE下存在兼容性的问题）（到时候我们不会写原生的ajax，使用jQuery提供的ajax工具方法）

1. IE下的GET提交的缓存问题（火狐 ctrl+f5）和参数中文（编码）的问题

IE6下测试XMLHttpRequest

一般在IE6下直接使用new XMLHttpRequest是不可以的，会保错，需要我们书写兼容性的代码。

网上找一个就行：

通过测试可以正常

函数文件位置：

IE6下get缓存问题

1. 引入ajax.js函数，ajax函数调用

1. demo6.php服务器代码

1. 在IE下存在一个缓存的问题，一般如果URL地址不变的情况下，IE是不会在发送http请求

一般解决方式：1. 在URL地址后面加一个随机数 2. 或者是加上一个时间戳

代码：

效果：

IE6下get中文问题

1. 中文的问题（注意：在IE6下不能得到正常的传递）

解决：对中文的字符进行编码后进行传输

encodeURIComponent函数

1. 客户端代码，引入ajax.js，调用ajax函数

1. demo7.php服务器端代码

效果

Ajax之POST常见问题

如何使用Ajax完成post提交？

答：在使用Ajax做post提交的时候，需要注意设置一个请求头的概念，并且这个请求头必须在open方法之后，send方法之前设置。POST请求头的设置无论是w3c还是IE都需要设置，并且在IE下中文也不用进行编码。

文档：http://www.w3school.com.cn/tags/att_form_enctype.asp

设置传输编码：application/x-www-form-urlencoded（表单做post提交 encrypt）

1. 在Ajax对象的open方法之后设置请求头即可，并且post提交的数据要写成一个字符串作为参数传递个send方法。

Ajax手册学习

手册解释

手册位置：

手册参数：

这个手册里面只要了解三个属性，两个常见方法。

Ajax状态变化

在使用ajax和服务器进行通信过程中，ajax的状态会产生一个变化，例如ajax对象产生，ajax发送请求，ajax对象成功获取服务器的响应….. 我们可以通过该对象 readyState 属性进行捕获，属性值有0-4 五个值，四种变化。我们可以捕获其变化，当状态变化的时候， onreadystatechange 对应的回调函数会自动进行触发。

1. 当我们使用Ajax去和服务器进行交互的过程，Ajax对象的状态是会发生变化的，我们可以使用xhr.readyState属性感知其变化。

效果

1. 总结：在使用xhr.readyState感知变化的过程中，可以看到从1变到4。在状态变为4的时候，我们可以使用xhr.responseText属性获取服务器返回的数据信息

客户端代码

demo9.php服务器端代码：

浏览器效果

注意：

1. 在下面的回调处理函数里面的 xhr.readyState属性的值可以从 0 到 4 ，存在有4种变化，5个状态。
2. 只有当状态成为4的时候，才可以获取到服务器返回的数据，服务器返回的数据会在对象的responseText属性或者是responseXML属性，如果请求的地址是一个XML文件，则会存放到该属性，其他的都是放到responseText属性里面。

xhr.onreadystatechange = function(){

// 服务器的数据何时可以正常的返回

console.log( xhr.readyState );

}

服务器返回的数据的概念

什么叫服务器返回的数据？

答：在ajax和服务器进行通信过程中，服务器肯定要返回点数据给ajax对象，那么主要存在以下四种返回数据。

PHP脚本返回HTML

1. 如果是请求的一个php文件URL地址（data.php），该脚本里面可以直接包含一段html代码，代表服务器返回的数据

客户端

demo10.php 服务端脚本

浏览器效果

PHP脚本输出变量数据

1. 如果是请求的一个php文件URL地址，脚本里面存在输出内容（echo 、var_dump 、print_r），代表服务器返回的数据

客户端

demo11.php 服务端脚本

浏览器效果

请求文本文件

1. 如果请求的是一个其他类型的文件URL地址，一般是文本文件，以如下格式结尾的文件.txt 、.html 、.htm 、.xhtml、 .shtml、json，里面的内容代表服务器返回的数据

客户端

top250.json 服务端脚本

浏览器效果

返回xml格式数据

1. 还可以请求一个XML文件URL地址，但是需要注意：这个时候接受服务器返回的数据，一般使用responseXML属性获取，是一个文档对象。

客户端

xml.xml服务器端代码

浏览器效果

注意：现在一般来说我们很少使用xml（难用，但是底层的效率还是很高，有些业务，是必须使用xml，银行金钱相关的业务，接口必须使用xml，xml存在DTD进行文档类型约束）作为数据传输格式（以前没有出现json的时候，都是使用的xml，但是现在基本所有的 项目的数据交互格式都是使用json，因为多种语言都对json进行支持，可以在多种语言之间会使用json作为官方的数据交互媒介 PHP支持json c语言 java支持json js支持json）。

Ajax案例-会员模块-curd-作业

功能需求

1. 在添加的时候做用户名唯一性检查

1. 做数据展示做一个无刷新分页

1. 做删除的时候做Ajax无刷新删除 + 事件代理完成、事件委托

功能需求

1. 在添加的时候做用户名唯一性检查

1. 做数据展示做一个无刷新分页（分页插件 layUI 闲心）

1. 做删除的时候做Ajax无刷新删除 + 事件代理完成、事件委托

实操-添加

用户注册-唯一性检验

1. 编写一个user.html文件，展示一个注册表单

效果

1. 在user.html页面编写js代码进行校验用户信息，如果前台校验成功，使用ajax发送网络请求，进行用户唯一性处理

注意：这里的swal函数使用的是sweetalert插件提供的。

1. 在后台编写一个checkUser.php文件完成用户唯一性校验，可以注册返回1，不可以注册返回0

用户注册-添加入库

1. 编写一个user.html文件，展示一个注册表单

效果

1. 在user.html页面编写js代码进行校验用户信息，如果前台校验成功，使用ajax发送网络请求，进行用户入库操作

注意：这里的swal函数使用的是sweetalert插件提供的。

3. 在后台编写一个addkUser.php文件完成用户入库操作，成功返回1，失败返回0

sweetalert插件

相关网站：

http://www.bootcdn.cn/sweetalert/

http://mishengqiang.com/sweetalert/

1. 在bootcdn网站查询sweetalert插件

1. 自己的页面引入对应的css和js资源文件，调用 swal 函数进行测试

效果：

实操-用户展示

用户的展示-无刷新分页

昨天使用了一个叫做layUI提供的一个layPage的分页插件。

功能需求分析：

代码实现：

1. 定义一个ulst.php展示用户的列表，默认获取显示第一页的数据

1. 定义一个formatDataEs6方法格式化用户信息，返回一个HTML字符串

1. 定义一个userList.php页面，接收分页请求，返回数据

underscore工具库

简介：

1. 编写一个HTML文件，引入underscore.js文件，编写js代码，调用该工具库提供的方法

注意：_.each() 用于遍历数组 _.uniq() 用于数组去重

2. 效果

实操-用户删除

功能需求：

1. 在ulst.php为table元素定义一个id属性

1. 为该table元素绑定一个点击事件

1. 定义一个ajaxDelUser函数，发送ajax请求，删除用户信息

事件优化处理机制简介

优化处理

json简介

①-json是什么？

1. 什么是json？

答：json是由一个叫做道格拉斯（道叔，josn规范的制定者，一般他是json发现者）发现的一种在多种语言（js\php\java\c\python…）之间进行数据传递的一个文本的数据格式。以前也可以使用XML来组织格式来交换数据，但是XML操作起来非常的麻烦，慢慢的更多的是使用json格式数据做传递。

注意：虽说现在json非常的流行，但不意味着XML没有使用的必要的。在很多的领域XML还是有其独特的优势，尤其是在数据传递格式非常严苛的情况下（DTD：文档约束，主要是可以去约束XML的定义），例如银行的系统。并且可以做小型的数据库、还可以做配置文件（Java里面很多的配置文件都是使用xml）。

注意：json也是可以作为配置文件的，例如composer的包管理器的配置文件。(现在很多的项目都是使用json作为配置文件)

注意：多种格式的数据都可以作为配置文件

1. php.ini
2. httpd.conf
3. conf.yaml
4. composer.json
5. config.xml

面试：json还是XML好？没有什么好或不好，主要是实际的业务需求，以及公司领导的安排。

官网：http://www.json.org.cn/

json是啥？

网站：http://www.json.org.cn/standard.htm

②-json格式到底是如何定义的？

形如下面的数据结构被称为json格式的文本，需要注意：json格式里面的 key/value对是无序的。和php里面的关联数组比较类型，也和js里面的json字面量对象很像。

定义语法：

{

“key”: “value1”, // value值是字符串的时候必须加上双引号，同时 key 必须要加双引号

“age” : 12,

“isBool”: true // 最后的key value 不能加逗号

}

通过工具进行校验：

https://www.bejson.com/

③-php里面如何处理json格式数据？

1. 如何把php里面的复合数据类型转换为json格式的字符串数据？（json_encode 1. 中文 gb2312 2. Unicode编码）

效果

1. 如何把json格式的数据转换为php里面的复合数组类型？(json_decode)

效果：

备注：如果json_decode($jsonString) 不加第二个参数，则转换成php里面的一个标准对象

效果

1. 注意小的细节：在php里面如果要把一个复合数据类型，里面的中文，转换成json格式字符串，php里面的复合数据类型必须是utf-8的编码。并且转换后的中文数据使用的16进制Unicode编码。同时如果这个时候不希望将中文字符转换为16进制的编码该如何处理呢？

http://www.laruence.com/2011/10/10/2239.html

效果：

注意：如果中文使用的gb2312编码保存的，则转换不成功。

效果：

总结：在使用json_encode做复合数据类型转换的时候，如果数据里面存在中文，则必须是utf-8的编码，如果不是，则准换不成功。（千万注意：公司的老的项目使用的是gb2312编码的，这个时候在做接口处理的时候，特别注意，需要把gb2312转换成utf-8编码）。

4. 在php里面如果要把一个复合数据类型，里面的中文转换成json格式字符串，php里面的复合数据类型必须是utf-8的编码。并且转换后的中文数据使用的16进制Unicode编码。同时如果这个时候不希望将中文字符转换为16进制的编码该如何处理呢？

http://www.laruence.com/2011/10/10/2239.html

代码：

header(‘Content-Type:text/html;charset=utf-8’);

$data = array(‘name’=> ‘中文’);

echo json_encode($data, JSON_UNESCAPED_UNICODE);

效果：

④-js里面如何处理json格式的数据？

1. 如何把js里面的复合数据类型转换成json格式的数据？

效果

1. 如何把json格式的数据转换成js里面的复合数据类型？

效果

注意：也可以使用eval 转换（eval可以执行一个满足js语法格式的字符串）

效果

网站：https://www.zhihu.com/question/19884767

1. 在jQuery里面也提供对应的转换函数，遍历函数

1. json2.js文件，可以在js里面把对象和字符串相互的转换（ JSON.parse 和 JSON.stringify 一样，只是做了一个浏览器的兼容性处理，一般在自己的项目的html文件，引入该文件即可，自己会做兼容操作：如果低版本的浏览器不存在JSON.parse 和 JSON.stringify 则使用json2.js文件里面提供的；如果浏览器存在两个方法，则使用浏览器本身提供的方法处理）

网站：https://github.com/douglascrockford/JSON-js

Ajax之文件上传

文章：http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html

http://blog.csdn.net/inuyasha1121/article/details/51915742

①-简介

1. 使用Ajax实现文件的上传，但是这个标准只在w3c高版本的浏览器里面有实现，是属于一个ajax level2的标准。在低版本的IE里面是不兼容的。

网站：https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

1. 在使用Ajax做文件上传的时候，需要借助一个FormData对象，这个对象具有收集表单数据的能力，可以收集表单里面普通的数据，也可以收集文件信息。可以参考下面提供的文件。

②-FormData对象简单使用

在ajax里面做无刷新文件上传之前，我们需要先了解一个叫做FormData对象，然后这个对象可以帮我们去收集表单的数据（1. 基本数据 text 2. 可以收集上传文件）。

1. 设计一个如下的注册的表单（收集基本数据 text password）

效果

1. 利用FormData对象收集表单数据，然后使用Ajax技术发送给后台

注意：在使用FormData对象收集表单数据，使用Ajax发送POST请求的时候，不要设置请求头，如果设置，在服务器端，则无法正常收集post提交的数据信息。

1. 服务器定义一个 register.php 文件，接收ajax请求

③-文件上传-显示进度条效果

进度条效果

需求分析：

1. 由于我们上传要显示进度条，文件一般都是很大的文件，所以需要修改post上传数据的大小。
2. 整个表单提交的大小

b. 单个文件提供的大小

1. 创建一个上传文件的表单页面

效果

1. 使用Ajax做文件上传的时候，我们需要不断得知文件已经上传文件的大小和文件总大小的一个百分比。
   1. (loaded size )/ ( total size) 等于小的div宽度的百分比
   2. 如何获取文件已经上传的大小和总大小？

答：利用Ajax leval2 第一个新的方法（在这个Ajax对象上面存在一个upload属性，属性里面存在一个onprocess属性，可以这个属性设置一个回调函数，这个回调函数，会在有文件上传的时候，距离一定的间隔进行触发调用）

1. 在浏览器使用ajax完成图片上传

1. 定义一个register.php文件，接收ajax请求，完成上传

6. 效果

④-上传插件

现在一般来说我们很少自己使用ajax进行文件上传，一般都使用现成插件进行完成。底层的原理使用的 FormData 对象 + ajax ，注意，如果是低版本的IE浏览器也需要做无刷新文件上传，则FormData对象不能在使用，则我们可以使用 iframe技术进行无刷新上传。

插件：

1. 百度出的 webuploader

1. zyupload

Ajax跨域问题

①-什么是跨域？

答：当使用Ajax技术去请求本域名的资源信息的时候，是可以直接请求的。但是如果去别的域名的资源信息的时候，这个时候由于浏览器的一个同源政策的限定，是不允许直接去获取别的域名下的资源信息。

例如：www.sinsea.cn/index.html(ajax) —————>http://www.tngou.net/doc/food(提供的一个接口)

上面的这种请求就是一个跨域请求。

②-浏览器的同源政策是什么？

答：现代的浏览器默认只能让Ajax去请求本域名里面的资源信息，如果要请求域名的资源信息，则是不允许的。（备注：严格是是允许请求，但是请求后，会把响应的数据丢弃掉）

为什么浏览器存在同源政策的限定？

答：主要是为了安全。但是由于现在的项目融合比较多，肯定存在跨域的需求。

③-跨域示例

本域名：local.php.com

请求域名：local.test.com

两个域名不是同一个域。则使用ajax请求就会报错。

④-跨域成熟的解决方案

对于Ajax的跨域成熟的解决方案存在如下三种：

1. jsonp技术【最早技术来解决，比ajax还早】
2. 同域代理【需要自己服务器进行处理】
3. cors 响应头【缺陷 HTML5新标准，现代浏览器才支持】

目前使用最多应该是jsonp技术。其次就是同域代理。最后cors设置

jsonp的原理-只支持get方式-需要目标网站支持

简介

1. 由于同源政策的限定，Ajax是没办法直接请求别的域名的资源信息
2. 但是img script 等标签，可以发送网络请求，这些标签不受同源政策的限定
3. 我们可以动态去创造一个script标签，然后把它的src设置我们请求的地址，然后请求的时候还传递一些参数（传递一个叫做callback参数）
4. 请求的目标站，接受请求，过滤参数，对对应的数据格式化成json【把格式化后的json数据放置在传递过程中传递的一个叫做callback的回调函数里面】，然后在进行响应。

注意：jsonp只能完成get请求，同时jsonp需要目标网站的支持（把需要返回的数据填充在一个callback的回调函数里面）。

uuid相关资料：

http://www.jianshu.com/u/811a3c46491e

功能需求

请求历史上的今天进行数据获取

API接口：

https://api.asilu.com/

历史上的今天：

https://api.asilu.com/today/todayonhistory/

实操

1. 在自己网站定义一个页面，使用jsonp完成网络请求

效果

1. 引入jsonp.js文件，使用jsonp进行数据请求

3. 效果

同域代理

由于jsonp的技术需要目标网站的支持完成get请求，然后才可以完成请求。现在可以在自己的域名下创建一个动态的脚本文件.php（服务器端不受同源政策的限定），让这个php文件帮我们发送目标网站的请求。

原理图：

场景：

1. A域名希望通过Ajax请求B域名接口提供的天气信息，直接请求存在跨域，肯定是不允许的

2. A域名的Ajax可以先请求A域名的一个动态的脚本文本（携带一个参数？请求的B域名目标网站），让该脚本文件帮我们请求B域名的接口，然后请求完成后，把数据进行返回给本域名Ａ

3. A域名就可以通过中间的PHP脚本获取到数据

4. 中间的服务器充当的是一个代理人

代码：

A域名的Ajax请求

A域名的代理op.php 进行代理请求

效果

cors设置响应头-需要注意目前只支持w3c的浏览器

网站：http://www.cnblogs.com/Darren_code/p/cors.html

网站：http://www.cnblogs.com/hustskyking/

网站：http://www.cnblogs.com/TomXu/

原理：在目标网站设置一个允许访问的响应头。

在B域名的目标网站，设置一个响应头

在A域名可以直接使用Ajax调用B域名的资源信息

扩展-允许cors进行跨域

接口：https://cnodejs.org/api/v1/topics

总结：

对于ajax跨域，其真实的解决方法只有 cors（响应头）。

用的 jsonp 、同域代理（解决ajax不能跨域的一种方案）。

功能-自己实现

头条网站接口：

http://v.juhe.cn/toutiao/index?type=&key=d0c418c9d5324a8ddf197e85c3dc9c5a

不支持 jsonp 也不支持 cors 。那么只能进行同域代理。

效果

加载更多