AJax技术

[置顶] 从零开始学习WEB前端之数据交互(Ajax)

字号+ 作者:H5之家 来源:H5之家 2017-06-19 13:03 我要评论( )

所谓的数据交互其实就是前端与服务端之间的数据传递。 比如我们注册用户。在点击注册按钮的时候,实际上是浏览器通过http请求把我们输入的用户名,密码之类的数据传递给服务器,服务器接收到数据后存到数据库并返回给我们一些信息,我们根据返回的信息做下一

所谓的数据交互其实就是前端与服务端之间的数据传递。
比如我们注册用户。在点击注册按钮的时候,实际上是浏览器通过http请求把我们输入的用户名,密码之类的数据传递给服务器,服务器接收到数据后存到数据库并返回给我们一些信息,我们根据返回的信息做下一步的处理。

服务器

服务器也就是我们常说的服务端(后端),顾名思义是提供某种服务的。
服务器的类型有很多
比如:文件服务器、数据库服务器、邮件服务器、Web 服务器等。
而我们最常打交道就是web服务器
web 服务器:Apache、Nginx、IIS、Tomcat、NodeJS等;
服务端开发的语言有:java,php,.net等等
对于服务端我们了解即可。不管用什么语言开发,最终返回给我们的都是html、css、js等数据。

HTTP协议

超文本传输协议。是用于从WWW服务器传输超文本到本地浏览器的传输协议议
组成:
从客户端发送的http请求(request)
从服务端返回的响应(response)

HTTP是无连接:无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。

HTTP是媒体独立的:这意味着,只要客户端和服务器知道如何处理的数据内容,任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型。

HTTP是无状态:HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大。另一方面,在服务器不需要先前信息时它的应答就较快。

http请求(request)
主要有三个组成部分:请求行,请求头,请求主体

请求行
– 请求方法
– 请求地址(url)
– 协议版本

请求方法(所有方法全为大写)有多种:
GET 请求获取Request-URI所标识的资源(常用)
POST 在Request-URI所标识的资源后附加新的数据(常用)
HEAD 请求获取由Request-URI所标识的资源的响应消息报头
PUT 请求服务器存储一个资源,并用Request-URI作为其标识
DELETE 请求服务器删除Request-URI所标识的资源
TRACE 请求服务器回送收到的请求信息,主要用于测试或诊断
CONNECT 保留将来使用
OPTIONS 请求查询服务器的性能,或者查询与资源相关的选项和需求

请求头
http是个无状态的协议,所以,需要在请求头和响应头中包括自身的一些信息和想要执行的动作,这样,对方在收到信息后,就可以知道你是谁,你想干什么。

User-Agent:浏览器的具体类型  如:User-Agent:Mozilla/5.0 (Windows NT 6.1; rv:17.0) Gecko/20100101 Firefox/17.0 Accept:浏览器支持哪些数据类型  如:Accept: text/html,application/xhtml; AcceptAccept-Encoding:浏览器支持解码的数据压缩格式  如:Accept-Encoding: gzip, deflate Accept,en;q=0.3 Host:请求的主机名,允许多个域名同处一个IP地址,即虚拟主机。Host:www.baidu.com Connection:表示是否需要持久连接。Keep-Alive/close,HTTP1.1默认是持久连接,它可以利用持久连接的优点,当页面包含多个元素时(例如Applet,图片),显著地减少下载所需要的时间。要实现这一点,Servlet需要在应答中发送一个Content-Length头,最简单的实现方法是:先把内容写入ByteArrayOutputStream,然后在正式写出内容之前计算它的大小。如:Connection: Keep-Alive Content-Length:表示请求消息正文的长度。对于POST请求来说Content-Length必须出现。 Content-Type:WEB服务器告诉浏览器自己响应的对象的类型和字符集。例如:Content-Type: text/html; charset='gb2312' Content-Encoding:WEB服务器表明自己使用了什么压缩方法(gzip,deflate)压缩响应中的对象。例如:Content-Encoding:gzip Content-Language:WEB服务器告诉浏览器自己响应的对象的语言。 Cookie:最常用的请求头,浏览器每次都会将cookie发送到服务器上,允许服务器在客户端存储少量数据。 Unauthorized Not Found Server Unavailable //服务器当前不能处理客户端的请求,一段时间后可能恢复正常

