ajax

AJAX5步法

1、创建异步对象XMLHttpRequest

2、设置回调函数

3、open()方法连接服务器

4、send()方法发送数据至服务器

5、回调函数中针对不同响应状态进行处理，局部更新界面

AJAX封装

基本模板与传参

此时调用模板时，如下所示

封装1：建立异步对象

封装2：判断请求类型

封装2：判断请求类型
get请求类型传值方式是将数据拼接到路由后进行传值，所以接下来需要判断是否传值(对比post请求)，回顾之前所讲

1、get请求类型传值方式是将数据拼接到路由后进行传值

2、post请求类型判断是否有传值，如果有则send发送至服务器，没有则不发

封装3：注册事件，针对不同状态进行响应，获取返回数据

封装调用：

接下来外部传参调用下封装的AJAX函数

此时控制台测试，便可以输出打印JSON格式数据，所以如果想用JS进一步操作，需要进行反序列化解析即JSON.parse()，然后操作其对页面进行局部更新。

AJAX跨域

跨域简介：
AJAX跨域指的是JS在不同的域之间进行数据传输或通信。
跨域方案：
1、jsonp跨域(重点)----前端处理方法
2、cros跨域-----后台处理

常见跨域场景

所谓的同源是指，域名、协议、端口均为相同。
http://www.nealyang.cn/index.html 调用 http://www.nealyang.cn/server.php 非跨域

http://www.nealyang.cn/index.html 调用 http://www.neal.cn/server.php 跨域,主域不同

http://abc.nealyang.cn/index.html 调用 http://abc.neal.cn/server.php 跨域,子域名不同

http://www.nealyang.cn:8080/index.html 调用 http://www.nealyang.cn/server.php 跨域,端口不同

https://www.nealyang.cn/index.html 调用 http://www.nealyang.cn/server.php 跨域,协议不同

localhost 调用 127.0.0.1 跨域

JSONP跨域

sonp跨域原理：借助网页标签中src属性的跨域特性实现
src简介：src是source的缩写，资源的意思，在html中src表示资源地址，是js文件和图片文件的引入方式，经常引用外部资源，可以实现跨域访问，如下所示

接下来调用下百度搜索接口，如下所示
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?wd=&cb=

解析：
wd为搜索关键词，百度搜索功能发送请求类型为get，因为所搜的关键词可以在url中可见。这里先不用回调

将之前代码做下调整，将url改为百度搜索接口，如下所示

将之前代码做下调整，将url改为百度搜索接口，如下所示
接下来使用JSONP实现跨域，本质利用src属性的跨域请求资源特性，同理脚本标签也是通过src引入资源，所以可以进行封装处理，实现AJAX的跨域访问远程资源。
接下来做下测试，script标签引入接口文件，并在接口加入回调函数，然后在页面定义调用

测试结果如下

此时虽然有报错，但是已经没有报跨域错误，接下来将调用位置做下调整，先定义声明函数，然后再进行传值，如下所示

修改后测试结果如下

除了通过JSONP解决跨域外，常见的方法还包含CROS方法

JSONP跨域案例

第一步：
首先编写模板代码，设置静态样式，如下所示

功能分析：
在输入框中输入关键字后，底下出现对应的智能匹配关键词
例如，在输入框输入“333”

第二步：
编写键盘事件，监听按键松开，获取输入值

第三步：
获取到输入值之后，需要动态写入内容。接下来使用JSONP跨域，所以需要动态创建标签。

接口：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?wd=&cb=

关键字为wd，回调函数为cb，所以对代码封装如下

第四步：
script标签筛选去重
日常使用时，只需要创建一个script标签即可，后期修改关键字时，只需要修改src就行了。所以接下来判断下script标签是否重复，做判断处理。

第五步：
动态创建元素，创建关键词智能匹配列表

接下来将ul高度改为auto自动
动态创建元素，创建关键词智能匹配列表

接下来简单设置下样式即可。
动态创建元素，创建关键词智能匹配列表
接下来简单设置下样式即可。

第六步：
添加跳转事件
目前为止，点击智能搜索列表项，无法完成跳页，此时需要另外一个搜索接口https://www.baidu.com/s?&wd=

