1. Ajax概述

1.1 AJAX 简介

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

1.2 XML 简介

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.3 AJAX 的特点

1.3.1 AJAX 的优点

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

1.3.2 AJAX 的缺点

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

2. HTTP相关问题

2.1 MDN 文档

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview

2.2 HTTP 请求交互的基本过程

1. 前后应用从浏览器端向服务器发送HTTP 请求(请求报文)
2. 后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)
3. 浏览器端接收到响应, 解析显示响应体/调用监视回调

2.3 HTTP 请求报文

1. 请求行

method url
GET /product_detail?id=2
POST /login

2. 多个请求头

Host: www.baidu.com
Cookie: BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706;
Content-Type: application/x-www-form-urlencoded 或者application/json

3. 请求体

username=tom&pwd=123
{"username": "tom", "pwd": 123}

2.4 HTTP 响应报文

1. 响应状态行: status statusText
2. 多个响应头
   Content-Type: text/html;charset=utf-8
Set-Cookie: BD_CK_SAM=1;path=/
3. 响应体
   html 文本/json 文本/js/css/图片...

2.5 post 请求体参数格式

1. Content-Type: application/x-www-form-urlencoded;charset=utf-8
   用于键值对参数，参数的键值用=连接, 参数之间用&连接
   例如: name=%E5%B0%8F%E6%98%8E&age=12
2. Content-Type: application/json;charset=utf-8
   用于 json 字符串参数
   例如: {"name": "%E5%B0%8F%E6%98%8E", "age": 12}
3. Content-Type: multipart/form-data
   用于文件上传请求

2.6 常见的响应状态码

200 OK 请求成功。一般用于GET 与POST 请求
201 Created 已创建。成功请求并创建了新的资源
401 Unauthorized 未授权/请求要求用户的身份认证
404 Not Found 服务器无法根据客户端的请求找到资源
500 Internal Server Error 服务器内部错误，无法完成请求

2.7 不同类型的请求及其作用

1. GET: 从服务器端读取数据（查）
2. POST: 向服务器端添加新数据 （增）
3. PUT: 更新服务器端已经数据 （改）
4. DELETE: 删除服务器端数据 （删）

2.8 API 的分类

1. REST API: restful （Representational State Transfer (资源)表现层状态转化）
   (1) 发送请求进行CRUD 哪个操作由请求方式来决定
   (2) 同一个请求路径可以进行多个操作
   (3) 请求方式会用到GET/POST/PUT/DELETE
2. 非REST API: restless
   (1) 请求方式不决定请求的CRUD 操作
   (2) 一个请求路径只对应一个操作
   (3) 一般只有GET/POST

2.9 区别 一般http请求 与 ajax请求

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

3. 原生AJAX 的基本使用 XHR

3.0 准备工作

3.0.1 安装node.js

http://nodejs.cn/

3.0.2 安装express（服务端框架）

https://www.expressjs.com.cn/

1. 初始化环境

npm init --yes

2. 下载express包

npm install express --save

3. 编写js代码

// 1. 引入express
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 端口监听中...");})

4. 运行js程序

node .\01express使用.js

5. 打开网页显示页面
   

6. 调试程序可以查看请求和响应
   
   

3.0.3 安装nodemon自动重启工具

文件内容有修改自动重新启动服务
https://www.npmjs.com/package/nodemon

安装

npm install -g nodemon

启动服务

ndoemon server.js

3.1 理解

1. 使用XMLHttpRequest (XHR)对象可以与服务器交互, 也就是发送ajax 请求
2. 前端可以获取到数据，而无需让整个的页面刷新。
3. 这使得Web 页面可以只更新页面的局部，而不影响用户的操作。

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的

3.2 核心对象使用步骤

3.2.1 创建XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

3.2.2 设置请求信息（请求方法和url）

// 请求方式
xhr.open(method, url);
//可以设置请求头，一般不设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

3.2.3 发送请求

xhr.send(body) //get请求不传 body 参数，只有post请求使用

3.2.4 接收响应（事件绑定，处理服务端返回的结果）

