【前端三剑客】Ajax技术实现前端开发

目录

一、原生AJAX

1.1AJAX 简介

1.2XML 简介

1.3AJAX 的特点

1.3.1AJAX 的优点

1.3.2AJAX 的缺点

1.4AJAX 的使用

1.4.1核心对象

1.4.2使用步骤

1.4.3解决IE 缓存问题

1.4.4AJAX 请求状态

二、jQuery 中的AJAX

2.1 get 请求

2.2 post 请求

三、跨域

3.1同源策略

3.2如何解决跨域

3.2.1JSONP

3.2.2CORS

---

一、原生AJAX

1.1AJAX 简介

AJAX 全称为Asynchronous JavaScript And XML，就是异步的JS 和XML。
通过AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。
AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

1.2XML 简介

• XML 可扩展标记语言。
• XML 被设计用来传输和存储数据。
• XML 和HTML 类似，不同的是HTML 中都是预定义标签，而XML 中没有预定义标签

比如说我有一个学生数据：
name = "孙悟空" ; age = 18 ; gender = "男" ;
用XML 表示：
<student><name>孙悟空</name><age>18</age><gender>男</gender>
</student>

现在已经被JSON 取代了。

{"name":"孙悟空","age":18,"gender":"男"}

1.3AJAX 的特点

1.3.1AJAX 的优点

1) 可以无需刷新页面而与服务器端进行通信。
2) 允许你根据用户事件来更新部分页面内容。 

1.3.2AJAX 的缺点

1) 没有浏览历史，不能回退
2) 存在跨域问题(同源)
3) SEO 不友好

1.4AJAX 的使用

1.4.1核心对象

XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的。

1.4.2使用步骤

1) 创建XMLHttpRequest 对象var xhr = new XMLHttpRequest();
2) 设置请求信息xhr.open(method, url);//可以设置请求头，一般不设置xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
3) 发送请求xhr.send(body) //get 请求不传body 参数，只有post 请求使用
4) 接收响应//xhr.responseXML 接收xml 格式的响应数据//xhr.responseText 接收文本格式的响应数据xhr.onreadystatechange = function (){if(xhr.readyState == 4 && xhr.status == 200){var text = xhr.responseText;console.log(text);}
}

1.4.3解决IE 缓存问题

问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩
余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决方式：浏览器的缓存是根据url 地址来记录的，所以我们只需要修改url 地址
即可避免缓存问题

xhr.open("get","/testAJAX?t="+Date.now());

1.4.4AJAX 请求状态

xhr.readyState 可以用来查看请求当前的状态
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState

0: 表示XMLHttpRequest 实例已经生成，但是open()方法还没有被调用。
1: 表示send()方法还没有被调用，仍然可以使用setRequestHeader()，设定HTTP请求的头信息。
2: 表示send()方法已经执行，并且头信息和状态码已经收到。
3: 表示正在接收服务器传来的body 部分的数据。
4: 表示服务器数据已经完全接收，或者本次接收已经失败了

二、jQuery 中的AJAX

2.1 get 请求

$.get(url, [data], [callback], [type])
url:请求的URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式，xml, html, script, json, text, _default。

2.2 post 请求

$.post(url, [data], [callback], [type])
url:请求的URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式，xml, html, script, json, text, _default。

三、跨域

3.1同源策略

同源策略(Same-Origin Policy)最早由Netscape 公司提出，是浏览器的一种安全策略。

同源： 协议、域名、端口号必须完全相同。违背同源策略就是跨域。

3.2如何解决跨域

3.2.1JSONP

3.2.1.1JSONP 是什么

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明
才智开发出来，只支持get 请求。

3.2.1.2JSONP 怎么工作的？

在网页有一些标签天生具有跨域能力，比如：img link iframe script。
JSONP 就是利用script 标签的跨域能力来发送请求的。

3.2.2CORS

跨源资源共享（CORS） - HTTP | MDN

3.2.2.1CORS 是什么？

CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方
案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持
get 和post 请求。跨域资源共享标准新增了一组HTTP 首部字段，允许服务器声明哪些
源站通过浏览器有权限访问哪些资源

3.2.2.2CORS 怎么工作的？

CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应
以后就会对响应放行。