Ajax

栏目: jQuery · 发布时间: 6年前

内容简介:Ajax

Ajax全称为“Asynchronous Javascript and XML”(异步javascript和XML),它并不是指一种单一的技术,而是有机地利用了一系列交互式网页相关的技术所形成的结合体,它的出现结束了“单击,等待”的传统交互模式,开启了无刷新更新页面的新时代。

Ajax的优点

  1. 不需要插件支持
    ajax不需要任何浏览器插件,就可以被绝大多数的主流浏览器所支持,用户只需要允许javascript在浏览器上执行即可。
  2. 优秀的用户体验
    这是ajax技术的最大优点,能在不刷新整个页面的前提下更新数据,这使得web应用程序能更为迅速地回应用户的操作。
  3. 提高web程序的性能
    与传统模式相比,ajax模式在性能上的最大区别就在于传输数据的方式,在传统模式中,数据是通过提交表单来实现的,而数据获取是靠全页面刷新来重新获取整页的内容。ajax模式只是通过XMLHttpRequest对象向服务器提交希望提交的数据,即按需发送。
  4. 减轻服务器和带宽的负担
    ajax的工作原理相当于在用户和服务器之间加了一个中间层,使用户操作与服务器响应异步化。它在客户端创建ajax引擎,把传统方式下的一些服务器负担的工作转移到客户端,便于客户端资源来处理,减轻服务器和带宽的负担。

Ajax的缺点

  1. 破坏浏览器 “后退”按钮的正常功能
    在ajax中,“前进”和“后退”按钮的功能都会失效。用户经常会遇到这情况,当单击一个按钮触发一个ajax交互后,如果点击“后退”按钮,浏览器会直接后退到前一个页面,而不是仅仅是回退到ajax交互操作前。
  2. 需要处理浏览器兼容性问题

创建XMLHttpRequest对象

XMLHttpRequest对象简称XHR对象,它是ajax技术的核心,发送异步请求、接收响应及执行回调都是通过它来完成的。ie7+、firefox、opera、chrome和safari都支持原生的XHR对象,在这些现代浏览器中这样创建:

var xhr = new XMLHttpRequest();

在ie5和ie6中,是以ActiveXObject的方式引入XHR对象的:

var xhr=new ActiveXObject("Microsoft.XMLHTTP");

如果你既想支持现代浏览器又不想放弃ie5和ie6,那么你需要做一个逻辑判断:

var xhr
if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}else if (window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}

XMLHttpRequest对象的属性

readyState

该属性表示请求/响应过程中的当前活动阶段。该属性可取的值如下:

  • 0:未初始化。尚未调用open()方法。
  • 1:启动。已经调用open()方法,但尚未调用send()方法。
  • 2:发送。已经调用send()方法,但尚未接收到响应。
  • 3:接收。已经接收到部分响应数据。
  • 4:已经接收到全部响应数据,而且已经可以在客户端使用了。

只要readyState属性的值发生变化,就会触发readystatechange事件,可以利用这个事件来检测每次变化后的readyState的值。通常我们只对readyState值为4的阶段感兴趣,因为这个时候所有的数据都已经就绪。

responseText

作为响应主体被返回的文本。无论内容类型是什么,响应主体的内容都会保存在这里,如果响应包含了为响应体指定字符编码的头部,就使用该编码。否则,假定使用 Unicode UTF-8。如果 readyState 小于 3,这个属性就是一个空字符串。当 readyState 为 3,这个属性返回目前已经接收的响应部分。如果 readyState 为 4,这个属性保存了完整的响应体。

responseXML

如果响应的内容类型是“text/xml”或“application/xml”,这个属性中将保存包含着响应数据的XML DOM文档。对于非XML数据而言,responseXML属性值将为null。

status

响应的http状态。检查status属性可以确定响应是否已成功返回(在readyState>3时才可以读取)。

  • http状态码200是响应成功返回的标志,此时responseText属性的内容已经就绪,而且在内容类型正确的情况下(XML类型),responseXML属性也能够访问了。
  • http状态码304表示请求的资源没有被修改,可以直接使用浏览器中缓存的版本,当然也意味着响应式有效的。
  • http状态码404表示请求错误。
    ······

statusText

http状态的说明。比如在状态码为200时,statusText的值为“OK”。

XMLHttpRequest对象的方法

open()