//xhr.responseXML 接收 xml格式 的响应数据
//xhr.responseText 接收 文本格式 的响应数据
xhr.onreadystatechange = function (){// readyState 是 xhr对象中的属性, 表示状态 0 1 2 3 4if(xhr.readyState == 4 && xhr.status == 200){var text = xhr.responseText;console.log(text);}
}

3.3 使用案例

3.3.1 GET 请求

点击返回响应信息

创建两个文件，浏览器端使用的html文件和服务器端使用的js文件

服务器端 server.js

// 1. 引入express
const express = require('express');// 2. 创建应用对象
const app = express();// 3. 创建路由规则
app.get('/server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 设置响应体response.send("Hello Ajax");
});// 4. 监听服务
app.listen(8000, () => {console.log("服务已经启动, 8000 端口监听中...");})

启动服务

node server.js

前端页面 html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax GET 请求</title><style>#result {width: 200px;height: 100px;border: solid 1px #90b;}</style>
</head>
<body><button>点击发送请求</button><div id="result"></div><script>//获取button元素const btn = document.getElementsByTagName('button')[0];const result = document.getElementById('result');//绑定事件btn.onclick = function(){// 1. 创建对象const xhr = new XMLHttpRequest();// 2. 初始化 设置请求方法和urlxhr.open('GET', 'http://127.0.0.1:8000/server')// 3. 发送xhr.send();// 4. 事件绑定 处理服务端返回的结果xhr.onreadystatechange = function(){// readyState 是 xhr 对象中的属性, 表示状态 0 1 2 3 4//判断 (服务端返回了所有的结果)if(xhr.readyState === 4){//判断响应状态码 200  404  403 401 500if(xhr.status >= 200 && xhr.status < 300){// 处理结果 行 头 空行 体// 响应console.log('状态码', xhr.status); // 状态码console.log('状态字符串', xhr.statusText); // 状态字符串console.log('所有响应头', xhr.getAllResponseHeaders()); // 所有响应头console.log('响应体', xhr.response); // 响应体//设置 result 的文本result.innerHTML=xhr.response;}else{}}} }</script>
</body>
</html>

# GET 请求设置请求参数

设置url参数

xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');

3.3.2 POST请求

鼠标放到div中，发post请求，将响应体放在div中呈现

server.js添加post

app.post('/server', (request, response) => {// 设置响应头, 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 设置响应体response.send("Hello Ajax POST");
});

post.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax POST 请求</title><style>#result {width: 200px;height: 100px;border: solid 1px #903;}</style>
</head>
<body><div id="result"></div><script>// 获取元素对象const result = document.getElementById('result');// 绑定事件result.addEventListener("mouseover", function(){// 1. 创建对象const xhr = new XMLHttpRequest();// 2. 初始化 设置类型（请求方式）与urlxhr.open('POST', 'http://127.0.0.1:8000/server');// 3. 发送   设置请求参数（请求体）xhr.send('a=100&b=200&c=300');// 4. 事件绑定xhr.onreadystatechange = function(){// 判断if(xhr.readyState === 4){if(xhr.status >=200 && xhr.status < 300){// 处理服务端返回的结果result.innerHTML = xhr.response;}}}});</script>
</body>
</html>

# 设置请求头信息

// 设置请求体内容的类型
xhr.setRequesHeader('Content-Type','application/x-www-from-urlencoded');
// 自定义头信息
xhr.setRequesHeader('name', 'ykyk');

server.js中设置响应头允许自定义请求头 post改成all

response.setHeader('Access-Control-Allow-Header','*');

3.4 json数据请求