优点：
1、它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制，JSONP可以跨越同源策略
2、兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持
3、在请求完毕后可以通过调用callback的方式回传结果。将回调方法的权限给了调用方，相当于将controller层和view层分开。提供的jsonp服务只提供纯服务的数据，至于提供服务以 后的页面渲染和后续view操作都由调用者来自己定义。如果有两个页面需要渲染同一份数据，只需要有不同的渲染逻辑就可以了，逻辑都可以使用同 一个jsonp服务。
缺点：
1、请求类型：它只支持GET请求而不支持POST等其它类型的HTTP请求
2、不能解决不同域的两个页面之间如何进行JavaScript调用的问题
3、响应状态：jsonp在调用失败的时候不会返回各种HTTP状态码
4、安全性：最大缺点是安全性，假如提供jsonp的服务存在页面注入漏洞，即它返回的javascript的内容被人控制的。那么结果是什么？所有调用这个 jsonp的网站都会存在漏洞。于是无法把危险控制在一个域名下…所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的。

跨域

考虑下述情况：
1、指向外部域名的link和通过表单的向外部域发起get请求是一样的，也都是允许的，点击那一刻起，浏览器的当前域名转向了目标网站，也就完全是域内读了。
2、通过表单向外部域发起post请求也是允许的，理由同上，源网站无法读取目标网站的任何内容。
3、AJAX（借助XMLHttpRequest对象）跨域get/post是禁止的，因为使用AJAX就是为了读取响应的内容，这触碰了跨域读的限制。
4、JSONP属于跨域读，且形式限制为get请求，因为它利用了script标签的特性（浏览器认为跨域读脚本是例外，类似的还有img、iframe等等，注意它们共有的src属性）。
因此对于浏览器而言：1和2没有跨域；3遵循了限制跨域读的原则；4属于允许的例外。

分析：
虽然JSONP很好用，但它注定是get请求，get请求有语义要求（幂等）、长度限制（为了兼容限制255字节）、安全隐患（容易受到csrf攻击，csrf的解决必须是post请求配合token使用）
扫盲：CSRF（Cross-site request forgery）跨站请求伪造，通常缩写为CSRF或者XSRF，是一种对网站的恶意利用。

如何实现跨域post请求

1、CORS跨域资源共享
概述：Cross-Origin Resource Sharing，W3C制定的跨站资源分享标准。
优点：W3C标准方案
缺点：不兼容老浏览器
注意：若在多个iframe之间跨域通信，优先考虑 window.postMessage（H5 新技术→ 安全地实现Window对象之间的跨域通信）
2、invisible iframe(隐形)
概述：通过js动态生成不可见表单和iframe，将表单的target设为iframe的name以此通过iframe做post提交。提交后由于跨域，无法直接读取响应内容。一般的做法是，iframe内通过js改变自身location的fragment，外部则监听iframe的onload事件，读取fragment的内容。有现成的跨域iframe通信类库，如jQuery PostMessage Plugin。
优点：兼容性佳，facebook，google，新浪已/曾采用
缺点：依赖hack实现，响应数据量大时需要切片、多次设置fragment并轮询，响应频繁时可能失效。
3、server proxy (服务器代理权)
概述：当前域实现一个代理，所有向外部域名发送的请求都径由该代理中转。
缺点：每个使用方都需要部署代理，数据中转低效，对js有侵入。
4、flash proxy(flash 代理权)
概述：利用不可见的swf跨域post提交数据，需要部署crossdomain.xml。例如alirte会自动检测，若用户安装了flash，则以此实现跨域通信。
要求：flash9，缺点：依赖flash
优点：ADOBE标准方案，相对CORS兼容性佳，相对invisible iframe响应数据量较大时优势明显。
跨域post请求：
1、CORS(跨域资源共享)
2、invisible iframe(隐形)
3、server proxy (服务器代理权)
4、flash proxy(flash 代理权)
手机查询接口
http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=手机号

步骤分析：
1、编写静态页面
2、绑定监听事件，获取输入值
3、调用手机信息查询接口并调用回调函数
4、定义回调函数，检测返回数据
5、解析数据，js操作返回数据，实现页面局部刷新
手机查询接口
http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=手机号

JSONP步骤小结
1、动态创建

2、在页面中，返回的JSON作为参数传入回调函数中，然后通过回调函数来来操作数据，最后在控制台，可以查看到返回的response数据格式为JSON对象格式的，具体需要取出哪些参数

jQuery之AJAX

日常开发里为了提高开发效率，一般会使用框架中的AJAX语法，例如经常使用的jQuery，也给我们封装好了AJAX的一些语法操作，而且jQuery也封装了JSONP跨域。

几种常用的方式$.ajax，$.post， $.get， $.getJSON

$.ajax

$.ajax是JQuery对ajax封装的最基础，通过使用这个函数可以完成异步通讯的所有功能。也就是说什么情况下都可以通过此方法进行异步刷新的操作。但是它的参数较多，有的时候可能会麻烦一些。
看一下常用的参数：
type—数据的提交方式：get和post
url—数据的提交路径
async—是否支持异步刷新，默认是true异步
data—参数值，需要提交的数据
dataType—服务器返回数据类型，例如xml,String,Json,jsonp等

