ajax的优缺点有哪些(sqlserver的基本操作)

我是专注于软件开发和IT教育的孙鑫老师,出版过多本计算机图书,包括《JavaWeb开发详解》、《VC++深入详解》、《Struts2深入详解》、《Servlet/JSP深入详解》、《XML、XMLSchema、XSLT2.0和XQuery开发详解》、《HTML5、CSS和JavaScript开发》、《Vue.js从入门到实战》、《Java无难事》、《Vue.js3.0从入门到实战》。 喜欢我的文章…

我是专注于软件开发和IT教育的孙鑫老师,出版过多本计算机图书,包括《Java Web开发详解》、《VC++深入详解》、《Struts 2深入详解》、《Servlet/JSP深入详解》、《XML、XML Schema、XSLT 2.0和XQuery开发详解》、《HTML5、CSS和JavaScript开发》、《Vue.js从入门到实战》、《Java无难事》、《Vue.js 3.0从入门到实战》。

喜欢我的文章欢迎关注、转发、评论、点赞和收藏,我会经常与大家分享IT技术、编程语言的文章和教学视频。目前已发布完整的《Vue.js从入门到实战》和《Java无难事》教学视频,正在发布《Vue.js 3.0从入门到实战》一书教学视频。


现在学习前端开发的同学很多,很多JavaScript库与框架都封装了Ajax调用,但初学者对于Ajax的原理并不了解,导致在学习时一知半解,为此,我将之前写的书中的章节发布出来,帮助大家更好的理解和学习前端开发。

Ajax简介

Ajax的全称是Asynchronous JavaScript and XML,即异步JavaScript和XML。Ajax最早是由Adaptive Path公司的咨询顾问Jesse James Garrett在2005年2月提出的,Garrett专门写了一篇文章来讲述Ajax这一新的Web开发方式,文章名为“Ajax: A New Approach to Web Applications”,有兴趣的读者可以从下面的网址处看到这篇文章:

http://www.adaptivepath.com/ideas/essays/archives/000385.php

Garrett将XHTML和CSS、DOM、XML和XSLT、XMLHttpRequest和JavaScript多种技术的综合应用称之为Ajax,换句话说,Ajax并不是一种技术,它是多种技术的组合,包括:

— 使用XHTML和CSS来呈现数据;

— 使用DOM实现动态显示和交互;

— 使用XML和XSLT实现数据交换与操作;

— 使用XMLHttpRequest实现异步数据的发送与接收;

— 使用JavaScript将XHTML、DOM、XML和XMLHttpRequest绑定。

实际上,早在Garrett发表文章为Ajax命名之前,Ajax就已经在一些Web系统中应用了。Google是最早采用Ajax的公司之一,它在一些产品中使用了Ajax,如Google Suggest、Google Maps和Gmail等,也正是因为Ajax在这些产品中的成功应用,极大地鼓舞了开发人员在Web系统中使用Ajax的信心,使得Ajax得以迅速推广。

Ajax为用户带来了更好的用户体验。在传统的Web应用程序中,用户向服务器发送一个请求,然后等待,服务器对用户请求进行处理,然后返回一个响应。这是一种同步的处理方式,如果服务器处理请求的时间比较长,那么用户将不得不长时间的等待,“呆呆地”盯着空白的浏览器窗口。☺

传统的Web应用程序模型和它的同步传输机制分别如图1和图2所示。ajax的优缺点有哪些(sqlserver的基本操作)

图1 传统的Web应用程序模型ajax的优缺点有哪些(sqlserver的基本操作)

图2 传统的Web应用程序模型(同步传输)

长久以来,我们对这种Web交互模式已经习以为常,以为Web就是这么用的,直到Ajax的出现。

与传统的Web应用程序不同,Ajax采用了异步交互机制,从而避免了用户请求-等待-响应这种交互方式的缺点。Ajax应用程序在用户和服务器之间引入了一个中间层——Ajax引擎,它是用JavaScript编写的,在一个隐藏的框架中运行。Ajax引擎负责呈现用户界面,以及代表用户与服务器进行交互。Ajax引擎允许用户与服务器端的Web程序之间的交互异步地进行,这样用户就无须“呆呆地”看着空白的浏览器窗口和一个沙漏图标,等待服务器返回响应页面了。使用了Ajax的Web应用程序的模型和它的异步传输机制分别如图3和图4所示。 ajax的优缺点有哪些(sqlserver的基本操作)