app.all('/json-server', (request, response) => {// 设置响应头, 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 设置响应头, 设置允许自定义头信息response.setHeader('Access-Control-Allow-Headers', '*');// 响应一个数据const data = {name: 'atguigu'};// 对 对象 进行 字符串 转换let str = JSON.stringify(data)// 设置响应体response.send(str);
});

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JSON</title><style>#result {width: 200px;height: 100px;border: solid 1px #89b;}</style>
</head>
<body><div id="result"></div><script>const result = document.getElementById('result');// 绑定键盘按下事件window.onkeydown = function(){// 发送请求const xhr = new XMLHttpRequest();// *2*.(自动转换) 设置响应体数据的类型(自动转换)xhr.responseType = 'json';// 初始化xhr.open('GET', 'http://127.0.0.1:8000/json-server');// 发送xhr.send();// 事件绑定xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status < 300){console.log(xhr.response);// 1. 手动对数据转化 (字符串再转换成json)// let data = JSON.parse(xhr.response); //转换成json// result.innerHTML = data.name;// *2*. (自动转换)自动转换(自动转换)result.innerHTML = xhr.response.name; //已经自动变成json}}}}</script>
</body>
</html>

3.5 请求超时与网络异常

// 超时设置 （2秒）
xhr.timeout = 2000;
// 超时回调
xhr.ontimeout = function(){alert('网络超时，请稍后重试')
}
// 网络异常回调
xhr.onerror = function(){alert('网络异常，请稍后重试')
}

3.6 取消请求

// 手动取消
xhr.abort()

3.7 请求重复发送问题

3.8 解决 IE 缓存问题

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

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

3.9 AJAX 请求状态

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: 表示服务器数据已经完全接收，或者本次接收已经失败了

3.10 API总结

• XMLHttpRequest()：创建 XHR 对象的构造函数
• status：响应状态码值，如 200、404
• statusText：响应状态文本，如 ’ok‘、‘not found’
• readyState：标识请求状态的只读属性 0-1-2-3-4
• onreadystatechange：绑定 readyState 改变的监听
• responseType：指定响应数据类型，如果是 ‘json’，得到响应后自动解析响应
• response：响应体数据，类型取决于 responseType 的指定
• timeout：指定请求超时时间，默认为 0 代表没有限制
• ontimeout：绑定超时的监听
• onerror：绑定请求网络错误的监听
• open()：初始化一个请求，参数为：(method, url[, async])
• send(data)：发送请求
• abort()：中断请求 （发出到返回之间）
• getResponseHeader(name)：获取指定名称的响应头值
• getAllResponseHeaders()：获取所有响应头组成的字符串
• setRequestHeader(name, value)：设置请求头

4. jQuery 中的AJAX

4.1 get 请求

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

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

4.2 post 请求

$.post(url, [data], [callback], [type])

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

4.3 通用方法

$.ajax({// urlurl: 'http://127.0.0.1:8000/jquery-server',// 参数data: {a:100, b:200},// 请求类型type: 'GET',// 响应体结果dataType: 'json',// 成功的回调success: function(data){console.log(data);},// 超时时间timeout: 2000,// 失败的回调error: function(){console.log('出错拉~');},// 头信息headers: {c: 300,d: 400}
})

5. 跨域

5.1 同源策略

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

5.2 如何解决跨域

5.2.1 JSONP

1) JSONP 是什么

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

2) JSONP 怎么工作的？

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

3) 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.服务器中路由的处理

router.get("/testAJAX" , function (req , res) {console.log("收到请求");var callback = req.query.callback;var obj = {name:"孙悟空",age:18}res.send(callback+"("+JSON.stringify(obj)+")");
});

4) jQuery 中的JSONP

<!DOCTYPE html>
<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>

5.2.2 CORS

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

1) CORS 是什么？

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

2) CORS 怎么工作的？

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

3) CORS 的使用

主要是服务器端的设置：

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

【Ajax】HTTP相关问题-GET-POST-XHR使用-jQuery中的ajax-跨域-同源-jsonp-cors相关推荐

1. 【AJAX 笔记】AJAX 基本、HTTP 基本、原生 AJAX 的使用，jQuery / Axios / fetch 发送请求、跨域（JSONP/CORS）

   文章目录 1 Ajax 概述 1.1 AJAX 简介 1.2 XML 简介 1.3 AJAX 的特点 1.3.1 AJAX 的优点 1.3.2 AJAX 的缺点 1.4 AJAX 属性和方法 2. H ...

2. jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）

   jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...