在使用XHR对象时,要调用的第一个方法是open(),它接受三个参数:

  1. 要发送的请求类型,如“get”“post”等。
  2. 请求要访问的URL。
  3. 选择同步或异步的布尔值。true表执行异步操作,false表示同步。
    • 同步:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求。
    • 异步:客户端发出一个请求后,无需等待服务器响应结束后,就能发出第二个请求。

send()

send方法接收一个参数,将被写入到请求报文里面传递,即要做为请求主体发送的数据。调用send()之后,请求就会被分派到服务器。

  • 如果不需要通过请求主体发送数据,比如请求类型是“get”时,参数是直接写到url里面,则必须传入null,因为这个参数对于某些浏览器来说是必须的。
  • 请求类型是“post”时,请求参数需要写入到send方法里。

abort()

调用这个方法后,XHR对象会停止触发事件,而且也不再允许访问与响应有关的对象属性。

http头部信息

默认情况下,在发送XHR请求的同时,还会发送头部信息,虽然不同的浏览器实际发送的头部信息会有所不同,但是基本上是所有浏览器都会发送的有以下这些:

  • Accept:浏览器能够处理的内容类型。
  • Accept-Charset:浏览器能够显示的字符集。
  • Accept-Encoding:浏览器能够处理的压缩编码。
  • Accept-Language:浏览器当前设置的语言。
  • Connection:浏览器与服务器之间连接的类型。
  • Cookie:当前页面设置的任何Cookie。
  • Host:发出请求的页面所在的域。
  • Referer:发出请求的页面的URI。
  • User-Agent:浏览器用户代理字符串。

getResponseHeader()

这个方法可以设置自定义的请求头部信息,它接收两个参数:

  1. 头部字段的名称
  2. 头部字段的值

要想成功发送请求头部信息,getResponseHeader()方法必须在open()与send()之间调用。

getAllResponseHeaders()

这个方法可以取得一个包含所有头部信息的长字符串。

GET请求

GET是最常见的请求类型,常用于向服务器查询某些信息。使用GET请求时常用到encodeURIComponent()方法。查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码,才能放到URL末尾。完整的函数如下:

functionaddURLParam(url,name,value){
    url+=(url.indexOf("?") == -1 ? "?" : "&");
    url+=encodeURIComponent(name)+"="+encodeURIComponent(value);
    return url;
}

POST请求

POST请求通常用于向服务器发送应该被保存的数据。

虽然大部分情况下都能用更简单、更快的GET请求,但在以下情况中,请使用POST请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

默认情况下,服务器对POST请求和提交表单的请求并不会一视同仁,不过我们可以使用XHR来模仿表单提交。

xhr.open("POST","example.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");   //设置表单提交时的内容类型
var form = document.getElementById("#test");   //得到表单中的数据
xhr.send(serialize(form));   //表单中的数据序列化后发送给服务器

实例

下面看一个完整的栗子:

html代码段

<inputtype="button"value="ajax提交"onclick="Ajax();">
<divid="resText"></div>

javascript代码段:

functionAjax(){
    var xhr;              //声明一个对象用来装入XMLHttpRequest
    if(window.ActiveXObject){          //IE5 IE6实例化XHR对象
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }else if (window.XMLHttpRequest){  //现代浏览器实例化XHR对象
        xhr = new XMLHttpRequest();
    }
    xhr.open("get","test.php",true);  //启动请求
    xhr.onreadystatechange=fun;       //触发回调函数
    xhr.send(null);                   //发送请求
    functionfun(){                  //定义回调函数
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                document.getElementById("resText").innerHTML=xhr.responseText;
            }
        }
    }
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

编程卓越之道

编程卓越之道

Hyde R / 韩东海 / 电子工业出版社 / 2006-4-1 / 49.80

各位程序员一定希望自己编写的代码是能让老板赞赏、满意的代码;是能让客户乐意掏钱购买的代码;是能让使用者顺利使用的代码;是能让同行欣赏赞誉的代码;是能让自己引以为豪的卓越代码。本书作者为希望能编写出卓越代码的人提供了自己积累的关于卓越编程的真知灼见。它弥补了计算机科学和工程课程中被忽略的一个部分——底层细节,而这正是构建卓越代码的基石。具体内容包括:计算机数据表示法,二进制数学运算与位运算,内存组织......一起来看看 《编程卓越之道》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具