前端网络—jQueryAJAX和跨域

1、jQueryAJAX

jquery 库中已经封装了ajax请求的方法。

jquery.ajax([settings])。发请求并且能得知成功还是失败。

• type:类型，"POST"或者"GET"，默认是"GET"。

• url:发送请求的地址。

• data：是一个对象，连同请求发送到服务器的数据

• dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包含的MIME信息来智能判断，一般我们采用json个数，可以设置为"json"。

• success:是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串。

• error:是一个方法、请求失败时调用此函数。传入XMLHttpRequest对象。

jquery初始化。

$(document).ready(function(){

});

error方法中第一个参数是jqXHR，可以通过jqXHR获取status。

2、跨域

2.1 浏览器同源政策

“同源”：协议相同、域名相同、端口相同。

1995年，同源政策由Netscape公司引入浏览器，最初的目的是某页面所设置的cookie，只能由其“同源”页面打开。如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。

举例来说，http://www.example.com/dir/page.html这个网址，协议是http://，域名是www.example.com，端口是80（默认端口可以省略）。它的同源情况如下。

http://www.example.com/dir2/other.html	同源
http://example.com/dir/other.html	不同源（域名不同）
http://v2.www.example.com/dir/other.html	不同源（域名不同）
http://www.example.com:81/dir/other.html	不同源（端口不同）

目的：同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

限制：随着互联网的发展，"同源政策"越来越严格。目前，如果非同源，共有三种行为受到限制： (1)Cookie、LocalStorage 和 IndexDB 无法读取。 (2)DOM 无法获得。 (3)AJAX 请求不能发送。

凡事都有利有弊，尽管限制是有必要的，但在有些情况下合理的用途也会因“同源政策”而受到影响。因此我们将要为大家介绍的一些规避上述限制的手段，就是【跨域】的由来。

2.2 Ajax跨域

Ajax跨域指的是将Ajax请求进行跨域处理，而不是说在Ajax中提供了跨域的方法。同源政策中明确规定Ajax请求只能发给同源的网址，否则就会发生跨域报错。除了设置代理之外页面中有三种常见的解决跨域的手段

①设置服务端响应头

②代理

③JSONP

2.3 JSONP跨域（get）

JSONP是服务器与客户端跨源通信的最常用方法。最大特点就是简单适用，老式浏览器全部支持，对服务器改造非常小。

本质：实际上利用了script标签引入js文件，并解析执行的原理。

使用方法：

①、在html中插入script标签，并利用script标签发起跨源请求

②、在服务器对应php文件中通过拼接字符串，模拟函数调用。并将要返回数据通过回调函数参数返回。

③、在html页面中，显式写出回调函数。这样当跨源请求完成后对应回调函数会自动执行。

优点：

(1)由于使用script脚本作为请求，因此实际上请求和传统的引入js脚本没有任何区别。 ​ (2)而在返回的数据中我们也尽量模拟出了js调用函数的语法，因此只要在页面中声明了回调函数就会自动被调用。 ​ (3)再者作为参数的【服务器端】的JSON数据，在js中是被直接识别为对象，因此在回调函数中也避免了使用JSON.parse的步骤。

3、为什么JSONP不是真正的AJAX（面试点）

JSONP是通过Script中的SRC属性携带参数传递数据，跟XMLHttpRequest对象没有任何关系。 实质不同： ​ ajax的核心是通过xmlHttpRequest获取非本页内容 ​ jsonp的核心是动态添加script标签调用服务器提供的js脚本 ​ jsonp只支持get请求，ajax支持get和post请求

4、AJAX优缺点（面试点）

优点：

1.最大的优点就是页面无需刷新，在页面内与服务器通信，非常好的用户体验。 2.使用异步的方式与服务器通信，不需要中断操作。 3.可以把以前服务器负担的工作转嫁给客户端，减轻服务器和带宽，可以最大程度减少冗余请求。 4.基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

 缺点：

1.AJAX干掉了Back和History功能，即对浏览器机制的破坏。 在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。

2.安全问题技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。

3.对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。