为了复习下Ajax基础,抽空写了本篇博客。哈哈。
要运用Ajax,必须非常熟悉一个 JavaScript 对象,即XMLHttpRequest(简称XHR)。这个小小的对象已经在几种浏览器存在一段时间了,它是Ajax的核心。首先先看下如何创建跨浏览器的XMLHttpRequest对象:
//创建XMLHttpRequest对象
function createXMLHttpRequest(){
var request = false;
try{
request = new XMLHttpRequest();//Mozilla,Safari,Opera,IE7等
}catch(e){
try{
request = new ActiveXObject('Msxml2.XMLHTTP');//IE较新版本
}catch(e1){
try{
request = new ActiveXObject('Microsoft.XMLHTTP');//IE较老版本
}catch(e2){
request = false;
}
}
}
return request;
}
注意不要被这些花括号迷住了眼睛,下面分别介绍每一步:
- 创建一个新变量 request 并赋值 false。使用 false 作为判断条件,表示还没有创建 XMLHttpRequest 对象
- 增加try/catch块:尝试创建 XMLHttpRequest 对象,如果全部失败,则保证request的值仍然为false。所以检查request是否仍然为false(如果一切顺利就不会是false)。
该对象的几个常用的方法和属性:
open():建立到服务器的新请求
send():向服务器发送请求
readyState:提供当前 HTML 的就绪状态
status:服务器响应的状态代码
responseText:服务器返回的请求响应文本
下面将对Ajax的使用作详细阐述:
建立到服务器的请求:
准备好XMLHttpRequest对象后,就可以建立到服务器的请求了。结合一个实例来构造url:
var url = "getEmpInfo.do?empId=" + escape(empId);
注:escape()方法用于转义不能用明文正确发送的任意字符。比如,空格将被转换成字符 %20,从而能够在url中传递这些字符。
然后建立请求:
request.open("GET",url,true);
使用 XMLHttpRequest 对象的 open() 方法来建立请求。该方法有五个参数:
参数request-type:发送请求的类型。典型的值是GET或POST,但也可以发送HEAD请求。当为POST时,需要设置:
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
参数url:要连接的 URL
参数asynch:如果希望使用异步连接则为true,否则为false。该参数是可选的,默认为true
参数username:如果需要身份验证,则可以在此指定用户名。该可选参数没有默认值
参数password:如果需要身份验证,则可以在此指定口令。该可选参数没有默认值
通常使用其中的前三个参数。事实上,即使需要异步连接,通常指定第三个参数为true,这样更容易理解。
使用XMLHttpRequest发送请求:
一旦请求用open()配置好之后,就可以用send()方法发送请求了,send()方法只有一个参数,就是要发送的内容。例如:
var data = "idx="+idx;
request.send(data);
但是如果url本身已经传递了参数,或者该请求不需要参数,即这里不需要用send()方法传递数据,只要传递null作为该方法的参数即可:
request.send(null);
设置回调函数:
如果请求是异步请求,请求发出后JavaScript方法不会等待服务器处理完成,因此代码将继续执行。(如果是同步请求,则此时浏览器将等待服务器返回结果。结果返回后,才继续执行代码)。
当服务器完成请求之后,需要指定该如何处理响应。XMLHttpRequest对象的onreadystatechange属性允许指定一个回调函数反向调用web页面中的代码。也就是说,服务器完成请求之后,会查看XMLHttpRequest对象,特别是onreadystatechange属性。然后调用该属性指定的方法。之所以称之为回调,是因为是由服务器向网页发起调用,无论网页本身在做什么。这就是称之为“异步”的原因:用户在一层操作网页,而在另一层上服务器响应请求并触发onreadystatechange属性指定的回调方法。回调函数设置如下:
var request = createXMLHttpRequest();
request.open("GET",url,true);
request.onreadystatechange = updatePage;//设置回调函数,在send()方法前设置
request.send(null);
需要特别注意的是该属性在代码中设置的位置,它是在调用send()方法之前设置的。发送请求之前必须设置该属性,这样服务器在回答完成请求之后才能够查看该属性!还要特别注意的是,这里的updatePage是个函数名称,不能写成updatePage()函数调用的形式!这表示将updatePage()函数运行的返回结果赋值给onreadystatechange属性。体会JavaScript中函数也是对象的特征。
处理服务器响应:
请求发送后,用户可以继续使用浏览器(同时服务器在处理请求)。而当服务器完成了请求处理,服务器查看onreadystatechange属性确定要调用的方法。除此之外,可以将应用程序看作其他应用程序一样,无论是否异步。换句话说,不一定要采取特殊的动作编写响应服务器的方法,只需要改变表单或其它的页面结构,让用户访问另一个url或者做响应服务器需要的任何事情。
响应函数(仅弹出简单的警告提示信息):
function updatePage(){
alert("server is done!");
}
如果运行以上代码,根据浏览器的不同,会看到两次、三次、甚至四次警告提示信息。原因是没有考虑到HTTP的就绪状态。这是请求/响应循环中的一个重要的部分。
HTTP就绪状态(readyState)表示请求的状态或情形。它用于确定该请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成。它还可以帮助确定读取服务器提供的响应文本或数据是否安全。在Ajax应用程序中需要了解五种就绪状态:
0:请求没有发出(在调用 open() 之前)
1:请求已经建立但还没有发出(调用 send() 之前)
2:请求已经发出正在处理之中(这里通常可以从响应得到内容头部)
3:请求已经处理,响应中通常有部分数据可用,但是服务器还没有完成响应
4:响应已完成,可以访问服务器响应并使用它
与大多数跨浏览器问题一样,这些就绪状态的使用也不尽一致。实际上很少出现就绪状态从0到1、2、3再到4,一些浏览器从不报告0或1而直接从2开始,然后是3和4,其他浏览器则报告所有的状态。还有一些则多次报告就绪状态1。
对于Ajax编程,需要直接处理的惟一状态就是就绪状态4,它表示服务器响应已经完成,可以安全的使用响应数据了。基于此,回调函数作如下调整:
function updatePage(){
if(request.readyState==4){
alert("server is done!");
}
}
修改后就可以保证服务器的处理已经完成,现在就会看到只显示一次警告提示信息了。
以上代码看起来似乎不错,但是还有一个问题 —— 如果服务器响应请求并完成了处理但是报告了一个错误怎么办?服务器端代码应该是由Ajax、JSP、普通HTML或其他类型的代码调用的,但只能使用传统的Web专用方法报告信息。而在 Web 世界中,HTTP状态码(status)可以处理请求中可能发生的各种问题,比如:
输入了错误的URL请求将得到404错误码,它表示该页面不存在;
403和401错误码表示所访问的数据受到保护或者禁止访问;
无论哪种情况,这些错误码都是从完成的响应中得到的。换句话说,服务器执行了请求(即HTTP就绪状态是4)但是没有返回客户机预期的数据。因此除了就绪状态外,还需要检查HTTP状态。我们期望的状态码是200,它表示一切顺利。如果就绪状态是4而且状态码是200,就可以处理服务器的数据了,而且这些数据应该就是要求的数据(而不是错误或者其他有问题的信息)。
所以在回调函数中增加HTTP状态(status)检查:
function updatePage(){
if(request.readyState==4){
if(request.status==200){
alert("server is done!");
}
}
}
现在可以确保请求已经处理完成(通过就绪状态),服务器给出了正常的响应(通过状态码),最后可以处理服务器返回的数据了。返回的数据(文本形式)保存在XMLHttpRequest对象的responseText属性中。(如果服务器选择使用XML响应,则也可以使用在responseXML属性获取)。
小结:
1.Ajax应用的开发确实有些繁琐,实际上,现在有很多成熟稳定的Ajax工具葙封装了以上诸多细节,使得Ajax编程更加容易。但是如果不知道应用程序在做什么,就很难发现其中的问题。
2.XMLHttpRequest对象是Ajax应用的核心,必须非常熟悉
3.Ajax应用的基本流程:
创建XMLHttpRequest对象
设置要连接的URL
建立到服务器的连接
设置服务器在完成后要运行的回调函数
发送请求
附:我做的Ajax简单封装:
/**
* Ajax工具类
*/
var Ajax=function(){
//创建XMLHttpRequest对象
function createXMLHttpRequest(){
var request = false;
try{
request = new XMLHttpRequest();//Mozilla,Safari,Opera,IE7等
}catch(e){
try{
request = new ActiveXObject('Msxml2.XMLHTTP');//IE较新版本
}catch(e1){
try{
request = new ActiveXObject('Microsoft.XMLHTTP');//IE较老版本
}catch(e2){
request = false;
}
}
}
return request;
}
//jQuery源码中的parseJSON方法
function parseJSON(data){
if ( typeof data !== "string" || !data ) {
return null;
}
// Make sure leading/trailing whitespace is removed (IE can't handle it)
// data = jQuery.trim( data ); 屏蔽掉
// Make sure the incoming data is actual JSON
// Logic borrowed from http://json.org/json2.js
//if ( /^[\],:{}\s]*$/.test(data.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, "@")
// .replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, "]")
// .replace(/(?:^|:|,)(?:\s*\[)+/g, "")) ) {
// Try to use the native JSON parser first
return window.JSON && window.JSON.parse ? window.JSON.parse(data) : (new Function("return " + data))();
// }
}
/**
* 执行Ajax请求
* url: 请求url
* data: 请求参数
* type: 返回数据格式(json或者文本型,默认文本型)
* async: 是否异步,异步(true),同步(false),默认true
* method: 请求方式 GET or POST(默认)
* timeout 请求超时时间(默认0)(只有在异步时设置才有效)
* onSuccess: 请求成功后响应函数
* onTimeout: 请求超时后响应函数
* onFailure: 请求失败后响应函数
*/
function start(params){
var request = createXMLHttpRequest();
if(!request){
alert("不能创建XMLHttpRequest对象");
return false;
}
var url = params.url;
var data = params.data || null;
var type = params.type || "";//这个运算经常用来判断一个变量是否已定义,如果没有定义就给他一个初始值
var async = params.async !== false;
var method = (params.method || 'POST').toUpperCase();
var timeout = params.timeout || 0;
//alert("==url="+url+"\tdata="+data+"\ttype="+type+"\tasync="+async+"\tmethod="+method+"\ttimeout="+timeout);
var timer;
if(async){//异步时,可以检测超时
if(timeout>0){
timer = setTimeout(function(){
request.abort();//调用abort后request.status为0
},timeout);
}
}
request.open(method,url,async);//建立到服务器的请求
if(method==="POST"){
//因为是post请求,故需要设置requestHeader.(get请求就不用设置了)
//表示客户端提交给服务器文本内容的编码方式 是URL编码,即除了标准字符外,每字节以双字节16进制前加个“%”表示
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
request.onreadystatechange = function(){
//alert("request.readyState="+request.readyState);
if(request.readyState==4){
//alert("request.status="+request.status);
if(request.status==200){
if(type=="json"){
var text = request.responseText.replace(/\r\n/g,"");//替换返回的换行符"/n"
//params.onSuccess(eval('('+(ajax_responseText)+')'));//eval()函数可计算某个字符串,并执行其中的的 js代码
params.onSuccess(parseJSON(text)); //效率比json_sans_eval.js中的jsonParse方法高效!!!
}else if(type=="xml"){
params.onSuccess(request.responseXML);
}else{
params.onSuccess(request.responseText);
}
}else{
if(request.status==0){
if(params.onTimeout){
params.onTimeout();
}else{
alert('timeout');
}
}else{
if(params.onFailure){
params.onFailure();
}else{
alert('fail');
}
}
}
if(async){
clearTimeout(timer);
}
}
};
request.send(data);
}
return{
execute:function(params){
start(params);
}
}
}();
分享到:
相关推荐
【作品名称】:基于servlet+jsp+mysql实现的影视管理系统【课程设计】 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】: 基于servlet+jsp+mysql实现的影视管理系统【课程设计】 基于servlet+jsp+mysql实现的影视管理系统【课程设计】 Java Web课程设计,基于servlet+jsp+ajax+mysql做的影视管理系统 运行环境: Tomcat 9.0 JDK 1.8 MySQL 8.0 后台管理账号密码均为:root,项目依赖:lib 目录 【资源声明】:本资源作为“参考资料”而不是“定制需求”,代码只能作为参考,不能完全复制照搬。需要有一定的基础看懂代码,自行调试代码并解决报错,能自行添加功能修改代码。
kernel-5.15-ky10-x86.tar.gz
【作品名称】:基于AT89C51 单片机为核心器件,程序设计采用C 语言,Keil 软件编译程序,配以相关外围接口电路,实现了方波、锯齿波、正弦波、三角波、梯形波五种特定波形的产生【论文+源码】 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】:本设计中的波形发生器系统要求基于51单片机,因此选用以AT89C51单片机作为整个系统的控制核心,应用其强大的接口功能,构成整个波形发生器的硬件系统。使用C 语言对单片机编程可产生相应的正弦波,方波,三角波,锯齿波梯形波波形信号。在程序运行时,当接收到按键信息后,需要输出某种波形时,调用相应的中断服务子程序和波形发生程序,经电路的数/模转换器和运算放大器处理后,从信号发生器的输出端口输出即可得到要求的波形。 当需要改变频率时只需要改变单片机的波形发生程序中的递增或者递减变量即可。 【资源声明】:本资源作为“参考资料”而不是“定制需求”,代码只能作为参考,不能完全复制照搬。需要有一定的基础看懂代码,自行调试代码并解决报错,能自行添加功能修改代码。
基于java的法律咨询系统设计与实现.docx
适用于元营销 API 的 Python SDK适用于 Python 的 Facebook Business SDK 介绍Facebook Business SDK是一站式服务,可帮助我们的合作伙伴更好地服务于他们的业务。合作伙伴正在使用多个 Facebook API 来满足其客户的需求。采用所有这些 API 并在各个平台上保持最新状态可能非常耗时,而且最终会造成高昂的成本。为此,Facebook 开发了 Business SDK,将其许多 API 捆绑到一个 SDK 中,以简化实施和维护。Business SDK 是 Marketing API SDK 的升级版,其中包括 Marketing API 以及来自不同平台(如 Pages、Business Manager、Instagram 等)的许多 Facebook API。快速入门商业SDK入门指南Python 目前是我们第三方开发人员最常用的语言。是一个 Python 包,它提供了您的 Python 应用程序与Business SDK 内的 Facebook APIfacebook_business之间的
数学建模培训资料 数学建模实战题目真题答案解析解题过程&论文报告 公交车调度的运作数学模型 共12页.pdf
smart-http 是一款可编程的 Http 应用微内核,方便用户根据自身需求进行 Server 或 Client 的应用开发。支持GET、POST的 HTTP 请求。提供了 URL 路由组件,可以快速搭建一套静态服务器。支持部分 RFC2612 规范,后续会逐渐完善。支持 Https 协议,由 smart-socket 为其赋能。具备文件上传的能力。支持 websocket、Cookie支持 Server、Client 开发
新闻资讯系统 微信小程序+SpringBoot毕业设计 源码+数据库+论文+启动教程 项目启动教程:https://www.bilibili.com/video/BV1oiBpYcEBp
高校师生工作室-JAVA-基于微信小程序的高校师生工作室管理系统的设计与实现
基于java的常见小儿疾病中医护理系统设计与实现.docx
本教程播放列表涵盖了 Python 中的数据结构和算法。每个教程都有数据结构或算法背后的理论、BIG O 复杂性分析和可供练习的练习。使用 Python 的数据结构和算法本教程涵盖了 Python 中的数据结构和算法。每个教程都包含数据结构或算法背后的理论、BIG O 复杂度分析以及可供练习的练习。要观看视频,您可以访问播放列表https://www.youtube.com/playlist?list=PLeo1K3hjS3uu_n_a__MI_KktGTLYopZ12订阅 codebasics youtube 频道https://www.youtube.com/c/codebasics
数学建模学习资料 蒙特卡罗方法课件教程 第2章.随机数 共29页.pptx
python实现基于CNN网络的新闻数据集文本分类源码+数据集(Python期末大作业),个人大三学期的期末大作业、经导师指导并认可通过的高分大作业设计项目,评审分98分。主要针对计算机相关专业的正在做大作业的学生和需要项目实战练习的学习者,可作为课程设计、期末大作业。 python实现基于CNN网络的新闻数据集文本分类源码+数据集(Python期末大作业)python实现基于CNN网络的新闻数据集文本分类源码+数据集(Python期末大作业),个人大三学期的期末大作业、经导师指导并认可通过的高分大作业设计项目,评审分98分。主要针对计算机相关专业的正在做大作业的学生和需要项目实战练习的学习者,可作为课程设计、期末大作业。python实现基于CNN网络的新闻数据集文本分类源码+数据集(Python期末大作业),个人大三学期的期末大作业、经导师指导并认可通过的高分大作业设计项目,评审分98分。主要针对计算机相关专业的正在做大作业的学生和需要项目实战练习的学习者,可作为课程设计、期末大作业。python实现基于CNN网络的新闻数据集文本分类源码+数据集(Python期末大作业),个人大
中小学知识产权教育试点学校申报表.doc
基于django的音乐推荐系统.zip
在建工程涉及专项行动情况检查表.docx
本项目是一个基于Python技术的学生管理系统,采用Django框架进行开发,旨在为计算机相关专业的学生提供一个实践性强、功能全面的管理系统,以帮助他们完成毕业设计或进行项目实战练习。 系统实现了对学生信息、课程信息、成绩、考勤等多方面的管理功能。学生信息管理包括学生基本信息的增删改查;课程信息管理允许管理员设置课程信息,包括课程名称、授课老师、学分等;成绩管理功能使学生和教师能够录入、查看和修改成绩;考勤管理则方便教师记录学生的出勤情况。 该项目采用B/S架构,前端使用HTML、CSS、JavaScript等技术,后端使用Python语言和Django框架,数据库采用MySQL。Django框架提供了强大的后台管理功能,使得系统管理更加便捷。 通过开发这个项目,学生不仅能提升自己的编程能力,还能学习到如何构建一个实际应用的系统,对于即将步入职场的学生来说,具有很高的实用价值。
适用于 Python 的 Splunk 软件开发工具包参考文档适用于 Python 的 Splunk Enterprise 软件开发工具包版本 2.1.0适用于 Python 的 Splunk Enterprise 软件开发套件 (SDK) 包含库代码,旨在使开发人员能够使用 Splunk 平台构建应用程序。Splunk 平台是一个搜索引擎和分析环境,它使用分布式 map-reduce 架构来有效地索引、搜索和处理大型时变数据集。Splunk 平台深受系统管理员的欢迎,用于聚合和监控 IT 机器数据、安全性、合规性以及各种其他场景,这些场景都需要有效地从大量时间序列数据中索引、搜索、分析和生成实时通知。Splunk 开发者平台使开发人员能够利用 Splunk 平台所使用的相同技术来构建令人兴奋的新应用程序。开始使用 Python 版 Splunk SDK开始使用 Python 版 Splunk Enterprise SDKSplunk Enterprise SDK for Python 包含库代码,其示例位于splunk-app-examples存储库
分布式事务练习
家庭财务管理系统 微信小程序+SSM毕业设计 源码+数据库+论文+启动教程 项目启动教程:https://www.bilibili.com/video/BV1BfB2YYEnS