图3 Ajax Web应用程序模型ajax的优缺点有哪些(sqlserver的基本操作)

图4 Ajax Web应用程序模型(异步传输)

DOM

DOM是Document Object Model的缩写,即文档对象模型,它是W3C组织推荐的处理XML的标准接口。2004年4月7日,W3C组织发布了DOM Level3 Core的推荐标准,有关DOM的技术报告可以在
http://www.w3.org/DOM/DOMTR.html上查看。

DOM是独立于程序设计语言的,W3C组织以IDL(Interface Definition Language,接口定义语言)的形式定义了DOM中的接口。某种程序语言要实现DOM,需要将DOM接口转换为本语言中的适当结构,为了保证不同语言的不同DOM之间实现广泛的兼容,W3C组织在DOM规范的附录部分提供了Java和ECMAScript这两种语言的语言绑定。

DOM中的核心概念就是节点。DOM在分析HTML和XML文档时,将组成HTML和XML文档的各个部分(元素、属性、文本、注释等)映射为一个对象,这个对象就叫做节点。在内存中,这些节点形成一棵文档树。整棵树是一个节点,树中的每一个节点也是一棵树(子树),可以说,DOM就是对这棵树的一个对象描述,我们通过访问树中的节点来存取HTML和XML文档的内容。

使用DOM,我们不但可以访问HTML的各个节点,还可以编辑HTML文档的内容,从而创建动态的页面。

例如,HTML页面有一个表格,代码如例1所示。

例1 显示图书信息的表格

<table>
<tbody id=\"booksBody\">
    <tr>
      <th>书名</th>
      <th>作者</th>
    </tr>
    <tr>
      <td>《Java无难事》</td>
      <td>孙鑫</td>
    </tr>
  </tbody>
</table>

如果我们想要为这个表格动态添加一行图书信息,在JavaScript中可以使用DOM来实现这一功能,代码如例2所示。

例2 使用DOM动态提交图书信息

