欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-29 10:10:06
...
本篇文章主要讲述了关于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的工作流程介绍(附实例)的详细内容,更多请关注其它相关文章!

相关标签: Ajax