613、自己构建ajax请求后端数据到前端

鉴于国内开发只知调用国外架构，不识其中之味，此节从原理上介绍ajax，让同学们能够自己掌握ajax技术，可以任意构建ajax传参，减少代码量，提高执行速度，增加工作效率，增强学习信心。

教学视频地址：

https://www.ixigua.com/7028722184373666317?id=7098323482861273636&logTag=e967a80c58d724ffe2fa

教学素材下载地址：

http://disk.1473.cn/taobaoteaching

知识点：

第一代web开发与第二代web开发的分水岭

ajax技术简介

ajax技术的重要地位

ajax向后台发送请求

aja获取后台返回值

附加知识点，仅供查阅。

第一代web开发与第二代web开发的分水岭

此处为第一代web开发，前后端合并开发模式，与第二代web开发，前后端分离开发模式的分水岭。

第一代web程序每次操作后台均需刷新页面，流行与2008年之前。

第二代web开发可以做到像本地windows程序一样自由，效果美观大方。流行与2008年之后，不过国内很多中小企业的开发还是参照2008年之前的技术。

操作步骤：

ajax技术简介：ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

ajax技术的重要地位：ajax技术可以让网页编程的效果达到本地程序的效果，可以让用户有更好的体验。可以减轻网络负担，对互联网有深刻的影响。

ajax技术在国内的应用：国内一般采用国外写好的ajax框架获取数据，其开发效率，执行效率较低，本文从原理解析ajax技术，把ajax以更简单的方式呈现给大家。

知识点介绍：

_xmr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"😉;

释义如下：

通过POST方式向服务器发送AJAX请求时要通过设置请求头，主要包含以下三种格式：

1、application/x-www-form-urlencoded ： 窗体数据被编码为名称/值对。这是标准的编码格式。

2、multipart/form-data ： 窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。

3、text/plain ： 窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。

我们需要记住以下两种。

1、请求json数据时使用：application/x-www-form-urlencoded编码类型。

2、通过表单上传文件时使用："multipart/form-data"。

默认为application/x-www-form-urlencoded 。

Get请求

当action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2...），然后把这个字串append到url后面，用?分割，加载这个新的url。

Post请求

当action为post时候，浏览器把form数据封装到http body中，然后发送到server。

如果没有 type=file 的控件，用默认的 application/x-www-form-urlencoded 。

如果有 type=file 的话，就要用 multipart/form-data。浏览器会把整个表单以控件为单位进行分割，并为每个部分加上Content-Disposition(form-data或者file)、Content-Type(默认为text/plain)、name(控件name)等信息，并加上分割符(boundary)。

源码如下：

//自己构建ajax请求后端数据到前端。

var _xmr=new XMLHttpRequest();//创建一个ajax对象

//使用post方式打开请求。

_xmr.open("POST",url);

//必须发送一个HTTP协议的头文件

_xmr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"😉;

//向后端发送请求

_xmr.send();

//服务器返回的内容在此函数中

_xmr.onreadystatechange=function(){

//如果服务器返回状态为200，标识成功

if(this.readyState==4 && this.status==200){

//服务器返回的数据在此

alert(this.responseText);

//把服务器返回的字符串转换为json

var _json=eval(this.responseText);

//输出结果

alert(_json);

}

}

附加知识点，仅供查阅。

readyState的五种状态

0 (未初始化)对象已建立，但是尚未初始化，尚未调用open方法

1 (初始化)对象已建立，尚未调用send方法

2 (发送数据) send方法已调用，但是当前的状态及http头未知

3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据

status为HTTP状态码

HTTP状态码

Web服务器响应浏览器或其他客户程序的请求时，其应答一般由以下几个部分组成：一个状态行，几个应答头，一个空行，内容文档。下面是一个最简单的应答。

状态行包含HTTP版本、状态代码、与状态代码对应的简短说明信息。在大多数情况下，除了Content-Type之外的所有应答头都是可选的。但Content-Type是必需的，它描述的是后面文档的MIME类型。虽然大多数应答都包含一个文档，但也有一些不包含，例如对HEAD请求的应答永远不会附带文档。有许多状态代码实际上用来标识一次失败的请求，这些应答也不包含文档（或只包含一个简短的错误信息说明）。