<script type=\"text/javascript\">
  	var row = document.createElement(\"tr\");			
	cell = createCellWithText(\"《Vue.js 3.0从入门到精通》\");
	
	//将单元格作为子节点添加到<tr>元素中
	row.appendChild(cell);
				
	cell = createCellWithText(\"孙鑫\");
	row.appendChild(cell);
	
	//将新创建的表行添加到<tbody>元素中
	document.getElementById(\"booksBody\").appendChild(row);
	
	//定义创建单元格的函数
	function createCellWithText(text)	{
		var cell = document.createElement(\"td\");
		var textNode = document.createTextNode(text);
		cell.appendChild(textNode);
		return cell;
	}
</script>

提示: DOM和JavaScript并不是一回事。DOM是面向HTML和XML的API,为文档提供了结构化的表示。JavaScript是一种语言,它提供了DOM的实现。在JavaScript中,除了可以使用DOM API,还可以使用其他的API。

XMLHttpRequest

XMLHttpRequest对象是整个Ajax技术的核心,正是因为有了这个对象,异步交互才有可能实现。XMLHttpRequest最早是在IE 5中以ActiveX组件的形式实现的,它可以直接向服务器传输数据,而不需要由页面来发送请求,同时它还可以直接从服务器接收响应,而不需要刷新页面。

IE把XMLHttpRequest实现为一个ActiveX对象,其他的浏览器(Firefox、Safari和Opera)则把它实现为一个本地的JavaScript对象。因此,为了兼容不同的浏览器,你需要按照例3所示的方式来创建XMLHttpRequest对象。

例3 兼容不同浏览器的XMLHttpRequest对象的创建方式

var xmlHttp;
function createXMLHttpRequest() {
	if(window.ActiveXObject)	{
		xmlHttp = new ActiveXObject(\"Microsoft.XMLHTTP\");
	}
	else if(window.XMLHttpRequest)	{
		xmlHttp = new XMLHttpRequest();
	}
}

XMLHttpRequest的方法如表1所示。

表1 XMLHttpRequest的方法

方 法 说 明
abort() 终止当前请求
getAllResponseHeaders() 以字符串的形式返回所有的响应报头
getResponseHeader(String header) 获取指定的响应报头的值
open(String method,String uri) 建立对服务器的调用。method参数可以是GET、POST或HEAD。url参数可以是相对URL或绝对URL。该方法还有三个可选的参数
send(content) 向服务器发送请求
setRequestHeader(String header, String value) 设置请求的报头信息。在设置任何报头之前,必须先调用open()方法

XMLHttpRequest的属性如表2所示。

表2 XMLHttpRequest的属性

属 性 说 明
onreadystatechange 每个状态改变时都会触发这个事件处理器,通常是一个JavaScript函数
readyState 请求的状态。有5个可能的取值:0(未初始化)、1(请求已建立,但还没有发送)、2(请求已发送,但还没有收到响应)、3(正在接收,通常响应中的部分数据已经可用,但还没有完全接收完毕)、4(响应已完成)
responseText 服务器的响应,表示为文本内容
responseXML 服务器的响应,表示为XML。这个对象可以解析为一个DOM对象
status 服务器的HTTP状态代码,如200对应OK,404对应Not Found等。仅当readyState值为3或4时,该属性才可用
statusText HTTP状态代码的描述文本,如OK、Not Found等。仅当readyState值为3或4时,该属性才可用
statusText HTTP状态代码的描述文本,如OK、Not Found等。仅当readyState值为3或4时,该属性才可用

我们看一个使用XMLHttpRequest发送请求和接收响应的例子,代码如例4所示。

例4 使用XMLHttpRequest发送请求和接收响应的例子

var xmlHttp;

if(window.ActiveXObject) {
	xmlHttp = new ActiveXObject(\"Microsoft.XMLHTTP\");
}
else if(window.XMLHttpRequest) {
	xmlHttp = new XMLHttpRequest();
}

var email = document.getElementById(\"email\");
var url = validate?email=\" + escape(email.value);

xmlHttp.open(\"GET\", url);
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.send(null);

//处理服务器响应的回调函数
function handleStateChange() {
	//判断响应是否完成
	if(xmlHttp.readyState == 4) {
		//判断响应是否成功
		if(xmlHttp.status == 200) {
			alert(xmlHttp.responseText);
		}
	}
}

XMLHttpRequest Level2

XMLHttpRequest API使得Ajax技术的实现成为了可能,作为XMLHttpRequest的改进版, XMLHttpRequest Level 2在功能上有了很大的改进,主要包括:

  • 跨源XMLHttpRequest
  • 进度事件(Progress event)

跨源HTTP请求包括一个Origin头部,它为服务器提供HTTP请求的源信息。头部由浏览器保护,不能被应用程序代码更改。

使用跨源XMLHttpRequest可以构建基于非同源服务的Web应用程序。

1、新增事件

事件名称 说明
loadstart 当请求开始
progress 在发送和加载数据期间
abort 请求已被终止。如调用abort()方法
error 当请求已失败
load 当请求已成功完成
timeout 在请求完成之前指定的超时值到了
loadend 当请求已完成(无论成功或失败)

2、检测浏览器对XMLHttpRequest2的支持

var xhr = new XMLHttpRequest() ;
if (typeof xhr.withCredentials === undefined){
	// 您的浏览器不支持跨源的XMLHttpRequest
}

3、示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset=\"GBK\">
		<title>跨源上传</title>
		
		<script>
      var xmlHttp;
      function checkSupport(){
      	xmlHttp = window.XDomainRequest ? new XDomainRequest : new XMLHttpRequest;
      	if(typeof xmlHttp.withCredentials == undefined)	{
      		alert(\"您的浏览器不支持跨源的XMLHttpReqeust\");
      	}
      }

      checkSupport();

      function upload(){
      	xmlHttp.onprogress = function(e){
      		var radio = e.loaded / e.total;
      		displayProgress(radio + \"% 上传\");
      	}
      	
      	xmlHttp.onload = function(e){
      		displayProgress(xmlHttp.responseText);
      	}
      	
      	xmlHttp.onerror = function(e){
      		displayProgress(\"出错了\");
      	}
      	var targetLocation = \"http://example.com:8080/upload.jsp\";
      	var data = document.getElementById(\"data\").value;
      	xmlHttp.open(\"POST\", targetLocation, true);
      	xmlHttp.send(data);
      }

      function displayProgress(info){
      	document.getElementById(\"state\").innerHTML = info;
      }
		</script>
	</head>
	<body>
		<p>
			上传消息:
			<input type=\"text\" id=\"data\" placeholder=\"输入要上传的数据\">
			<button id=\"sendButton\" onclick=\"upload();\">发送数据</button>
		</p>
		<p>
			状态:<span id=\"state\">准备</span>
		</p>
	</body>
</html>

本文来自投稿,不代表来拓客立场,如若转载,请注明出处:https://www.laituoke.com/ltk/5824.html