Ajax(2)--Ajax核心工作机制 你忘记了吗?
在了解了XMLHttpRequest对象相关的属性和方法之后,我们再明确一下发送和接收XMLHttpRequest请求的基本程序框架。
通过前面的案例分析可以清楚地看到:Ajax实质上是遵循Request/Server模式来进行工作的,所以这个框架基本的流程包括下面几个具体的步骤。
(1)对象初始化
(2)发送请求
(3)服务器接收请求并进行处理
(4)服务器返回响应数据
(5)客户端接收
(6)依据响应数据修改客户端页面内容
注意整个过程中的通信交互方式是异步的。下面依据具体的处理过程再次强调Ajax的核心工作机制。
1.初始化对象并发出XMLHttpRequest请求
为了让Javascript可以向服务器发送HTTP请求,必须使用XMLHttpRequest对象。使用之前,要先将XMLHttpRequest对象实例化。之前说过,各个浏览器对这个实例化过程实现不同。IE浏览器以ActiveX控件的形式提供,而Mozilla浏览器等浏览器则直接以XMLHttpRequest类的形式提供。为了让编写的程序能够跨浏览器运行,可以这样写:
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
有些版本的Mozilla浏览器处理服务器未包含XML mime-type头部信息的返回内容时会出错。因此,要确保返回的内容包含text/xml信息。
XMLHttpReq = new XMLHttpRequest();
XMLHttpReq.overrideMimeType("text/xml");
2.指定响应处理函数
接下来要指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就可以了。比如:
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
需要注意的是,这个函数名称不加括号,不指定参数。也可以用Javascript即时定义函数的方式定义响应函数。比如:
XMLHttpReq.onreadystatechange = function() { };
3.发出HTTP请求
指定响应处理函数之后,就可以向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法。
XMLHttpReq.open("GET", url, true);
XMLHttpReq.send(null); // 发送请求
open的第一个参数是HTTP请求的方法,为GET、POST或者Head。open的第二个参数是目标URL。基于安全考虑,这个URL只能是同网域的,否则会提示“没有权限”的错误。这个URL可以是任何的URL,包括需要服务器解释执行的页面,不仅仅是静态页面。目标URL处理请求XMLHttpRequest请求则跟处理普通的HTTP请求一样,比如JSP可以用request.getParameter(“”)或者request.getAttribute(“”)来取得URL参数值。
open的第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为true,则不会继续执行,直到服务器返回信息。默认为true。
按照顺序,open调用完毕之后要调用send方法。send的参数如果是以POST方式发出的话,可以是任何想传给服务器的内容。
4.处理服务器返回的信息
在第二步我们已经指定了响应处理函数,这一步是用来描述响应处理函数具体应该做的事情。
首先,它要检查XMLHttpRequest对象的readyState值,判断请求目前的状态。参照前面的属性表可以知道,readyState值为4的时候,代表服务器已经传回所有的信息,可以开始处理信息并更新页面内容了。例如:
if (XMLHttpReq.readyState == 4) {
// 信息已经返回,可以开始处理
} else {
// 信息还没有返回,等待
}
服务器返回信息后,还需要判断返回的HTTP状态码,确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中,200代表页面正常,基本程序结构如下:
if (XMLHttpReq.status == 200) {
// 页面正常,可以开始处理信息
} else {
// 页面有问题
}
XMLHttpRequest对成功返回的信息有两种处理方式:一种为 responseText:即将传回的信息当字符串使用;另一种为responseXML:即将传回的信息当XML文档使用,可以用DOM处理。本书前面的实例采用的是第二种方式。
总结上面的步骤,我们就可以整理出一个初步的Ajax开发框架,供以后调用。在本程序框架中,将服务器返回的信息用window.alert以字符串的形式显示出来:
<script language="javascript">
var XMLHttpReq = false;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
//发送请求函数
function sendRequest(url) {
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
XMLHttpReq.send(null); // 发送请求
}
// 处理返回信息函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息
var res=XMLHttpReq.responseXML.getElementsByTagName("res")[0].first Child.data;
window.alert(res);
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
</script>
在本章的最后,我们再通过一个实例进一步帮助读者体会Ajax技术完整的工作过程及设计方式。该实例实现的是网页中常见的提示信息显示的效果。在传统的实现方式中,往往需要提前从数据库中获取大量的信息,或者需要页面全部刷新才能够实现。
转载于:https://www.cnblogs.com/zhengxi/archive/2010/06/10/1755284.html
Ajax(2)--Ajax核心工作机制 你忘记了吗?相关推荐
- 【Java从0到架构师】Zookeeper - 安装、核心工作机制、基本命令
分布式基石 Zookeeper 框架全面剖析 Zookeeper 安装.配置.运行 Zookeeper 的核心工作机制 特性 数据结构.节点 基本操作命令 服务器的启动和监控 客户端连接 创建节点 查 ...
- Zookeeper核心工作机制(zookeeper特性、zookeeper数据结构、节点类型)
10.1 zookeeper特性 1.Zookeeper:一个leader,多个follower组成的集群. 2.全局数据一致:每个server保存一份相同的数据副本,client无论连接到哪个ser ...
- ajax优缺点及原理,Ajax实例解析,异步机制以及优缺点
Ajax实例解析 1.Ajax读取一个xml文档并进行解析的实例: 服务器端(PHP): 客户端: var ajax = new XMLHttpRequest(); function sendMess ...
- ajax最核心的技术,Ajax技术的核心以及方法属性
这次给大家带来Ajax技术的核心以及方法属性,使用Ajax技术核心以及方法属性的注意事项有哪些,下面就是实战案例,一起来看一下. 一.什么是Ajax Ajax英文全称为" Asynchr J ...
- ajax里面可以alert吗,除非我使用alert(),否则Ajax请求不会工作
我已经花了好几个小时才能让它发挥作用,但它并没有让步;我有以下代码: var text = ""; function getText(c1, c2) { url = "h ...
- thinkphp5如何使用ajax(变化的核心,也就是ajax作用的核心是什么)
thinkphp5如何使用ajax(变化的核心,也就是ajax作用的核心是什么) 一.总结 一句话总结:ajax的核心在于页面的不刷新而获取后台数据,所以后台的操作还是一样(获取参数,返回数据),只是 ...
- 探秘HDFS —— 发展历史、核心概念、架构、工作机制 (上)| 博文精选
戳蓝字"CSDN云计算"关注我们哦! 作者 | Mr-Bruce 转自 | CSDN博客 责编 | 阿秃 几周前,笔者做了一个与HDFS有关的技术分享,以知识普及为目的,主要分享 ...
- ajax定时轮询机制图解,通过Ajax调用的轮询机制
我需要添加轮询机制来通过我的网页调用Web服务.为此,我尝试在javascript页面内使用ajax呼叫.我对ajax和javascript很新.我写了下面的代码.通过Ajax调用的轮询机制 func ...
- 【CyberSecurityLearning 52】Web架构安全分析(web工作机制、HTTP协议)
目录 Web 工作机制 网页.网站 Web容器 静态页面 中间件服务器 数据库的出现 建立一个网站 HTTP 协议概述 概述 特点 URL HTTP 报文分析 HTTP 工作模式 REQUEST 请求 ...
最新文章
- 入职一周了,发现自己来了假阿里?
- HDLBits 系列(20)移位寄存器(逻辑移位、算术移位、循环移位)
- 分库分表就能无限扩容吗,解释得太好了!
- Android华容道之一步一步实现-4-图像块移动算法
- 【ABAP实例】SAP调用RESTful API测试用例
- MyBatis多参数传递之Map方式示例——MyBatis学习笔记之十三
- Ubuntu 16.04工具栏靠下设置
- docker 批量删除容器和镜像
- 麻省理工首次支持华为;看来自美国的这个人如何评价任正非
- LQR 离散与连续问题
- R语言学习笔记(二)处理函数与基本图形绘制
- window7下使用vagrant打造lamp开发环境(二)
- 开发移动网页应用的一些技术指导
- mysql6.2中文补丁_2.6. 在NetWare中安装MySQL - MySQL 中文手册
- 团队管理,领导的“无为”就是最大“有为”
- [万字长文] 人脸识别初步调研报告
- 新手如何选择 视频配音软件(文字转语音)
- C 语言究竟能干什么
- 我的spring入门级理解
- mysql设置固定ip地址访问_mysql设置指定ip访问,用户权限相关操作