`

Ajax讲解与简单封装

    博客分类:
  • Ajax
阅读更多
为了复习下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);
	    }
    }
}();
0
2
分享到:
评论

相关推荐

    java中对ajax经典封装

    "ajax基本封装.htm"可能讲解了如何创建一个基础的Ajax请求。通常,这包括以下步骤: - 创建XMLHttpRequest对象实例。 - 使用open()方法设置请求类型(GET或POST)、URL以及是否异步执行。 - 发送请求,对于GET,...

    AJAX与Hibernate简单的结合(带讲解视频和项目源码)

    本资源提供了AJAX与Hibernate简单结合的实例教程,包括讲解视频和完整的项目源码,帮助开发者快速掌握这两项技术的整合技巧。 **一、AJAX基础** AJAX是一种在不重新加载整个网页的情况下,与服务器交换数据并更新...

    Ajax异步处理封装

    本文将深入讲解Ajax异步处理封装的相关知识。 一、Ajax原理 1. 创建XMLHttpRequest对象:在所有支持Ajax的浏览器中,首先我们需要创建一个XMLHttpRequest对象,它是Ajax的核心,负责与服务器进行通信。 2. 发起...

    jquery+ajax的视频讲解

    jQuery封装了AJAX操作,使得发起AJAX请求变得更加简单。例如,使用`$.ajax()`函数可以轻松地发送异步请求。基本用法如下: ```javascript $.ajax({ url: 'your_server_url', type: 'GET' || 'POST', dataType: '...

    简单的jquery ajax实例,简单明了特别实用

    jQuery是一个强大的JavaScript库,它封装了AJAX操作,使得使用AJAX更加简单和直观。本实例将深入讲解jQuery中的AJAX应用。 ### 一、jQuery AJAX基础 1. **$.ajax()函数** jQuery的核心AJAX方法是`$.ajax()`,它...

    ax封装.rar-ajax封装.txt

    此外,它可能还会讲解封装库的设计理念、优势以及与其他Ajax库的对比。 标签“书籍教程-网站开发”暗示了这个资源可能是一个教学材料,适用于学习网站开发的人员,尤其是对Ajax和前端交互感兴趣的开发者。通过学习...

    已封装Ajax操作类

    例如,一个简单的Ajax类可能会有如下的`get()`方法: ```javascript function Ajax() { this.request = new XMLHttpRequest(); } Ajax.prototype.get = function(url, callback) { this.request.open('GET', url...

    jquery+ajax例子

    在这里,我们将深入探讨基于jQuery的Ajax应用,以"jQuery+Ajax例子"为标题,结合项目描述和标签,我们来详细讲解这些技术。 1. **jQuery简介** jQuery由John Resig在2006年创建,旨在使JavaScript编程变得更加简单...

    ajax请求后台接口数据与返回值处理js的实例讲解

    本文将详细讲解如何使用JavaScript和jQuery库来发起AJAX请求,获取后台接口数据,并根据返回值进行处理。 知识点一:AJAX的基本概念 AJAX(Asynchronous JavaScript and XML)是异步JavaScript和XML的简称。它不是...

    ajax讲解PPT - bang网站下

    Prototype提供了一种优雅的方式来处理DOM元素,并且对Ajax功能进行了封装,使其在不同浏览器间兼容性更好。 例如,`$(‘comments’).addClassName(‘active’).show()`这一行代码,就是使用Prototype的方法,首先...

    ajax学习ppt(完整版)

    现代前端框架如React、Vue、Angular等都内置了对Ajax的封装,如React的fetch、axios,Vue的axios插件,Angular的HttpClient模块,使得开发者可以更方便地进行Ajax操作,同时这些框架还提供了状态管理、组件化、路由...

    ajax框架与struts框架的最佳结合讲解

    讲的是ajax框架与struts框架的结合,一提到ajax框架 对ajax有点了解的朋友,都会想到DWR这个有名的框架。AjaxAnyWhere是在不改变现有的模式下,添加ajax特效。对ajax封装得非常好。非常不错:) 极大的减少了代码量...

    Ajax高级程序设计pdf

    还会讨论如何创建第一个Ajax请求,理解异步与同步的区别,以及如何利用JavaScript处理响应。 **第二章:数据格式** Ajax传输的数据可以是XML、JSON、HTML等多种格式。本章将深入探讨XML和JSON,它们在Ajax中的角色...

    基于原生ajax与封装的ajax使用方法(详解)

    在本文中,我们将深入探讨如何使用原生Ajax与封装的Ajax方法进行Web开发,并通过Node.js环境模拟后端接口进行测试。首先,我们来看如何利用Node.js的Express框架搭建一个简单的模拟后端。 1. 安装Express中间件是...

    04课 json,xml,ajax封装.rar

    本课程“04课 - JSON,XML,AJAX封装”旨在深入探讨这三种技术,并讲解如何有效地将它们整合到你的网页开发项目中。 **JSON(JavaScript Object Notation)** 是一种轻量级的数据交换格式,易于人阅读和编写,同时...

    jquery Ajax 全局调用封装实例详解

    前言: 有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({…..}) 写重复的方法 和代码,冗余...第二步:开发Ajax封装类,已测试通过,可以直接调用,直接贴代码,讲解就省了 /***

    Web 2.0动态网站开发 : Ajax技术与应用光盘

    在《Web 2.0动态网站开发 : Ajax技术与应用》这本书中,作者阮征可能会详细讲解如何使用Ajax技术实现以下功能: - **异步数据交换**:Ajax使得网页可以在后台与服务器进行通信,用户无需等待页面刷新即可看到更新。...

    react中的ajax封装实例详解

    本实例主要讲解如何在React中封装一个基于XMLHttpRequest的Ajax请求方法。以下是具体的实现步骤和相关知识点: 1. **设置默认参数**:首先定义一个`defaults`对象,包含所有可能的请求参数,如请求方式(`method`)...

    ajax框架与struts框架的最佳结合讲解源码.rar

    Action类处理用户的请求,ActionForm用于封装请求参数,ActionServlet协调请求与响应。 **3. 结合使用的优势** Ajax与Struts的结合可以实现页面局部刷新,减少用户等待时间,提高交互性。例如,用户提交表单时,...

    ajax实现简单城市三级联动菜单

    下面我们将详细讲解如何利用AJAX、JSP和Java来构建这样的功能。 首先,我们需要理解AJAX的核心原理。AJAX允许前端页面在不刷新整个页面的情况下,通过JavaScript异步与服务器交换数据并局部更新页面内容。在城市三...

Global site tag (gtag.js) - Google Analytics