当用户试图通过 HTTP 访问一台正在运行 Internet 信息服务 (IIS) 的服务器上的内容时，IIS 返回一个表示该请求的状态的数字代码。状态代码可以指明具体请求是否已成功，还可以揭示请求失败的确切原因。

1xx - 信息提示

这些状态代码表示临时的响应。客户端在收到常规响应之前，应准备接收一个或多个 1xx 响应。

· 100 - Continue 初始的请求已经接受，客户应当继续发送请求的其余部分。（HTTP 1.1新）

· 101 - Switching Protocols 服务器将遵从客户的请求转换到另外一种协议（HTTP 1.1新）

2xx - 成功

这类状态代码表明服务器成功地接受了客户端请求。

· 200 - OK 一切正常，对GET和POST请求的应答文档跟在后面。

· 201 - Created 服务器已经创建了文档，Location头给出了它的URL。

· 202 - Accepted 已经接受请求，但处理尚未完成。

· 203 - Non-Authoritative Information 文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝，非权威性信息（HTTP 1.1新）。

· 204 - No Content 没有新文档，浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。

· 205 - Reset Content 没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容（HTTP 1.1新）。

· 206 - Partial Content 客户发送了一个带有Range头的GET请求，服务器完成了它（HTTP 1.1新）。

3xx - 重定向

客户端浏览器必须采取更多操作来实现请求。例如，浏览器可能不得不请求服务器上的不同的页面，或通过代理服务器重复该请求。

· 300 - Multiple Choices 客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在Location应答头指明。

· 301 - Moved Permanently 客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。

· 302 - Found 类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。注意，在HTTP1.0中对应的状态信息是“Moved Temporatily”。出现该状态代码时，浏览器能够自动访问新的URL，因此它是一个很有用的状态代码。注意这个状态代码有时候可以和301替换使用。例如，如果浏览器错误地请求http://host/~user （缺少了后面的斜杠），有的服务器返回301，有的则返回302。严格地说，我们只能假定只有当原来的请求是GET时浏览器才会自动重定向。请参见307。

· 303 - See Other 类似于301/302，不同之处在于，如果原来的请求是POST，Location头指定的重定向目标文档应该通过GET提取（HTTP 1.1新）。

· 304 - Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。

· 305 - Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取（HTTP 1.1新）。

· 307 - Temporary Redirect 和302（Found）相同。许多浏览器会错误地响应302应答进行重定向，即使原来的请求是POST，即使它实际上只能在POST请求的应答是303时才能重定向。由于这个原因，HTTP 1.1新增了307，以便更加清除地区分几个状态代码：当出现303应答时，浏览器可以跟随重定向的GET和POST请求；如果是307应答，则浏览器只能跟随对GET请求的重定向。（HTTP 1.1新）

4xx - 客户端错误

发生错误，客户端似乎有问题。例如，客户端请求不存在的页面，客户端未提供有效的身份验证信息。

· 400 - Bad Request 请求出现语法错误。

· 401 - Unauthorized 访问被拒绝，客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头，浏览器据此显示用户名字/密码对话框，然后在填写合适的Authorization头后再次发出请求。IIS 定义了许多不同的 401 错误，它们指明更为具体的错误原因。这些具体的错误代码在浏览器中显示，但不在 IIS 日志中显示：

　· 401.1 - 登录失败。

　· 401.2 - 服务器配置导致登录失败。

　· 401.3 - 由于 ACL 对资源的限制而未获得授权。

　· 401.4 - 筛选器授权失败。

　· 401.5 - ISAPI/CGI 应用程序授权失败。

　· 401.7 – 访问被 Web 服务器上的 URL 授权策略拒绝。这个错误代码为 IIS 6.0 所专用。

· 403 - Forbidden 资源不可用。服务器理解客户的请求，但拒绝处理它。通常由于服务器上文件或目录的权限设置导致。禁止访问：IIS 定义了许多不同的 403 错误，它们指明更为具体的错误原因：

　· 403.1 - 执行访问被禁止。

　· 403.2 - 读访问被禁止。

　· 403.3 - 写访问被禁止。

　· 403.4 - 要求 SSL。

　· 403.5 - 要求 SSL 128。

　· 403.6 - IP 地址被拒绝。

　· 403.7 - 要求客户端证书。

　· 403.8 - 站点访问被拒绝。

　· 403.9 - 用户数过多。

