HTTP请求POST、GET请求的数据格式(Content-type 和 Response-type)和深入浅出Ajax

建议看原文链接：

 

请求的HTTP协议格式
客户端给服务器发送数据叫请求

服务器给客户端回传数据叫响应

请求分为GET请求和POST请求

1.GET请求
①请求行
请求的方式 GET

请求的资源路径【+？+请求参数】

请求的协议版本号 HTTP/1.1

②请求头
key:value 组成 不同的键值对，表示不同的含义

 

 

2.POST请求
①请求行
请求的方式 POST

请求的资源路径【+？+请求参数】

请求的协议版本号 HTTP/1.1

②请求头
key:value 组成 不同的键值对，表示不同的含义

空行

③请求体
就是发送给服务器的数据

 

 

 

3.常用请求头说明
Accept:表示客户端可以接收的数据类型

Accept-Language: 表示客户端可以接收的语言类型

User-Agent：表示客户端浏览器的信息

Host：表示请求时的服务器ip和端口号

4.哪些是GET请求哪些是POST请求
GET请求
① form标签 method=get

②a标签

③link标签引入css

④Script标签引入js文件

⑤img标签引入图片

⑥iframe引入html页面

⑦在浏览器地址栏中输入地址后敲回车

 

POST请求
① form标签 method=post

响应的HTTP协议格式
1.响应行

①响应的协议和版本号

②响应状态码

③响应状态描述符

2.响应头

key:value 不同的响应头，有其不同含义

空行

3.响应体

回传给客户端的数据

 

 

 

常见的响应码说明
200 请求成功

302 表示请求重新定向

404 表示请求服务器已经收到，但是你要的数据不存在（请求地址错误）

500 表示服务器已经收到请求，但是服务器内部错误（代码发生错误）

原文链接：https://blog.csdn.net/weixin_51351637/article/details/126218456

