资讯专栏INFORMATION COLUMN

Ajax

LuDongWei / 2103人阅读

摘要:二技术的核心技术的核心是对象简称,使得浏览器可以发出请求与接收响应。伴随状态码的字符串信息。第二部分请求头部,第二行至第六行。第四部分请求数据,第八行。例子第一部分状态行,由协议版本号,状态码,状态消息三部分组成。

一、什么是Ajax

Ajax的全称是Asynchronous JavaScript and XML,即异步JavaScript+XML。

二、Ajax技术的核心

Ajax技术的核心是XMLHttpRequest对象(简称XHR),使得浏览器可以发出HTTP请求与接收HTTP响应。
XMLHttpRequest对象的主要属性有:
onreadystatechange——每次状态改变所触发事件的事件处理程序。
responseText——从服务器进程返回数据的字符串形式。
responseXML——从服务器进程返回的DOM兼容的文档数据对象。
status——从服务器返回的数字代码,如404(未找到)和200(已就绪)。
status Text——伴随状态码的字符串信息。
readyState——对象状态值。

三、XHR 用法

创建Ajax核心对象XMLHttpRequest(记得考虑兼容性)

向服务器发送请求


注意:POST请求一定要设置请求头的格式内容


对于open方法,有几点需要注意:

URL是相对于当前页面的路径,也可以似乎用绝对路径。

open方法不会向服务器发送真正请求,它相当于初始化请求并准备发送。

只能向同一个域中使用相同协议和端口的URL发送请求,否则会因为安全原因报错。
真正能够向服务器发送请求需要调用send方法,并仅在POST请求可以传入参数,不需要则发送null,在调用send方法之后请求被发往服务器。

请求发往服务器,服务器根据请求生成响应(Response),传回给XHR对象,在收到响应后相应数据会填充到XHR对象的属性,有四个相关属性会被填充:

responseText——从服务器进程返回数据的字符串形式。

responseXML——从服务器进程返回的DOM兼容的文档数据对象。

status——从服务器返回的数字代码,如404(未找到)和200(已就绪)。

status Text——伴随状态码的字符串信息。

Http状态码:
1xx:指示信息--表示请求已接收,继续处理 2xx:成功--表示请求已被成功接收、理解、接受
3xx:重定向--要完成请求必须进行更进一步的操作 4xx:客户端错误--请求有语法错误或请求无法实现
5xx:服务器端错误--服务器未能实现合法的请求
常见状态码:

200 OK                     //客户端请求成功 
400 Bad Request      //客户端请求有语法错误,不能被服务器所理解 
401 Unauthorized    //请求未经授权,这个状态代码必须和WWW-Authenticate报头域一起使用 
403 Forbidden         //服务器收到请求,但是拒绝提供服务 
404 Not Found        //请求资源不存在,eg:输入了错误的URL 
500 Internal Server Error     //服务器发生不可预期的错误 
503 Server Unavailable       //服务器当前不能处理客户端的请求,一段时间后可能恢复正常

readyState——对象状态值。对象状态值有以下几个:

0 - (未初始化)还没有调用send()方法

1 - (载入)已调用send()方法,正在发送请求

2 - (载入完成)send()方法执行完成

3 - (交互)正在解析响应内容

4 - (完成)响应内容解析完成,可以在客户端调用了

在异步请求时,我们可以检查XHR对象的readyState属性,该属性表示请求/响应过程中的当前活动阶段,每当readyState值改变的时候都会触发一次onreadystatechange事件。
我们可以利用这个事件检查每次readyState变化的值,当为4的时候表示所有数据准备就绪。
有一点我们需要注意:必须在open方法之前指定onreadtstatechange事件处理程序。

四、GET还是POST?

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:

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

向服务器发送大量数据(POST 没有数据量限制)

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

五、HTTP请求

HTTP之请求消息Request
客户端发送一个HTTP请求到服务器的请求消息包括以下格式:
请求行(request line)、请求头部(header)、空行和请求数据四个部分组成。

POST请求例子

POST / HTTP1.1 
Host: www.wrox.com 
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022) 
Content-Type: application/x-www-form-urlencoded 
Content-Length: 40 
Connection: Keep-Alive 

name=Professional%20Ajax&publisher=Wiley

第一部分:请求行,第一行明了是post请求,以及http1.1版本。
第二部分:请求头部,第二行至第六行。
第三部分:空行,第七行的空行。第四部分:请求数据,第八行。

