您的位置:首页 > 数码常识数码常识

ajax请求前后端代码完整(向后端发起ajax请求实例)

2025-05-102人已围观

ajax请求前后端代码完整(向后端发起ajax请求实例)
  613、自己构建ajax请求后端数据到前端鉴于国内开发只知调用国外架构,不识其中之味,此节从原理上介绍ajax,让同学们能够自己掌握ajax技术,可以任意构建ajax传参,减少代码量,提高执行速度,增加工作效率,增强学习信心。

  向后端发起ajax请求实例613、自己构建ajax请求后端数据到前端

  教学视频地址:

  https:///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新)。

  上面就是小居数码小编今天给大家介绍的关于(向后端发起ajax请求实例)的全部内容,希望可以帮助到你,想了解更多关于数码知识的问题,欢迎关注我们,并收藏,转发,分享。

  94%的朋友还想知道的:

  excel中if函数的使用方法函数怎么用(if函数的使用方法及实例教程)

  华为mstp+vrrp(华为vrrp和mstp配置实例)

  小程序项目附前后端源码(充电桩小程序代码)

  步骤方法分享(如何在lepus里面添加数据库监控实例)



  154816
 

很赞哦! (0)

随机图文