【Ajax】GET-POST-XHR使用-jQuery中的ajax 跨域一般http请求与 ajax请求，原生aja

AJax简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

AJAX 的特点

AJAX 的优点

可以无需刷新页面而与服务器端进行通信
允许根据用户事件来更新部分页面内容 AJAX 的缺点
没有浏览历史，不能回退
存在跨域问题(同源)
对SEO 不友好

XML 简介

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

一般http请求与 ajax请求

1.ajax请求是一种特别的 http请求
2.对服务器端来说, 没有任何区别, 区别在浏览器端
3.浏览器端发请求: 只有XHR 或fetch 发出的才是ajax 请求,其它所有的都是非ajax 请求
4.浏览器端接收到响应: (1) 一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面
(2) ajax请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调函数并传入响应相关数据\

原生AJAX 的基本使用 XHR

（1）安装node.js `<http://nodejs.cn/>`

（2）安装express（服务端框架）`<https://www.expressjs.com.cn/>`

1.初始化环境 npm init --yes
2.下载express包 npm install express --save
3. 编写js代码

const express = require('express');

// 2. 创建应用对象
const app = express();

// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/', (request, response) => {
  //  设置响应
  response.send("Hello Express");
});

// 4. 监听端口，启动服务
app.listen(8000, () => {
  console.log("服务已经启动, 8000 端口监听中...");
 })

运行js程序

node .\01express使用.js

（3）安装nodemon自动重启工具 `<https://www.npmjs.com/package/nodemon>`

文件内容有修改自动重新启动服务
1.安装 npm install -g nodemon
2.启动服务 ndoemon server.js

解决 IE 缓存问题

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

AJAX 请求状态

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

jQuery 中的 AJAX

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

跨域

同源策略(Same-Origin Policy)最早由Netscape 公司提出，是浏览器的一种安全策略
同源：协议、域名、端口号必须完全相同
跨域：违背同源策略就是跨域

解决跨域

（1）JSONP(JSON with Padding)，是一个非官方的跨域解决方案,只支持get 请求。
（2）JSONP 的工作原理：在网页有一些标签天生具有跨域能力，比如：img link iframe （3）script。JSONP 就是利用script 标签的跨域能力来发送请求
（4）JSONP 的使用:
1.动态的创建一个script 标签

var script = document.createElement("script");

2.设置script 的src，设置回调函数

script.src = "http://localhost:3000/testAJAX?callback=abc";
function abc(data) {
	alert(data.name);
};

3.将script 添加到body 中

document.body.appendChild(script);

4.服务器中路由的处理

	console.log("收到请求");
	var callback = req.query.callback;
	var obj = {
		name:"叻叻白",
		age:15
	}
	res.send(callback+"("+JSON.stringify(obj)+")");
});

（5）jQuery 中的JSONP

<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<body>
		<button id="btn">按钮</button>
		<ul id="list"></ul>
		<script type="text/javascript" src="./jquery-1.12.3.js"></script>
		<script type="text/javascript">
			window.onload = function () {
				var btn = document.getElementById('btn')
				btn.onclick = function () {
					$.getJSON("http://api.douban.com/v2/movie/in_theaters?callback=?",function(data) {
						console.log(data);
						//获取所有的电影的条目
						var subjects = data.subjects;
						//遍历电影条目
						for(var i=0 ; i<subjects.length ; i++){
							$("#list").append("<li>"+
							subjects[i].title+"<br />"+
							"<img src=\""+subjects[i].images.large+"\" >"+
							"</li>");
						}
					});
				}
			}
		</script>
</body>
</html>

CORS

（1）CORS（Cross-Origin Resource Sharing），跨域资源共享。是官方的跨域解决方案，特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get 和post 请求。跨域资源共享标准新增了一组HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源
（2）CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行
（3）CORS 的使用主要是服务器端的设置：

	//通过res 来设置响应头，来允许跨域请求
	//res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
	res.set("Access-Control-Allow-Origin","*");
	res.send("testAJAX 返回的响应");
});

更多精彩内容敬请关注

不愿迟到早退的叻叻白

【Ajax】GET-POST-XHR使用-jQuery中的ajax 跨域

AJax简介

AJAX 的特点

HTTP相关问题

XML 简介

一般http请求 与 ajax请求