　· 403.10 - 配置无效。

　· 403.11 - 密码更改。

　· 403.12 - 拒绝访问映射表。

　· 403.13 - 客户端证书被吊销。

　· 403.14 - 拒绝目录列表。

　· 403.15 - 超出客户端访问许可。

　· 403.16 - 客户端证书不受信任或无效。

　· 403.17 - 客户端证书已过期或尚未生效。

　· 403.18 - 在当前的应用程序池中不能执行所请求的 URL。这个错误代码为 IIS 6.0 所专用。

　· 403.19 - 不能为这个应用程序池中的客户端执行 CGI。这个错误代码为 IIS 6.0 所专用。

　· 403.20 - Passport 登录失败。这个错误代码为 IIS 6.0 所专用。

· 404 - Not Found 无法找到指定位置的资源。这也是一个常用的应答。

　· 404.0 -（无） – 没有找到文件或目录。

　· 404.1 - 无法在所请求的端口上访问 Web 站点。

　· 404.2 - Web 服务扩展锁定策略阻止本请求。

　· 404.3 - MIME 映射策略阻止本请求。

· 405 - Method Not Allowed 请求方法（GET、POST、HEAD、DELETE、PUT、TRACE等）对指定的资源不适用，用来访问本页面的 HTTP 谓词不被允许（方法不被允许）（HTTP 1.1新）

· 406 - Not Acceptable 指定的资源已经找到，但它的MIME类型和客户在Accpet头中所指定的不兼容，客户端浏览器不接受所请求页面的 MIME 类型（HTTP 1.1新）。

· 407 - Proxy Authentication Required 要求进行代理身份验证，类似于401，表示客户必须先经过代理服务器的授权。（HTTP 1.1新）

· 408 - Request Timeout 在服务器许可的等待时间内，客户一直没有发出任何请求。客户可以在以后重复同一请求。（HTTP 1.1新）

· 409 - Conflict 通常和PUT请求有关。由于请求和资源的当前状态相冲突，因此请求不能成功。（HTTP1.1新）

· 410 - Gone 所请求的文档已经不再可用，而且服务器不知道应该重定向到哪一个地址。它和404的不同在于，返回407表示文档永久地离开了指定的位置，而404表示由于未知的原因文档不可用。（HTTP 1.1新）

· 411 - Length Required 服务器不能处理请求，除非客户发送一个Content-Length头。（HTTP 1.1新）

· 412 - Precondition Failed 请求头中指定的一些前提条件失败（HTTP 1.1新）。

· 413 – Request Entity Too Large 目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求，则应该提供一个Retry-After头（HTTP 1.1新）。

· 414 - Request URI Too Long URI太长（HTTP 1.1新）。

· 415 – 不支持的媒体类型。

· 416 – Requested Range Not Satisfiable 服务器不能满足客户在请求中指定的Range头。（HTTP 1.1新）

· 417 – 执行失败。

· 423 – 锁定的错误。

5xx - 服务器错误

服务器由于遇到错误而不能完成该请求。

· 500 - Internal Server Error 服务器遇到了意料不到的情况，不能完成客户的请求。

　· 500.12 - 应用程序正忙于在 Web 服务器上重新启动。

　· 500.13 - Web 服务器太忙。

　· 500.15 - 不允许直接请求 Global.asa。

　· 500.16 – UNC 授权凭据不正确。这个错误代码为 IIS 6.0 所专用。

　· 500.18 – URL 授权存储不能打开。这个错误代码为 IIS 6.0 所专用。

　· 500.100 - 内部 ASP 错误。

· 501 - Not Implemented 服务器不支持实现请求所需要的功能，页眉值指定了未实现的配置。例如，客

户发出了一个服务器不支持的PUT请求。

· 502 - Bad Gateway 服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答。 亦说Web 服务器用作网关或代理服务器时收到了无效响应。

　· 502.1 - CGI 应用程序超时。

　· 502.2 - CGI 应用程序出错。

· 503 - Service Unavailable 服务不可用，服务器由于维护或者负载过重未能应答。例如，Servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个Retry-After头。这个错误代码为IIS 6.0 所专用。

· 504 - Gateway Timeout 网关超时，由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答。（HTTP 1.1新） 。

· 505 - HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本。（HTTP 1.1新）。