当前位置:Gxlcms > JavaScript > AJAX的工作流程有哪些?ajax的工作流程介绍(附实例)

AJAX的工作流程有哪些?ajax的工作流程介绍(附实例)

时间:2021-07-01 10:21:17 帮助过:5人阅读

本篇文章主要讲述了关于ajax的工作流程情况,还有ajax原理,一些常用的属性介绍,现在让我们一起来看这篇文章吧

AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML)。

是一种创建交互式网页应用的网页开发技术。它:
使用XHTML+CSS来表示信息;
使用JavaScript操作DOM(Document Object Model)进行动态显示及交互;
使用XML和XSLT进行数据交换及相关操作;
使用XMLHttpRequest对象与Web服务器进行异步数据交换;
使用JavaScript将所有的东西绑定在一起。
AJAX原理:
AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。它的核心是JavaScript对象XmlHttpRequest,这个对象使我们可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。AJAX采用异步交互过程,它在用户与服务器之间引入一个中间媒介,从而消除了网络交互过程中的处理—等待—处理—等待缺点。用户的浏览器在执行任务时即装载了AJAX引擎,AJAX引擎用JavaScript语言编写,通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。AJAX引擎允许用户与应用软件之间的交互过程异步进行,独立于用户与网络服务器间的交流。现在,可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作,内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行,使用AJAX,可以为JSP、开发人员、终端用户带来可见的便捷。
既然Ajax的核心是XmlHttpRequest对象那就必须得介绍一下:
常用属性:
Onreadystatechange 指定当readyState属性改变时的事件处理函数。只写
readyState 表示Ajax请求的当前状态。只读它的值用数字代表。
0 代表未初始化。 还没有调用 open 方法
1 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕
每次 readyState 值的改变,都会触发 readystatechange 事件。
responseText 将响应信息作为字符串返回.只读。它是一个HTML,XML或普通文本,这取决于服务器发送的内容。当 readyState 属性值变成 4 时, responseText 属性才可用,表明 Ajax 请求已经结束。
responseXML 将响应信息格式化为Xml Document对象并返回,只读,只有服务器发送了带有正确首部信息的数据时, responseXML 属性才是可用的。 MIME 类型必须为 text/xml
status 返回当前请求的http状态码.只读
常用状态码及其含义:
404 没找到页面(not found)
403 禁止访问(forbidden)
500 内部服务器出错(internal service error)
200 一切正常(ok)
304 没有被修改(not modified)(服务器返回304状态,表示源文件没有被修改 )
在 XMLHttpRequest 对象中,服务器发送的状态码都保存在 status 属性里。通过把这个值和 200 或 304 比较,可以确保服务器是否已发送了一个成功的响应
(想看更多就到PHP中文网AJAX开发手册栏目中学习)

常用方法:
Open 创建一个新的http请求,并指定此请求的方法、URL以及验证信息
Send 发送请求到http服务器并接收回应 如果请求为get不会发送任何数据
setRequestHeader 单独指定请求的某个http头
AJAX工作流程:
1 对象初始化

function   createXmlHttpRequest(){
   var xmlHttp;
   try{    //Firefox, Opera 8.0+, Safari
           xmlHttp=new XMLHttpRequest();
    }catch (e){
           try{    //Internet Explorer
                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }catch (e){
                  try{
                   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }catch (e){}  
           }
    }
   return xmlHttp;
 }

2 发送请求
调用XMLHttpRequest对象的open和send方法,按照顺序,open调用完毕之后才调用send方法。

xmlHttp.open("get","../servlet/RegisterServlet?timeStamp="+new Date().getTime(),true)
xmlHttp.send(null);

send的参数如果是以Post方式发出的话,可以是任何想传给服务器的内容,但必须先调用setRequestHeader方法,修改MIME类别:
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
3 服务器接收处理数据并返回,指定事件处理程序处理返回信息
每次 readyState 属性的改变都会触发 readystatechange 事件只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就可以了

 xmlHttp.onreadystatechange = function(){            if (xmlHttp.readystate == 4) { 
  if (xmlHttp.status == 200 || xmlHttp.status == 304) {//XMLHttpRequest对成功返回的信息有两种处理方式://responseText:
  将传回的信息当字符串使用;//responseXML:将传回的信息当XML文档使用,可以用DOM处理。 
        }            }        };

4 客户端接收
5 修改客户端页面内容

本篇文章到这就结束了(想看更多就到PHP中文网AJAX使用手册栏目中学习),有问题的可以在下方留言提问。

以上就是AJAX的工作流程有哪些?ajax的工作流程介绍(附实例)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行