AJAX学习笔记(Node.js环境)

第一章：原生Ajax

1.1 Ajax简介

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

1.2 XML简介

XML：可扩展标记语言
XML：被设计用来传输和存储数据
XML和HTML类似，不同点：HTML中都是预定义标签，XML中没有预定义标签，全是自定义标签，用来表示一些数据
现在已被JSON取代

缺点：

XML 格式臃肿，和数据无关的代码多，体积大，传输效率低
在 Javascript 中解析 XML 比较麻烦

1.3 AJAX 的特点

1.3.1 AJAX的优点

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

1.3.2 AJAX 的缺点

没有浏览历史，不能回退
存在跨域问题（同源）
SEO不友好（爬虫获取不到信息）

1.4 AJAX 的使用

1.4.1 核心对象

1.4.2 使用步骤

POST请求举例：

btn.onclick = function() {
	// 1.创建对象
	const xhr = new XMLHttpRequest()

	// 2.设置请求类型和请求地址
	xhr.open('POST', 'http://127.0.0.1:8000/server')

	// 3.设置请求头（一般可以不设置，固定写法）
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
		// 自定义的请求头
    xhr.setRequestHeader('name','atguigu')

	// 4. 发送请求。get请求在这里不传参数而是在url里设置参数。只有post请求使用send()传参
	xhr.send('a=100&b=200')

	// 5. 监听 onreadystatechange 事件
	// readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
            // 0:初始化
            // 1:是open方法调用完毕
            // 2:是send方法调用完毕
            // 3:是服务端返回部分结果
            // 4:服务端返回了所有结果 
	xhr.onreadystatechange = function() {
		
		if (xhr.readyState === 4 && xhr.status === 200) {
    		// 打印服务器响应回来的数据
			// 处理结果  行 头 空行 体
            	// console.log(xhr.status);//状态码
                // console.log(xhr.statusText);//状态字符串
                // console.log(xhr.getAllResponseHeaders());//所有响应头
                // console.log(xhr.response);//响应体

    		console.log(xhr.responseText)
		}

	}
	
}

浏览器提供了 URL 编码与解码的 API，分别是： encodeURI() 编码的函数 decodeURI() 解码的函数 encodeURI('黑马程序员')

// 输出字符串  %E9%BB%91%E9%A9%AC%E7%A8%8B%E5%BA%8F%E5%91%98

decodeURI('%E9%BB%91%E9%A9%AC')
// 输出字符串  黑马

第二章 jQuery中的AJAX

2.1 get请求

$.get(url, [data], [callback], [type]) {

	url: 请求的URL地址
	data: 请求携带的参数
	callback: 载入成功时回调函数
	type：设置返回内容格式，xml、html、script、json、text、_default

}

第三章：跨域

3.1 同源策略

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

同源：协议、域名、端口号 必须完全相同。

同源策略限制从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。

无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
无法接触非同源网页的 DOM
无法向非同源地址发送 Ajax 请求

3.2N跨域

不是同源就是跨域喽。‘

浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦截，无法被页面获取到。

3.3 如何解决跨域

3.3.1 JSONP（方案一）

1. JSONP是什么

JSONP (JSON with Padding)，是一个非官方的跨域解决方案，可用于解决主流浏览器的跨域数据访问的问题。只支持get请求。

2. JSONP 的实现原理？

在网页有一些标签天生具有跨域能力，比如：img, link, iframe, script。

JSONP就是利用script标签的跨域能力来发送请求的，通过 script 标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据。

3. 实现一个简单的JSONP

先定义一个回调函数

<script>
	function success(data) {
		console.log('获取到了data数据：')
		console.log(data)
	}
</script>

再通过script标签请求接口数据

<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=zs&age=20">
</script>

4. JSONP的缺点

由于 JSONP 是通过 script 标签的 src 属性，来实现跨域数据获取的，所以，JSONP 只支持 GET 数据请求，不支持 POST 请求。

JSONP 和 Ajax 之间没有任何关系，不能把 JSONP 请求数据的方式叫做 Ajax，因为 JSONP 没有用到 XMLHttpRequest 这个对象。

3.3.2 CORS（方案二）

推荐阅读：

CORS是什么

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

CORS的工作方式

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

CORS 的使用

主要是服务端的设置：

rounter.get("/testAJAX",function(req, res){
	//设置允许跨域的响应头， * 表示接受所有跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	//设置允许接受自定义请求头的响应头
	response.setHeader('Access-Control-Allow-Headers', '*');
})