ajax的优缺点有哪些（sqlserver的基本操作）
我是专注于软件开发和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所示。
图1 传统的web应用程序模型
图2 传统的web应用程序模型（同步传输）
长久以来，我们对这种web交互模式已经习以为常，以为web就是这么用的，直到ajax的出现。
与传统的web应用程序不同，ajax采用了异步交互机制，从而避免了用户请求-等待-响应这种交互方式的缺点。ajax应用程序在用户和服务器之间引入了一个中间层——ajax引擎，它是用javascript编写的，在一个隐藏的框架中运行。ajax引擎负责呈现用户界面，以及代表用户与服务器进行交互。ajax引擎允许用户与服务器端的web程序之间的交互异步地进行，这样用户就无须“呆呆地”看着空白的浏览器窗口和一个沙漏图标，等待服务器返回响应页面了。使用了ajax的web应用程序的模型和它的异步传输机制分别如图3和图4所示。
图3 ajax web应用程序模型
图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>