前端网络—jQueryAJAX和跨域

最新推荐文章于 2024-10-17 17:15:00 发布

不像话i

最新推荐文章于 2024-10-17 17:15:00 发布

阅读量1k

点赞数

文章标签： ajax 服务器 javascript json

本文链接：https://blog.csdn.net/XiaoXiao2223/article/details/120917693

版权

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优缺点（面试点）

4.1 优点：

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

4.2 缺点：

1.AJAX干掉了Back和History功能，即对浏览器机制的破坏。在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。 2.安全问题技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。 3.对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。

5、ajax简介

ajax (Asynchronous Javascript And XML)其实就是异步的javaScript和XML。

XML：<html>这是html标签，XML格式是一样的可以自定义<name> <age> 满足标记语言的格式就可以了。

AJAX不是一门新语言，是综合HTTP异步通信、JS、XML、以及JSON等多种网络技术的一种编程模型。

AJAX ~= JS+ xml+JSON + HTTP通信，本质就是在HTTP协议的基础上以异步的方式与服务器进行通信。

6、ajax优点

ajax别称叫做无刷新技术比如地图、局部加载 1.页面局部刷新。在读取数据的过程中，用户所面对的不是白屏，而是原来页面的转台，或者正在更新的信息提示状态，只有当接收到全部数据后才更新相应部分的内容，而这种更新也是瞬间的用户几乎感觉不到 2.可以充分利用客户端闲置的处理能力，减轻服务器和网路传输的负担 3.使web中界面与应用相分离也可以说是数据与呈现相分离

7、ajax处理网络请求

Ajax模块在处理网络请求的时候包括以下四个步骤

1.通过XMLHttpRequest类创建xhr对象 2.为xhr对象添加属性与回调方法 3.令xhr对象执行open()方法，指明请求被发往某处 4.令xhr对象执行send()方法，发出请求。

补充：Ajax可以发出同步请求，也可以发出异步请求。但大多数情况下指的是异步请求，因为同步的Ajax请求对浏览器会产生“阻塞效应”。

【Ajax发送请求】这件事情并不是一句话带过就可以的，在Ajax中对整个请求从创建到发送都有着一套严格的标准流程。就好像车间生产产品，流水线上每一个步骤的操作完毕之后才能打包出售。

说明：XMLHttpRequest对象用来在【浏览器】与【服务器】之间传送数据。通俗上来说将此对象称为request请求对象、请求对象或请求。

8、xhr对象发送GET、POST请求

//1.创建对象
var xhr;
if (window.XMLHttpRequest){//普通浏览器    
	xhr=new XMLHttpRequest();
}else{//老版本IE
	xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
//3.监听服务器响应
xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xhr.status==200){
          console.log(xhr.responseText);//将接收到的服务器数据显示到控制台中
    }
};
//2.打开链接
xhr.open("请求方式","请求地址",是否异步:默认为异步true);
//3.5 请求头（POST请求时设置）
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//4.发送请求
xhr.send();

8.1 请求头格式

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8	表示客户端可以接受的内容类型,多个值使用;分号隔开q=0.9 表示权重优先级,/表示可以接受任意类型内容;
Accept-Language: zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3	表示客户端可以接受的语言
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Win64x64;	浏览器信息,例如使用的是网井的内核, windows64位系统;
Accept-Encoding: gzip, deflate	支持的压缩格式
Host: localhost:8888	访问地址
Connection: keep-alive	保持连接和HTTP1.1版本有关,默认保持3s
Content-Type: application/x-www-form-urlencoded	表单提交时才有可能出现,表示表单的数据类型,使用url编码,url编码 % 16位数
Content-Length: 7	post请求请求体长度
Upgrade-Insecure-Requests: 1	告诉服务器，浏览器可以处理https协议、