HTTP之响应消息Response
一般情况下,服务器接收并处理客户端发过来的请求后会返回一个HTTP的响应消息。
HTTP响应也由四个部分组成,分别是:状态行、消息报头、空行和响应正文。

例子

HTTP/1.1 200 OK Date: Fri, 22 May 2009 06:07:21 GMT Content-Type: text/html; charset=UTF-8 

 
     
     
         
     

第一部分:状态行,由HTTP协议版本号, 状态码, 状态消息 三部分组成。
第一行为状态行,(HTTP/1.1)表明HTTP版本为1.1版本,状态码为200,状态消息为(ok)
第二部分:消息报头,用来说明客户端要使用的一些附加信息
第二行和第三行为消息报头,Date:生成响应的日期和时间;Content-Type:指定了MIME类型的HTML(text/html),编码类型是UTF-8
第三部分:空行,消息报头后面的空行是必须的
第四部分:响应正文,服务器返回给客户端的文本信息。
空行后面的html部分为响应正文。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102444.html

相关文章

  • ajax与jsonp一点基础整理

    摘要:之所以不能跨域其实是因为受到同源策略的限制,只能让它访问同源下的数据,不能访问不同源下的数据同源策略每个网站只能读取同一来源的数据,这里的同一来源指的是主机名域名协议和端口号的组合。 一、Ajax的概念 Ajax是一种技术方案,但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript,而其中最核心的依赖是浏览器提供的XMLHttpRequest对象,是这个对象使得浏...

    tomlingtm 评论0 收藏0
  • 深入浅出Ajax

    摘要:在接收响应期间持续不断地触发。在请求发生错误时触发。在通信完成或者触发或事件后触发。已经接收到部分响应数据。基于标准被广泛支持。破坏程序的异常处理机制。 原文(我的GitHub):https://github.com/liangfengbo/frontend-ability/issues/1 学习大纲 理解Ajax的工作原理 Ajax核心-XMLHttpRequest对象 封装Aja...

    megatron 评论0 收藏0
  • 再也不学AJAX了!(一)AJAX概述

    摘要:需要注意的是,并不是的替代品,两者各自有其适应的场景。但为了方便交流,我们通常将获取资源的一方称为客户端主要的工具是浏览器,而将派发资源的一方称为服务端又称为服务器。它可以帮助我们为之后概念细节的学习打下良好基础。 再也不学AJAX了是一个与AJAX主题相关的文章系列,包含以下三个部分的内容: AJAX概述:主要回答AJAX是什么这个问题; 使用AJAX:介绍如何通过JavaSc...

    neu 评论0 收藏0
  • ajax入门

    摘要:基于标准被广泛支持。这样的类最初是在中作为一个名为的对象引入的。请求还没有被发送。当为,这个属性返回目前已经接收的响应部分。由服务器返回的状态代码,如表示成功,而表示错误。方法取消当前响应,关闭连接并且结束任何未决的网络活动。 前言 总括: 本文讲解了ajax的历史,工作原理以及优缺点,对XMLHttpRequest对象进行了详细的讲解,并使用原生js实现了一个ajax对象以方便日常开...

    Fundebug 评论0 收藏0
  • Web前端-Ajax基础技术(下)

    摘要:前端基础技术下你要明白是什么,怎么使用,程序是将信息放入公共的服务器,让所有网络用户可以通过浏览器进行访问。获取字符串形式的响应数据,获取形式的响应数据。基础回顾原理是借助标签发送跨域请求的技巧。 Web前端-Ajax基础技术(下) 你要明白ajax是什么,怎么使用? ajax,web程序是将信息放入公共的服务器,让所有网络用户可以通过浏览器进行访问。 浏览器发送请求,获取服务器的数据:...

    赵连江 评论0 收藏0
  • AJAX-Cache:一款好用的Ajax缓存插件

    摘要:是一款缓存插件,可以为方法扩展缓存功能。缓存清理插件本身会自动清理过期缓存对于不想继续使用缓存的接口可以为方法传入清理当前接口的缓存并返回最新数据也可以调用清理所有插件产生的缓存。 原文链接 AJAX-Cache是什么 Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用缓存提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件...

    didikee 评论0 收藏0

发表评论

0条评论

LuDongWei

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<