Ajax

1.什么是Ajax: 不用刷新整个页面便可与服务器通讯的办法

2.Ajax的基本使用

2.1XMLHttpRequest

XMLHttpRequest对象
  XMLHttpRequest是XMLHTTP组件的对象,通过这个对象,AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换,而不用每次都刷新界面,也不用每次将数据处理的工作都交给服务器来做;这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。

2.2方法的使用

l 利用XMLHttpRequest 实例与服务器进行通信包含以下3个关键部分:

l onreadystatechange 事件处理函数

l open 方法

l send 方法

2.2.1Open方法

l 发送请求--方法和属性介绍

l open(method, url, asynch)

l XMLHttpRequest 对象的 open 方法允许程序员用一个Ajax调用向服务器发送请求

l method:请求类型,类似 “GET”或”POST”的字符串。若只想从服务器检索一个文件,而不需要发送任何数据,使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据,不过数据大小限制为2000个字符)。若需要向服务器发送数据,用POST。

l 在某些情况下,有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不同,这就会带来不好的结果。把当前时间戳追加到URL的最后,就能确保URL的惟一性,从而避免浏览器缓存结果。

l url:路径字符串,指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。

l asynch:表示请求是否要异步传输,默认值为true(异步)。指定true,在读取后面的脚本之前,不需要等待服务器的相应。指定false,当脚本处理过程经过这点时,会停下来,一直等到Ajax请求执行完毕再继续执行。

2.2.2Send方法

l 发送请求--方法和属性介绍

l send(data):

l open 方法定义了 Ajax 请求的一些细节。send 方法可为已经待命的请求发送指令

l data:将要传递给服务器的字符串。

若选用的是 GET 请求,则不会发送任何数据, 给 send 方法传递 null 即可:request.send(null);

l 当向send()方法提供参数时,要确保open()中指定的方法是POST,如果没有数据作为请求体的一部分发送,则使用null.

完整的 Ajax GET 请求示例:

2.2.3onreadystatechange

l onreadystatechange:

l 该事件处理函数由服务器触发,而不是用户

l 在 Ajax 执行过程中,服务器会通知客户端当前的通信状态。这依靠更新 XMLHttpRequest 对象的 readyState 来实现。改变 readyState 属性是服务器对客户端连接操作的一种方式。每次 readyState 属性的改变都会触发 readystatechange事件

Ajax请求对象的状态码readyState 和 服务器返回的状态码status

readyState

l readyState 属性表示Ajax请求的当前状态。它的值用数字代表。

l 0 代表未初始化。 还没有调用 open 方法

l 1 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用

l 2 代表已加载完毕。send 已被调用。请求已经开始

l 3 代表交互中。服务器正在发送响应

4 代表完成。响应发送完毕

每次 readyState 值的改变,都会触发 readystatechange 事件。如果把 onreadystatechange 事件处理函数赋给一个函数,那么每次 readyState 值的改变都会引发该函数的执行。

l readyState 值的变化会因浏览器的不同而有所差异。但是,当请求结束的时候,每个浏览器都会把 readyState 的值统一设为 4

status

l 服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息,并且属于超文本传输协议中的一部分。

l 常用状态码及其含义:

l 404 没找到页面(not found)

l 403 禁止访问(forbidden)

l 500 内部服务器出错(internal service error)

l 200 一切正常(ok)

l 304 没有被修改(not modified)(服务器返回304状态,表示源文件没有被修改 )

XMLHttpRequest 对象中,服务器发送的状态码都保存在 status 属性里。通过把这个值和 200 304 比较,可以确保服务器是否已发送了一个成功的响应

2.3返回数据

responseText

l XMLHttpRequest 的 responseText 属性包含了从服务器发送的数据。它是一个HTML,XML或普通文本,这取决于服务器发送的内容。

l 当 readyState 属性值变成 4 时, responseText 属性才可用,表明 Ajax 请求已经结束。

responseXML

l 如果服务器返回的是 XML, 那么数据将储存在 responseXML 属性中。

