Web前端基础——Ajax（一）

学习之前举一个简单的小栗子，让我们简单了解一下Ajax的应用与好处。一般网站都会有自己的数据库，用来单独存储用户的个人信息，平时我们在注册账号的时候会遇到信息输入的页面，假设第一个输入信息是用户名的填写，一般当你填写这第一个的时候旁边就会有提醒，提醒你的用户名是否合法，是否被占用等等。

这里就用到了Ajax，而不是像老版的Web设计，需要把所有的注册信息填写完毕，再提交到数据库去验证，再返回给客户提示。Ajax提高了效率，减少了运行成本，提升了用户体验。

一、Ajax 简介

== 传统的Web应用模式和 ajax 方式的比较 //上面

== AJAX应用的特点

1. 不刷新整个页面，在页面内与服务器通信。

2. 使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。

3. 应用仅由少量页面组成。大部分交互在页面之内完成，不需要切换整个页面。

==AJAX的好处

--减轻服务器的负担。AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

--无刷新更新页面，减少用户心理和实际的等待时间。

--可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。

--可以调用外部数据。

--基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

--进一步促进页面呈现和数据的分离

==AJAX基础—概念

Asynchronous JavaScript and XML（异步JavaScript和XML）是一种创建交互网页应用的网页开发技术。所谓同步,即客户端脚本在请求服务器后,客户端脚本等待服务器返回响应之后再继续执行。而异步则是,客户端脚本在请求服务器之后,服务器还没有返回相应,客户端就可以执行下面的脚本.这就是异步。异步也表现就是在不打扰用户正常浏览的情况下,在后台与服务器交互。

==AJAX技术组成

XMLHttpRequest：进行异步数据读取；

Javascript：Javascript一直被定位为客户端的脚本语言，应用最多的地方是表单数据的校验。

现在，可以通过Javascript操作XMLHttpRequest，来跟数据库打交道。

DOM： DOM（Document Object Model）是提供给HTML和XML使用的一组API，提供了文件的表述结构，并可以利用它改变其中的内容和可见物。脚本语言通过DOM才可以跟页面进行交互。

XML：通过XML（Extensible Markup Language），可以规范的定义结构化数据，是网上传输的数据和文档符合统一的标准。

DHTML 或 Dynamic HTML：用于动态更新表单。我们将使用 div、span 和其他动态 HTML 元素来标记 HTML。

二、XMLHttpRequest

XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象是开发者的梦想，因为您能够：

1.在不重新加载页面的情况下更新网页

2.在页面已加载后从服务器请求数据

3.在页面已加载后从服务器接收数据

4.在后台向服务器发送数据

5.所有现代的浏览器都支持 XMLHttpRequest 对象 (IE6 除外)

三、创建 XMLHttpRequest 对象

所有现代浏览器 (IE7+、Firefox、Chrome(谷歌)、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象。

var xmlhttp=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

四、通过 XMLHttpRequest 对象实现 ajax 效果

var xmlhttp; ????$(function(){ ???$("button").click(function(){ ???????if(window.XMLHttpRequest){ ?//如果浏览器支持这个对象 ???????????xmlhttp=new XMLHttpRequest(); ????????????????????????????}else if(window.ActiveXObject){ ?//如果是ie6 ???????????xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); ??????????????????????????????} ??????????????????????????????????????????if(xmlhttp){ ?//成功 ??????????????xmlhttp.onreadystateChange =myReadyStateChange; ???//它指向一个回调函数 ??????????????xmlhttp.open("get","UserServlet",true); //true表示使用异步方式 ??????????????/* ??????????????//如果要改用post方式,要改用下面的方式 ??????????????//xmlHttp.open("post", "UserServlet", true); ??????????????//xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //这句不加,后台取不到 userName ??????????????//xmlHttp.send("userName=zhangsan&password=aaa"); //如果有多个参数，可以用&号分开 ???????????????*/ ??????????????xmlhttp.send(null); ??????????????????????????????????????}else{ ??????????????????????????????????alert("XMLHttpRequest对象创建失败"); ??????????????????????????????} ?????????????????????????????????????????????????????????}); ????????????????????}); ????????????????????//回调函数 在什么时候被调用 在 ?xmlhttp 的 readyState 发生变化的时候被调用 ????????????????????function myReadyStateChange(){ ????????????????????//alert(xmlhttp.readyState); ????????????????????if(xmlhttp.readyState==4) ?//等于四,表示服务端返回了 ????????????????????????{ ????????????????????????if(xmlhttp.status ==200 ) ??//xmlhttp.status 代表服务端返回的状态码 ?????????????????????????{ ??????????????????????????$("#A1").html(xmlhttp.status); //状态码 ??????????????????????????$("#A2").html( xmlhttp.statusText); ???//状态信息 ??????????????????????????$("#A3").html(xmlhttp.responseText); //响应的消息 ????????????????????????????????} ????????????????????????} ????????????????????} ???????????????????<button>ajax方式得到数据</button><br /> ???????????????????Status(状态码): <span id="A1"></span> ?????????<br /> ???????????????????Status text(状态说明): <span id="A2"></span> <br /> ???????????????????Response(响应的数据): <span id="A3"></span> ???

 服务端 UserServlet

response.getWriter().print("this is server data"); ?//尽量别加ln

备注:（前面我在学习网络上韩顺平的视频中，有记过这里的笔记，这里重温一下）

响应状态码: 表示服务器对请求的各种不同处理结果,是一个三位的10制数。

可归为 5 类

100段的 :成功接收请求,要求客户端继续提交下一次请求才能完成整个处理

200段的 :成功接收请求,并处理完成

300段的 :为完成请求,客户端需进一步细化请求,例如请求的资源已经移动到一个新地址

400段的 :客户端请求有错误

--400 Bad Request  //客户端请求有语法错误，不能被服务器所理解

--401 Unauthorized //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用

--403 Forbidden  //服务器收到请求，但是拒绝提供服务

--404 找不到

500段的 :服务器端出现错误 

--500 Internal Server Error //内部服务器错误,服务端的CGI,ASP,JSP等程序发生错误

--503 Server Unavailable  //服务不可用,服务器由于当前负载过大,一段时间后可能恢复正常

注释：onreadystatechange 是一个事件句柄。它的值 (state_Change) 是一个函数的名称，当 XMLHttpRequest 对象的状态发生改变时，会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。

仅在状态为 4 时，我们才执行代码。

5 个状态中每一个都有一个相关联的非正式的名称，下表列出了状态、名称和含义：

readyState 的值不会递减，除非当一个请求在处理过程中的时候调用了 abort() 或 open() 方法。每次这个属性的值增加的时候，都会触发 onreadystatechange 事件句柄。

responseText

--目前为止为服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。

--如果响应包含了为响应体指定字符编码的头部，就使用该编码。否则，假定使用 Unicode UTF-8。

status

--由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。

statusText （Not Found、OK）

--这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，

--当状态为 404 的时候它是 "Not Found"。和 status 属性一样，当 readyState 小于 3 的时候读取这一属性会导致一个异常。 

之前我在网上看到一些特别有趣的解释相应状态码的图片，分享给大家：

Web前端基础——Ajax（一）

原文地址：http://www.cnblogs.com/1693977889zz/p/7642875.html