响应头

Allow 服务器支持哪些请求方法(如GET、POST等)。 Content-Encoding 文档的编码(Encode)方法。只有在解码之后才可以得到Content-Type头指定的内容类型。利用gzip压缩文档能够显著地减少HTML文档的下载时间。Java的GZIPOutputStream可以很方便地进行gzip压缩,但只有Unix上的Netscape和Windows上的IE 4、IE 5才支持它。因此,Servlet应该通过查看Accept-Encoding头(即request.getHeader("Accept-Encoding"))检查浏览器是否支持gzip,为支持gzip的浏览器返回经gzip压缩的HTML页面,为其他浏览器返回普通页面。 Content-Length 表示内容长度。只有当浏览器使用持久HTTP连接时才需要这个数据。如果你想要利用持久连接的优势,可以把输出文档写入 ByteArrayOutputStream,完成后查看其大小,然后把该值放入Content-Length头,最后通过byteArrayStream.writeTo(response.getOutputStream()发送内容。 Content-Type 表示后面的文档属于什么MIME类型。Servlet默认为text/plain,但通常需要显式地指定为text/html。由于经常要设置Content-Type,因此HttpServletResponse提供了一个专用的方法setContentType。 Date 当前的GMT时间。你可以用setDateHeader来设置这个头以避免转换时间格式的麻烦。 Expires 应该在什么时候认为文档已经过期,从而不再缓存它? Last-Modified 文档的最后改动时间。客户可以通过请求头提供一个日期,该请求将被视为一个条件GET,只有改动时间迟于指定时间的文档才会返回,否则返回一个304Not Modified)状态。Last-Modified也可用setDateHeader方法来设置。 Location 表示客户应当到哪里去提取文档。Location通常不是直接设置的,而是通过HttpServletResponse的sendRedirect方法,该方法同时设置状态代码为302。 Refresh 表示浏览器应该在多少时间之后刷新文档,以秒计。除了刷新当前文档之外,你还可以通过setHeader("Refresh", "5; URL=http://host/path")让浏览器读取指定的页面。 注意这种功能通常是通过设置HTML页面HEAD区的<META HTTPCONTENT="5;URL=http://host/path">实现,这是因为,自动刷新或重定向对于那些不能使用CGI或Servlet的HTML编写者十分重要。但是,对于Servlet来说,直接设置Refresh头更加方便。 注意Refresh的意义是>。 注意Refresh头不属于HTTP 1.1正式规范的一部分,而是一个扩展,但Netscape和IE都支持它。 Server 服务器名字。Servlet一般不设置这个值,而是由Web服务器自己设置。 Set-Cookie 设置和页面关联的Cookie。Servlet不应使用response.setHeader("Set-Cookie", ...),而是应使用HttpServletResponse提供的专用方法addCookie。参见下文有关Cookie设置的讨论。 WWW-Authenticate 客户应该在Authorization头中提供什么类型的授权信息?在包含401(Unauthorized)状态行的应答中这个头是必需的。例如,response.setHeader("WWW-Authenticate", "BASIC realm=\"executives\"")。 注意Servlet一般不进行这方面的处理,而是让Web服务器的专门机制来控制受密码保护页面的访问(例如> >> ="post"> user:="user" value="" /> pwd:==> </body> </html>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Ajax式富客户端在学习管理系统的应用研究

    Ajax式富客户端在学习管理系统的应用研究

    2017-06-19 13:04

  • 《Ext JS 3.2 学习指南》(Learning Ext JS 3.2)英文文字版/更新源代码[PDF]

    《Ext JS 3.2 学习指南》(Learning Ext JS 3.2)英文文字版/更新源代

    2017-06-18 16:04

  • Vue.js学习系列

    Vue.js学习系列

    2017-06-18 12:01

  • 前端学习1——Bootstrap jquery ajax

    前端学习1——Bootstrap jquery ajax

    2017-06-17 16:06

网友点评