l 只用服务器发送了带有正确首部信息的数据时, responseXML 属性才是可用的。 MIME 类型必须为 text/xml

Ajax基础(小猫)的更多相关文章

  1. 史上最全的Ajax基础详解

    同步请求和异步请求 先解释一下同步和异步的概念: 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯 ...

  2. 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】

    一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...

  3. Ajax基础知识《一》

    对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到.Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当 ...

  4. Ajax基础2

    什么是服务器 网页浏览过程的分析 如何配置自己的服务器程序(AMP) 什么是Ajax 无刷新数据读取 异步,同步 Ajax基础(2) 使用Ajax 基础请求显示txt的文件 字符集编码 缓存,阻止缓存 ...

  5. ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列

    AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.   ...

  6. Ajax基础--JavaScript实现

    ajax原理 1.ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. 通俗地讲就是:AJAX 通过在后台与 ...

  7. jQuery基础---Ajax基础教程(二)

    jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一篇中, ...

  8. jQuery基础---Ajax基础教程

    jQuery基础---Ajax基础 内容提纲: 1.Ajax 概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax ...

  9. Ajax基础知识(二)

    接上一篇  Ajax基础知识(一) 在上一篇博客里,抛弃了VS中新建aspx页面,拖个button写上C#代码的方式.使用ajax的方式,异步向服务器请求数据.我们让服务器只简单的返回一个" ...

  10. 原生AJAX基础讲解及兼容处理

    原文:原生AJAX基础讲解及兼容处理 AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML). AJAX不是新技术 ,但却是热门的技术.它 ...

随机推荐

  1. PHP中常见的提示对照表

    .Notice: Undefined variable: 变量名 in 注:使用了一个没有被定义的变量 .Parse error: syntax error, unexpected T_ELSE in ...

  2. 人工智能 启发式算法(A,A*)

    启发式算法区别于盲目搜索算法,是搜索策略的一种.主要特点是 可以利用问题自身的一些特征信息(启发式信息)来指导搜索的过程,从而可以缩小搜索范围,提高搜索效率. 实际上,启发式算法也代表了"大 ...

  3. [恶趣味]搞了下局域网内的arp网络欺骗

    挺无聊的. 扫描,伪装,抓包. 基本上搞完就失去乐趣了. 文章在这里,想搞的可以自己拿去搞下,其实很无聊,我真是个很容易无聊的人啊.

  4. 自动化运维 Expect

      Mac 下载:brew install homebrew/dupes/expect expect : ->  自动化脚本工具:  用于处理交互命令; #注意 调用时并不是使用的 /bin/b ...

  5. Sublime Text 3 常用插件以及安装方法(转)

    http://www.cnsecer.com/460.html 安装Sublime Text 3插件的方法: 朋友们,小站活着不容易,全靠广告费养着了,如果本文对你有帮助.麻烦动下手点下页面的广告吧, ...

  6. 正确解读free -m

    如下显示free是显示的当前内存的使用,-m的意思是M字节来显示内容.我们来一起看看. $ free -m total used free shared buffers cachedMem: 1002 ...

  7. tcpdump抓取HTTP包

    tcpdump抓取HTTP包 tcpdump -XvvennSs 0 -i eth0 tcp[20:2]=0x4745 or tcp[20:2]=0x4854 0x4745为"GET&quo ...

  8. php内置的数据结构函数使用小事例

    1.栈数据结构 $stack = new splstack(); $stack->push("data1"); $stack->push("data2&quo ...

  9. python os.walk()

    os.walk()返回三个参数:os.walk(dirpath,dirnames,filenames) for dirpath,dirnames,filenames in os.walk(): 返回d ...

  10. 【Java EE 学习 83 上】【SpringMVC】【基本使用方法】

    一.SpringMVC框架概述 什么是SpringMVC?SpringMVC是一个和Struts2差不多的东西,他们的作用和性质几乎是相同的,甚至开发效率上也差不多,但是在运行效率上SpringMVC ...