beforeSend—请求前的回调函数、success—请求成功后的回调函数
error—请求失败后的回调函数、complete请求完成的回调函数(不论成功失败)

$.post

$.post是对$.ajax进行了更进一步的封装，减少了参数，简化了操作，但是运用的范围更小了。$.post简化了数据提交方式，只能采用POST方式提交。只能是异步访问服务器，不能同步访问，不能进行错误处理。
在满足这些情况下，可以使用这个函数来方便我们的编程，它的主要几个参数，像method，async等进行了默认设置，不可以改变。

$.get

和$.post一样，这个函数是对get方法的提交数据进行封装，只能使用在get提交数据解决异步刷新的方式上，使用方式和上边的也差不多。

$.getJSON

这个是进一步的封装，也就是对返回数据类型为Json进行操作。里边就三个参数，需要我们设置，非常简单：url,[data],[callback]

jQuery之$.ajax同源

接下来分别介绍下利用$.ajax实现同源和跨域请求（1）$.ajax()方法实现同源数据请求
（2）$.ajax()方法实现跨域数据请求

（1）$.ajax()方法实现同源数据请求

请求完毕后再对返回数据进行解析，然后更新至HTML模板即可实现局部更新页面

接下来结合之前的JSONP跨域实现百度搜索关键字案例，这里利用jQuery的AJAX实现

（2）$.ajax()方法实现跨域数据请求

其他设置和之前一样，直接修改js部分即可，如下所示

使用jQuery获取跨域数据
1、dataType:“jsonp”
2、jsonp默认值"callback"，可以自行修改

常用参数：

1、url
类型：String
默认值: 当前页地址。发送请求的地址。
2、type
类型：String
默认值: “GET”。请求方式POST或GET， 默认为 GET。注意：其它 HTTP 请求方法，如 DELETE 也可以使用，但仅部分浏览器支持。
3、async
类型：Boolean
默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
注意：同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 这里需要注意就是如果后面需要使用方法请求成功的数据，必须要设为同步，否则将会出现意想不到的错误，这个往往在刚开始使用ajax都会犯这个错误需特别留意
4、data
类型：String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。
5、jsonp
要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在”callback=?”这种GET或POST请求中URL参数里的”callback”部分
6、dataType
类型：String
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。
dataType可用值:
“xml”: 返回 XML 文档，可用 jQuery 处理。
“html”: 返回纯文本 HTML 信息；包含的 script 标签在插入 dom 时执行。
“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
“json”: 返回 JSON 数据 。
“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

“text”: 返回纯文本字符串
7、success
要求为Function类型的参数，请求成功后调用的回调函数
8、error
要求为Function类型的参数，请求失败时被调用的函数
9、beforeSend
要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。
10、complete
要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
11、jsonp
请求自动带上callback参数，callback值为jsonpCallback的值
12、jsonpCallback
JSONP回调函数callback的值

JSON&&JSONP

JSON和JSONP虽然只有一个字母的差别，但本质差距较大：
1、JSON是一种数据交换格式
2、而JSONP是开发人员创造出的一种非官方跨域数据交互协议。

通俗理解：
拿谍战片来打个比方，JSON是地下党们用来书写和交换情报的“暗号”，而JSONP则是接头方式。通俗理解，一个是传递信息格式，一个是信息给对方的传递交互协议。

什么是JSON？

JSON是一种基于文本的数据交换方式，或者叫做数据描述格式

优势？

①基于纯文本，跨平台传递极其简单
②Javascript原生支持，后台语言几乎全部支持；
③轻量级数据格式，占用字符数量极少，特别适合互联网传递；
④可读性较强，虽然比不上XML那么一目了然，但在合理的依次缩进之后还是很容易识别的；
⑤容易编写和解析

伪命题

【误区】：
对于经常用jQuery的开发者来说，知道jQuery封装的$.ajax中有dataType属性，如果将该属性设置成dataType:"jsonp"，就能实现JSONP跨域了。需要了解的一点是，虽然jQuery将JSONP封装在$.ajax中，但是其本质与$.ajax不一样。JSONP的最基本的原理是：动态添加一个

另一种解释是指没有意义的命题，无法断定其真假，既不是先天的分析命题，也不是可以通过经验判断的综合命题。比如，“团结比原子弹还厉害”，”凡事都有例外”这类命题就属于伪命题。
事实来讲，例如“人终有一死”这事没有例外… …
伪命题
1、ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；
2、ajax和jsonp本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加

总而言之，jsonp不是ajax的一个特例，哪怕jquery等巨头把jsonp封装进了ajax，也不能改变着一点！