3. jQuery框架学习第六天：jQuery中的Ajax应用

   一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章讲解如何使用jQuery方便快捷的实现A ...

4. 【Ajax】了解Ajax与jQuery中的Ajax

   一.了解Ajax 什么是Ajax Ajax 的全称是 Asynchronous Javascript And XML(异步 JavaScript 和 XML). 通俗的理解:在网页中利用 XMLHtt ...

5. Ajax（jQuery封装），表单form提交（Ajax），art-template模板引擎，原生Ajax，XML和JSON，axios，跨域和JSONP，防抖和节流，HTTP协议

   目录 服务器基本概念 1.URL 2.URL地址的组成部分 3. 图解客户端与服务器的通信过程 4.网页中如何请求数据 5.资源的请求方式 Ajax jQuery中的Ajax 1. $.get()函数 ...

6. 在jquery中使用AJAX

   在jquery中使用封装好的AJAX会对开发效率起到极大的便利,因此掌握jquery中的一系列AJAX封装函数是做好页面数据交互的必备技能: 1.在之前,我们首先需要详细了解AJAX异步请求接受的五中 ...

7. 【Ajax】Ajax全面讲解、跨域与JSONP及了解HTTP

   Ajax 一.初识Ajax 1.1 URL地址 1.1.1 URL地址组成部分 1.2 客户端与服务器的通信过程 1.3 网页中如何请求数据 1.4 资源的请求方式 1.5 Ajax的概念 1.6 j ...

8. 跨域资源共享（CORS）--跨域ajax

   几年前,网站开发者都因为ajax的同源策略而撞了南墙.当我们惊叹于XMLHttpRequest对象跨浏览器支持所带来的巨大进步时,我们很快发现没有一个方法可以使我们用JavaScript实现请求跨域访 ...

9. 用JQuery中的Ajax方法获取web service等后台程序中的方法

   用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...

10. 六、jQuery 中的 AJAX 跨域问题

    第 2 章:jQuery 中的 AJAX 官方中文文档:https://jquery.cuishifeng.cn/jQuery.Ajax.html 2.1 get 请求 $.get(url, [dat ...

最新文章

1. Java基础篇：Java集合
2. Python sort()和sorted()
3. PAT甲级题目翻译+答案 AcWing（基础算法与数据结构）
4. 在 echarts关系图动态线上添加文字_多折线堆叠图如何制作？
5. Hbase的shell命令学习
6. yii2.0AR两表联查
7. 配置nginx+wordpress的https
8. Illustrator教程，如何在 Illustrator 中创建和应用图案？
9. 6.数据结构 --- 树和二叉树
10. ASP.NET 学习路线图
11. 一款实用工具：免费短信验证码SDK
12. 像素深度、分辨率与图片大小的关系？图片大小怎么计算？
13. 刘韵洁:未来网络技术发展趋势与展望
14. 我如何零基础转行成为一个自信的前端
15. 真正优秀的人，为何都那么尊重别人？（非常深刻）
16. 荣耀4a刷android 6,华为荣耀4a刷机教程_华为荣耀4a强刷官方系统包
17. 移动云计算的四大特点
18. python如何计算成绩平方根_python 使用二分法计算平方根
19. 怎样将png格式的图片缩小?如何快速压缩图片的大小？
20. 北大博士唐大仕推荐C#学习网站

热门文章

1. Opendaylight部署karaf集群
2. android如何调用百度搜索,Android-百度地图的调用（检索功能）
3. 【CodeForces497D】Gears
4. 短视频源码教程之短视频app制作如何实现合拍功能
5. 如何用pytorch做文本摘要生成任务(加载数据集、T5 模型参数、微调、保存和测试模型，以及ROUGE分数计算)
6. Latent Diffusion 论文笔记
7. 日志易饶琛琳分享：AI 助力日志中心智能化运营
8. 解对称正定矩阵线性方程组的平方根方法
9. 企业级负载均衡解决方案之四：爱奇艺四层负载均衡解决方案DPVS
10. 从匆匆的一瞥，到两小时泯灭（SQL注入）