HTTP请求POST、GET请求的数据格式(Content-type 和 Response-type）

HTTP_POST请求的数据格式
在HTTP的请求头中，可以使用Content-type来指定不同格式的请求信息。

Content-type的类型
常见的媒体格式类型：

text/html ： HTML格式
text/plain ：纯文本格式
text/xml ： XML格式
image/gif ：gif图片格式
image/jpeg ：jpg图片格式
image/png：png图片格式
以applicaton开头的没提类型：

application/json ： JSON数据格式
application/xhtml+xml ：XHTML格式
application/xml ： XML数据格式
application/atom+xml ：Atom XML聚合格式
application/pdf ：pdf格式
application/javascript ：js格式
application/msword ： Word文档格式
application/octet-stream ： 二进制流数据（如常见的文件下载）
application/x-www-form-urlencoded ：form表单默认的数据格式类型，form表单数据被编码为key/value格式发送到服务器。
另外一种常见的媒体格式是上传文件之时使用的：

multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格式。
除了原生的content-type，开发人员也可以完全自定义数据提交格式！

最常用的三种：

application/x-www-form-urlencoded，form表单默认的数据格式，提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码。大部分服务端语言都对这种方式有很好的支持。比如下面的http请求格式：

# Request Headers

POST /adduser HTTP/1.1
Host: localhost:8030
Connection: keep-alive
Content-Length: 16
Pragma: no-cache
Cache-Control: no-cache
Origin: chrome-extension://fdmmgilgnpjigdojojpjoooidkmcomcm
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9


# Form Data

name=name&age=11

 

application/json，现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。服务端语言也有很多函数去解析JSON，使用JSON可以支持更加复杂的结构化数据。比如下面的http请求格式：

# Request Headers

POST /adduser HTTP/1.1
Host: localhost:8030
Connection: keep-alive
Content-Length: 24
Pragma: no-cache
Cache-Control: no-cache
Origin: chrome-extension://fdmmgilgnpjigdojojpjoooidkmcomcm
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36
Content-Type: application/json
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9


# Request Payload

{"name":"121","age":121}

 

multipart/form-data，对用于在表单中上传文件时，也可以上传普通数据，只需要让from的ectyle等于multipart/form-data就可以了。比如下面的http请求格式：

# Request Header

POST /adduser HTTP/1.1
Host: localhost:8030
Connection: keep-alive
Content-Length: 232
Pragma: no-cache
Cache-Control: no-cache
Origin: chrome-extension://fdmmgilgnpjigdojojpjoooidkmcomcm
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryBRi81vNtMyBL97Rb
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9


# Request Payload

------WebKitFormBoundaryBRi81vNtMyBL97Rb
Content-Disposition: form-data; name="name"

name1
------WebKitFormBoundaryBRi81vNtMyBL97Rb
Content-Disposition: form-data; name="age"

12
------WebKitFormBoundaryBRi81vNtMyBL97Rb--

 

这种格式的数据会有一个边界线boundary（这里就是------WebKitFormBoundaryBRi81vNtMyBL97Rb）用于分割不同的字段，为了避免与正文内容重复，boundary很长很复杂。消息主体以boundary开始，紧接着就是内容描述信息，然后是回车，最后是字段具体的内容（文本或二进制）。如果传输的是文件，还要包含文件名和文件类型信息。消息主体以boundary结束。

Request Headers部分各个字段的功能
通过上面的例子，我们可以看到在Request Headers里面以后很多字段，比如Content-type，Host这些，那么这些字段又有什么意思呢，下面通过表格来介绍一下：

Header 解释 示例
Accept 指定客户端能够接收的内容类型 Accept: text/plain, text/html,*/*
Accept-Charset 浏览器可以接受的字符编码集。 Accept-Charset: iso-8859-5
Accept-Encoding 指定浏览器可以支持的web服务器返回内容压缩编码类型。 Accept-Encoding: compress, gzip
Accept-Language 浏览器可接受的语言 Accept-Language: en,zh
Accept-Ranges 可以请求网页实体的一个或者多个子范围字段 Accept-Ranges: bytes
Authorization HTTP授权的授权证书 Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
Cache-Control 指定请求和响应遵循的缓存机制 Cache-Control: no-cache
Connection 表示是否需要持久连接。（HTTP 1.1默认进行持久连接） Connection: keep-alive
Cookie HTTP请求发送时，会把保存在该请求域名下的所有cookie值一起发送给web服务器。 Cookie: $Version=1; Skin=new;
Content-Length 请求的内容长度 Content-Length: 348
Content-Type 请求的与实体对应的MIME信息 Content-Type: application/x-www-form-urlencoded
Date 请求发送的日期和时间 Date: Tue, 15 Nov 2010 08:12:31 GMT
Expect 请求的特定的服务器行为 Expect: 100-continue
From 发出请求的用户的Email From: user@email.com
Host 指定请求的服务器的域名和端口号 Host: www.zcmhi.com
If-Match 只有请求内容与实体相匹配才有效 If-Match: “737060cd8c284d8af7ad3082f209582d”
If-Modified-Since 如果请求的部分在指定时间之后被修改则请求成功，未被修改则返回304代码 If-Modified-Since: Sat, 29 Oct 2010 19:43:31 GMT
If-None-Match 如果内容未改变返回304代码，参数为服务器先前发送的Etag，与服务器回应的Etag比较判断是否改变 If-None-Match: “737060cd8c284d8af7ad3082f209582d”
If-Range 如果实体未改变，服务器发送客户端丢失的部分，否则发送整个实体。参数也为Etag If-Range: “737060cd8c284d8af7ad3082f209582d”
If-Unmodified-Since 只在实体在指定时间之后未被修改才请求成功 If-Unmodified-Since: Sat, 29 Oct 2010 19:43:31 GMT
Max-Forwards 限制信息通过代理和网关传送的时间 Max-Forwards: 10
Pragma 用来包含实现特定的指令 Pragma: no-cache
Proxy-Authorization 连接到代理的授权证书 Proxy-Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
Range 只请求实体的一部分，指定范围 Range: bytes=500-999
Referer 先前网页的地址，当前请求网页紧随其后,即来路 Referer: http://www.zcmhi.com/archives/71.html
TE 客户端愿意接受的传输编码，并通知服务器接受接受尾加头信息 TE: trailers,deflate;q=0.5
Upgrade 向服务器指定某种传输协议以便服务器进行转换（如果支持） Upgrade: HTTP/2.0, SHTTP/1.3, IRC/6.9, RTA/x11
User-Agent User-Agent的内容包含发出请求的用户信息 User-Agent: Mozilla/5.0 (Linux; X11)
Via 通知中间网关或代理服务器地址，通信协议 Via: 1.0 fred, 1.1 nowhere.com (Apache/1.1)
Warning 关于消息实体的警告信息 Warn: 199 Miscellaneous warning
拓展知识：

User-Agent里面包含了浏览器客户端的信息，比如：Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36

通过这个信息可以看到使用的是Chrome浏览器，内核是Apple的WebKit。

其实前世界上主要有来自四个不同机构的四种的Web浏览器内核。每一家机构都推出了至少一种使用自己的内核的浏览器产品。

这四家机构分别是Microsoft、Mozilla、Apple和Opera SAS，提供的内核则分别叫做Trident、Gecko、WebKit和Presto，推出的主打浏览器则分别叫做Internet Explorer、Firefox、Safari和Opera。我们最常使用的Chrome浏览器就是用的苹果公司的Webkit。国内的一些浏览器也是基于webkit内核的，其所谓的双核中的极速模式就是webkit内核，兼容模式就是ie的trident内核。

Response Headers部分各个字段的功能
Request Headers是请求头，Response Headers是响应头，同样，它也包含了一些字段信息：

Header 解释 示例
Accept-Ranges 表明服务器是否支持指定范围请求及哪种类型的分段请求 Accept-Ranges: bytes
Age 从原始服务器到代理缓存形成的估算时间（以秒计，非负） Age: 12
Allow 对某网络资源的有效的请求行为，不允许则返回405 Allow: GET, HEAD
Cache-Control 告诉所有的缓存机制是否可以缓存及哪种类型 Cache-Control: no-cache
Content-Encoding web服务器支持的返回内容压缩编码类型。 Content-Encoding: gzip
Content-Language 响应体的语言 Content-Language: en,zh
Content-Length 响应体的长度 Content-Length: 348
Content-Location 请求资源可替代的备用的另一地址 Content-Location: /index.htm
Content-MD5 返回资源的MD5校验值 Content-MD5: Q2hlY2sgSW50ZWdyaXR5IQ==
Content-Range 在整个返回体中本部分的字节位置 Content-Range: bytes 21010-47021/47022
Content-Type 返回内容的MIME类型 Content-Type: text/html; charset=utf-8
Date 原始服务器消息发出的时间 Date: Tue, 15 Nov 2010 08:12:31 GMT
ETag 请求变量的实体标签的当前值 ETag: “737060cd8c284d8af7ad3082f209582d”
Expires 响应过期的日期和时间 Expires: Thu, 01 Dec 2010 16:00:00 GMT
Last-Modified 请求资源的最后修改时间 Last-Modified: Tue, 15 Nov 2010 12:45:26 GMT
Location 用来重定向接收方到非请求URL的位置来完成请求或标识新的资源 Location: http://www.zcmhi.com/archives/94.html
Pragma 包括实现特定的指令，它可应用到响应链上的任何接收方 Pragma: no-cache
Proxy-Authenticate 它指出认证方案和可应用到代理的该URL上的参数 Proxy-Authenticate: Basic
refresh 应用于重定向或一个新的资源被创造，在5秒之后重定向（由网景提出，被大部分浏览器支持） Refresh: 5; url=http://www.zcmhi.com/archives/94.html
Retry-After 如果实体暂时不可取，通知客户端在指定时间之后再次尝试 Retry-After: 120
Server web服务器软件名称 Server: Apache/1.3.27 (Unix) (Red-Hat/Linux)
Set-Cookie 设置Http Cookie Set-Cookie: UserID=JohnDoe; Max-Age=3600; Version=1
Trailer 指出头域在分块传输编码的尾部存在 Trailer: Max-Forwards
Transfer-Encoding 文件传输编码 Transfer-Encoding:chunked
Vary 告诉下游代理是使用缓存响应还是从原始服务器请求 Vary: *
Via 告知代理客户端响应是通过哪里发送的 Via: 1.0 fred, 1.1 nowhere.com (Apache/1.1)
Warning 警告实体可能存在的问题 Warning: 199 Miscellaneous warning
WWW-Authenticate 表明客户端请求实体应该使用的授权方案 WWW-Authenticate: Basic
参考：

https://imququ.com/post/four-ways-to-post-data-in-http.html

https://blog.csdn.net/blueheart20/article/details/45174399
————————————————
版权声明：本文为CSDN博主「scuwangjun」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u014672511/article/details/80425808

 

 

深入浅出Ajax

理解Ajax的工作原理

含义：
1. w3chool官网：Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
2. 我的理解：无须刷新页面即可从服务器取得数据的技术。

原理：
Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

 

核心XMLHttpRequest对象
Ajax技术的核心是XMLHttpRequest对象。
IE5 XHR对象是通过MSXML库中的一个ActiveX对象实现的，所以要考虑做兼容。
IE7+、Firefox、Opera、Chrome和Safari都支持原生的XHR对象
new ActiveXObject(versions);

new XMLHttpRequest();

options参数说明
参数 类型 描述 默认值 是否填
url string 发送请求的url，服务器地址（api） ” 必填
method string http连接的方式，包括POST和GET两种方式 true 选填
async boolean 是否为异步请求，true为异步的，false为同步的 true 选填
data json 发送的参数，格式为对象(json)类型 null 选填
success function 请求成功回调函数 function () { } 必填
fail function 请求失败回调函数 function () { } 必填

Ajax优点
1.无刷新更新数据。
AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。

2.异步与服务器通信。
AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。

3.前端和后端负载平衡。
AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。

4.基于标准被广泛支持。
AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。

5.界面与应用分离。
Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

Ajax缺点
1.AJAX干掉了Back和History功能，即对浏览器机制的破坏。
在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现

2.AJAX的安全问题
JAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等

3.对搜索引擎支持较弱。
对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。

4.破坏程序的异常处理机制。
至少从目前看来，像Ajax.dll，Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制的。关于这个问题，曾在开发过程中遇到过，但是查了一下网上几乎没有相关的介绍。后来做了一次试验，分别采用Ajax和传统的form提交的模式来删除一条数据……给我们的调试带来了很大的困难

5.AJAX不能很好支持移动设备。
一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax，比如说我们在手机的浏览器上打开采用Ajax技术的网站时，它目前是不支持的。

Ajax适用场景
表单驱动的交互
深层次的树的导航
快速的用户与用户间的交流响应
类似投票、yes/no等无关痛痒的场景
对数据进行过滤和操纵相关数据的场景
普通的文本输入提示和自动完成的场景
Ajax不适用场景
部分简单的表单
搜索
基本的导航
替换大量的文本
对呈现的操纵
Ajax常见面试题：
1、Ajax是什么?如何创建一个Ajax？
Ajax并不算是一种新的技术，全称是asychronous javascript and xml，可以说是已有技术的组合，主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，早期的浏览器并不能原生支持ajax，可以使用隐藏帧（iframe）方式变相实现异步效果，后来的浏览器提供了对ajax的原生支持

使用ajax原生方式发送请求主要通过XMLHttpRequest(标准浏览器)、ActiveXObject(IE浏览器)对象实现异步通信效果

基本步骤：

var xhr =null;//创建对象

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

xhr.open(“方式”,”地址”,”标志位”);//初始化请求

xhr.setRequestHeader(“”,””);//设置http头信息

xhr.onreadystatechange =function(){}//指定回调函数

xhr.send();//发送请求

js框架（jQuery/EXTJS等）提供的ajax API对原生的ajax进行了封装，熟悉了基础理论，再学习别的框架就会得心应手，好多都是换汤不换药的内容

2、同步和异步的区别?
同步：阻塞的

张三叫李四去吃饭，李四一直忙得不停，张三一直等着，直到李四忙完两个人一块去吃饭，浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返回数据，浏览器才能显示页面
异步：非阻塞的

张三叫李四去吃饭，李四在忙，张三说了一声然后自己就去吃饭了，李四忙完后自己去吃，浏览器向服务器请求数据，服务器比较忙，浏览器可以自如的干原来的事情（显示页面），服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新
3、如何解决跨域问题?
理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域

出于安全考虑，服务器不允许ajax跨域获取数据，但是可以跨域获取文件内容，所以基于这一点，可以动态创建script标签，使用标签的src属性访问js文件的形式获取js脚本，并且这个js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的主流解决方案

4、页面编码和被请求的资源编码如果不一致如何处理？
对于ajax请求传递的参数，如果是get请求方式，参数如果传递中文，在有些浏览器会乱码，不同的浏览器对参数编码的处理方式不同，所以对于get请求的参数需要使用encodeURIComponent函数对参数进行编码处理，后台开发语言都有相应的解码api。对于post请求不需要进行编码

5、简述ajax的过程。
创建XMLHttpRequest对象,也就是创建一个异步调用对象

创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

设置响应HTTP请求状态变化的函数

发送HTTP请求

获取异步调用返回的数据

使用JavaScript和DOM实现局部刷新

6、阐述一下异步加载JS。
异步加载的方案： 动态插入 script 标签

通过 ajax 去获取 js 代码，然后通过 eval 执行

script 标签上添加 defer 或者 async 属性

创建并插入 iframe，让它异步执行 js

7、请解释一下 JavaScript的同源策略。‘’
同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。所谓同源指的是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。

8、GET和POST的区别，何时使用POST？
GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符，有的浏览器是8000个字符

POST：一般用于修改服务器上的资源，对所发送的信息没有限制

在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

9、ajax是什么?ajax的交互模型?同步和异步的区别?如何解决跨域问题?
通过异步模式，提升了用户体验

优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

10、 Ajax的最大的特点是什么。
Ajax可以实现异步通信效果，实现页面局部刷新，带来更好的用户体验；按需获取数据，节约带宽资源；

11、ajax的缺点
1、ajax不支持浏览器back按钮。

2、安全问题 AJAX暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

12、ajax请求的时候get和post方式的区别
get一般用来进行查询操作，url地址有长度限制，请求的参数都暴露在url地址当中，如果传递中文参数，需要自己进行编码操作，安全性较低。

post请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于http请求体中，数据不会暴漏在url地址中。

13、解释jsonp的原理，以及为什么不是真正的ajax
Jsonp并不是一种数据格式9，而json是一种数据格式，jsonp是用来解决跨域获取数据的一种解决方案，具体是通过动态创建script标签，然后通过标签的src属性获取js文件中的js脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是ajax技术

14、什么是Ajax和JSON，它们的优缺点。
Ajax是全称是asynchronous JavaScript andXML，即异步JavaScript和xml，用于在Web页面中实现异步数据交互，实现页面局部刷新。

优点：可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量，避免用户不断刷新或者跳转页面，提高用户体验

缺点：对搜索引擎不友好；要实现ajax下的前后退功能成本较大；可能造成请求数的增加跨域问题限制；

JSON是一种轻量级的数据交换格式，ECMA的一个子集

优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

15、http常见的状态码有那些？分别代表是什么意思？
200 - 请求成功

301 - 资源（网页等）被永久转移到其它URL

404 - 请求的资源（网页等）不存在

500 - 内部服务器错误

16、一个页面从输入 URL到页面加载显示完成，这个过程中都发生了什么？
分为4个步骤：

当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。

浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。

一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。

此时，Web 服务器提供资源服务，客户端开始下载资源。

17、ajax请求的时候get和post方式的区别
get一般用来进行查询操作，url地址有长度限制，请求的参数都暴露在url地址当中，如果传递中文参数，需要自己进行编码操作，安全性较低。

post请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于http请求体中，数据不会暴漏在url地址中。

18、ajax请求时，如何解释json数据
使用eval() 或者JSON.parse() 鉴于安全性考虑，推荐使用JSON.parse()更靠谱，对数据的安全性更好。

参考文档
JavaScript高级程序设计第三版
AJAX工作原理及其优缺点
Ajax原理以及优缺点
Ajax的工作原理
Ajax系列面试题总结01

参考链接：https://blog.csdn.net/u014672511/article/details/80425808
参考链接：https://blog.csdn.net/yibowanbo/article/details/81013412

 

参考链接：https://blog.csdn.net/yiyueqinghui/article/details/97626649

参考链接：https://blog.csdn.net/weixin_51351637/article/details/126218456