AJAX入门3-AJAX开发步骤

前端之家收集整理的这篇文章主要介绍了AJAX入门3-AJAX开发步骤前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

AJAX开发框架

AJAX实质上也是遵循B/S模式,所以这个框架基本的流程是:

对象 初始化
发送请求
服务器接收
服务器返回
客户端接收
修改客户端页面内容

只不过这个过程是异步的。

A、初始化XMLHttpRequest对象

 1 function   createXHR(){
 2    var xhr;
 3    try{    //Firefox,Opera,Safari,。。。
 4            xhr=new XMLHttpRequest();
 5     }catch (e){
 6                  try{//IE
 7                       xhr=new ActiveXObject("Microsoft.XMLHTTP");
 8                  }catch (e){}  
 9                  }
10     }
11    return xhr;
12  }

B、指定响应处理函数

指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就可以了.比如:

XMLHttpReq.onreadystatechange = processResponse;

注意:这个函数名称不加括号,不指定参数。也可以用Javascript函数直接量方式定义响应函数。比如:

XMLHttpReq.onreadystatechange = function() { };

// 处理返回信息的函数

function processResponse() {

  }

C、发出HTTP请求

向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法

http_request.open('GET','http://www.example.org/some.file',true);

http_request.send(null)

按照顺序,open调用完毕之后要调用send方法。send的参数如果是以Post方式发出的话,可以是任何想传给服务器的内容
注意 : 如果要传文件或者 Post 内容给服务器,必须先调用 setRequestHeader 方法修改 MIME 类别。如下:
http_request.setRequestHeader ( Content- Type , application /x-www-form- urlencoded );

这时资料则以查询字符串的形式列出,作为send的参数,例如:

name=value&anothername=othervalue&so=on

D、处理服务器返回的信息

处理响应处理函数都应该做什么。

 1 首先,它要检查XMLHttpRequest对象的readyState值,判断请求目前的状态。参照前文的属性表可以知道,readyState值为4的时候,代表服务器已经传回所有的信息,可以开始处理信息并更新页面内容了。如下:
 2 if (http_request.readyState == 4) {
 3     // 信息已经返回,可以开始处理
 4 } else {
 5     // 信息还没有返回,等待
 6 }
 7   服务器返回信息后,还需要判断返回的HTTP状态码,确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中,200代表页面正常。
 8 if (http_request.status == 200) {
 9       // 页面正常,可以开始处理信息
10 } else {
11     // 页面有问题
12 }

E、动态显示信息

XMLHttpRequest对成功返回的信息有两种处理方式: @H_219_301@
responseText:将传回的信息当字符串使用;
responseXML:将传回的信息当XML文档使用,可以用DOM处理。

数据格式提要

在服务器端 AJAX 是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以。

从服务器端接收数据的时候,那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下 3 种格式返回数据:

•HTML
•XML
•JSON

解析 HTML

HTML 由一些普通文本组成。如果服务器通过 XMLHttpRequest发送 HTML, 文本将存储在 responseText属性中。

插入 HTML 代码最简单的方法是更新这个元素的 innerHTML属性

HTML 小结

优点:
•从服务器端发送的 HTML 代码在浏览器端不需要用 JavaScript 进行解析。
•HTML 的可读性好。
•HTML 代码块与 innerHTML 属性搭配,效率高。
缺点:
•若需要通过 AJAX 更新一篇文档的多个部分,HTML 不合适
•innerHTML 并非 DOM 标准。

XML小结

优点:
•XML 是一种通用的数据格式。
•不必把数据强加到已定义好的格式中,而是要为数据自定义合适的标记
•利用 DOM 可以完全掌控文档。
缺点:
如果文档来自于服务器,就必须得保证文档含有正确的首部信息。若文档类型不正确,那么 responseXML 的值将是空的。
•当浏览器接收到长的 XML 文件后, DOM 解析可能会很复杂

JSON 小结

优点:
•作为一种数据传输格式,JSON 与 XML 很相似,但是它更加灵巧。
•JSON 不需要从服务器端发送含有特定内容类型的首部信息。
缺点:
•语法过于严谨
代码不易读

HTML/XML/JSON对比小结

1、若应用程序不需要与其他应用程序共享数据的时候,使用 HTML 片段来返回数据时最简单的
2、如果数据需要重用,JSON 文件是个不错的选择,其在性能文件大小方面有优势
3、当远程应用程序未知时,XML 文档是首选,因为 XML 是 web 服务领域的 “世界语”

猜你在找的Ajax相关文章