AJAX

1、简介AJAX：（Asynchronnous JavaScript And XML）异步的JavaScript与XML。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

下面是Ajax 应用程序所用到的基本技术：①HTML 用于建立Web 表单并确定应用程序其他部分使用的字段。

②JavaScript 代码是运行Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。

③DHTML 或Dynamic HTML，用于动态更新表单。

我们将使用div、span 和其他动态HTML 元素来标记HTML。

④文档对象模型DOM 用于（通过JavaScript 代码）处理HTML 结构和（某些情况下）服务器返回的XML。

Ajax不是一种新技术，而是几种蓬勃发展的几种强大技术以新的方式组合而成，Ajax包括：基于XHTML和CSS标准的表示；使用Document Object Model进行动态的显示和交互；使用XML Request与服务器进行异步通讯；使用JavaScript绑定一切。

之前的是用户的请求直接向服务器提交。

我们看一个计算的例子。

Ajax的工作原理，Ajax的核心是JavaScript和XMLHttpRequest。

该对象在Internet Explorer5中首次引入，它是一种支持异步请求的技术。

简单的说：XmlHttpRequest使你可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性能。

下面是使用Ajax完成的功能：1、动态更新购物车的物品总数，无需用户单击Update并等待服务器发送整个页面。

2、提升站点的性能，这是通过减少从服务器下载的数据量来实现的。

例如：当更新购物车一个物品的数量时，会重新载入整个页面，这必须下载32K的数据，而使用Ajax计算新的总量，服务器只需要返回新的总量值，因此所需要的带宽仅仅为原来的百分之一。

3、消除了用户每次输入时的页面刷新。

例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。

用户的请求不再直接向服务器提交，而是使用XMLHttpRequest异步的向服务器发送，从而避免了重载页面。

特征：异步发送请求服务器响应的是数据不是页面内容。

2、XMLHttpRequest/ActiveXObjectXMLHttpRequest对象，现代浏览器均支持XMLHttpRequest对象（IE5 和IE6 使用ActiveXObject）。

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

这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

XMLHttpRequest是整个Ajax技术的灵魂。

Ajax异步发送请求，就是使用的XMLHttpRequest对象。

使用Ajax进行异步通信的过程：创建XMLHttpRequest对象。

通过XMLHttpRequest对象向服务器发送请求。

创建回调函数，见识服务器响应状态，在服务器响应完成后，启动回调函数。

回调函数动态更新HTML页面。

创建XMLHttpRequest对象，所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及Opera）都支持创建XMLHttpRequest对象的语法：Varxhr=new XMLHttpRequest();为了应对所有的现代浏览器，包括IE5 和IE6，请检查浏览器是否支持XMLHttpRequest对象。

如果支持，则创建XMLHttpRequest对象。

如果不支持，则创建ActiveXObject：var xmlHttpRequest;function createXMLHttpRequest() {if(window.XMLHttpRequest) {//火狐谷歌window.alert("支持XMLHttpRequest");xmlHttpRequest = new XMLHttpRequest();}else if (window.ActiveXObject) {//IE5 IE6try{xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");window.alert("不支持XMLHttpRequest,但是是Msxml2.XMLHTTP");} catch (e) {try{xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");window.alert("不支持XMLHttpRequest,但是是Microsoft.XMLHTTP");} catch (e) {}}}}XMLHttpRequest对象的方法，属性和事件方法：1.open(method,url),open方法的第一个参数指定HTTP方法或动作，这个字符不区分大小写，但是通常大家用大写字母匹配HTTP协议。

”GET”和”POST”方法得到广泛的支持。

”GET”用于常规请求，它适用于当URL完全指定请求资源，当请求对服务器没有任何副作用以及当服务器的响应式可缓存时。

“POST”方法常用于HTML表单。

它在请求主体中包含额外的数据（表单数据）且这些数据长存储在服务器上的数据库中(副作用)。

相同URL的重复POST 请求从服务器得到的响应可能不同，同时不应该缓存使用这个方法的请求。

2.setRequestHeader(“Content-Type”,” application/x-www-form-urlencoded”)在使用POST方法的时候需要“Content-Type”头指定请求主体的MIME类型。

3.send()发起HTTP请求，在使用GET请求的时候这个方法没有参数时候就写上参数null，在使用POST请求的时给这个方法传递参数属性：XMLHttpRequest的属性：onreadystatechange：该属性用于指定XMLHttpRequest对象状态发生改变时的事件处理函数。

XMLHttpRequest的对象有如下几种状态：0：XMLHttpRequest对象还没有完成初始化。

1：XMLHttpRequest对象开始发送请求。

2：XMLHttpRequest对象的请求发送完成。

3：XMLHttpRequest对象开始读取服务器的响应。

4：XMLHttpRequest对象读取服务器响应结束。

它的这几个状态可以通过下面的readyState属性读取。

每当XMLHttpRequest对象的readyState属性改变时，其onreadystatechange 属性指定的方法都会被触发。

readyState：获取XMLHttpRequest对象的处理状态responseText：获取服务器的响应文本，得到是文本形式。

responseXML：获取服务器响应的XML文档对象，得到的是xml。

status：服务器返回的状态码(数字)，服务器响应完成时，才有状态码。

statusText：服务器返回的状态文本信息，服务器响应完成时，才有状态信息。

服务器的响应完成后，依然不可以直接获取服务器响应。

因为服务器响应也有很多的情况。

响应状态码（status）:1xx：请求收到，继续处理100——客户必须继续发出请求101——客户要求服务器根据请求转换HTTP协议版本2xx：操作成功收到，分析、接受200——响应正常201——提示知道新文件的URL202——接受和处理、但处理未完成203——返回信息不确定或不完整204——请求收到，但返回信息为空205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件206——服务器已经完成了部分用户的GET请求3xx：完成此请求必须进一步处理300——请求的资源可在多处得到301——删除请求数据302——在其他地址发现了请求数据303——建议客户访问其他URL或访问方式304——客户端已经执行了GET，但文件未变化。

（资源没有任何修改）305——请求的资源必须从服务器指定的地址得到306——前一版本HTTP中使用的代码，现行版本中不再使用307——申明请求的资源临时性删除4xx：请求包含一个错误语法或不能完成400——错误请求，如语法错误401——请求授权失败402——保留有效ChargeTo头响应403——没有权限访问资源404——资源不存在405——用户在Request-Line字段定义的方法被禁止406——根据用户发送的Accept拖，请求资源不可访问407——类似401，用户必须首先在代理服务器上得到授权408——客户端没有在用户指定的饿时间内完成请求409——对当前资源状态，请求不能完成410——服务器上不再有此资源且无进一步的参考地址411——服务器拒绝用户定义的Content-Length属性请求412——一个或多个请求头字段在当前请求中错误413——请求的资源大于服务器允许的大小414——请求的资源URL长于服务器允许的长度415——请求资源不支持请求项目格式416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求5xx：服务器执行一个完全有效请求失败500——服务器产生内部错误501——服务器不支持请求的函数502——服务器暂时不可用，有时是为了防止发生系统过载503——服务器过载或暂停维修504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长505——服务器不支持或拒绝支请求头中指定的HTTP版本status状态码，statusText是状态文本。

服务器常见的状态码：200：服务器响应正常。

304：该资源在上次请求之后没有任何修改。

404：需要访问的资源不存在。

414：请求的URL太长。

500：服务器内部错误。

statusText是和status相对应的，比如：200->OK,500->Internal Server Error。

两种方法的模板GET方法示例：function add(){//初始化XMLHttpRequest对象createXMLHttpRequest();var add1 = document.getElementsByName("add1")[0].value;var add2 = document.getElementsByName("add2")[0].value;//打开与服务器的连接xmlHttpRequest.open("GET","/abc/servlet/ajax?type=add&add1="+add1+"&add2="+add2);//设置回调函数xmlHttpRequest.onreadystatechange=handleResult;xmlHttpRequest.send(null);}POST方法示例：function add(){//初始化XMLHttpRequest对象createXMLHttpRequest();var add1 = document.getElementsByName("add1")[0].value;var add2 = document.getElementsByName("add2")[0].value;//打开与服务器的连接xmlHttpRequest.open("POST","/abc/servlet/ajax");//设置请求头xmlHttpRequest.setRequestHeader("Content-Type"," application/x-www-form-urlencoded");//设置回调函数xmlHttpRequest.onreadystatechange=handleResult;xmlHttpRequest.send("type=add&add1="+add1+"&add2="+add2);}1）响应普通文本2）<%@page language="java"import="java.util.*"pageEncoding="UTF-8"%>3）<%4）S tring path2 = request.getContextPath();5）S tring basePath2 = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path2+"/"; 6）%>7）8）<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">9）<html>10）<head>11）<base href="<%=basePath2%>">12）<title>My JSP 'test.jsp' starting page</title>13）<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">14）<meta http-equiv="pragma"content="no-cache">15）<meta http-equiv="cache-control"content="no-cache">16）<meta http-equiv="expires"content="0">17）<meta http-equiv="keywords"content="keyword1,keyword2,keyword3">18）<meta http-equiv="description"content="This is my page">19）<!--20）<link rel="stylesheet" type="text/css" href="styles.css">21）-->22）</head>23）<body>24）<input type="text"name="add1"> +25）<input type="text"name="add2"/> =26）<input type="text"name="result"/><button onclick="add()">计算</button>27）<script type="text/javascript">28）var xmlHttpRequest;29）function createXMLHttpRequest() {30）if(window.XMLHttpRequest) {31）//火狐谷歌32）window.alert("支持XMLHttpRequest");33）xmlHttpRequest = new XMLHttpRequest();34）}else if (window.ActiveXObject) {35）//IE5 IE636）try {37）xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");38）window.alert("不支持XMLHttpRequest,但是是Msxml2.XMLHTTP");39）} catch (e) {40）try {41）xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");42）window.alert("不支持XMLHttpRequest,但是是Microsoft.XMLHTTP");43）} catch (e) {44）45）}46）}47）}48）}49）function add(){50）//初始化XMLHttpRequest对象51）createXMLHttpRequest();52）var add1 = document.getElementsByName("add1")[0].value;53）var add2 = document.getElementsByName("add2")[0].value;54）//打开与服务器的连接55）// xmlHttpRequest.open("GET","/abc/servlet/ajax?type=add&add1="+add1+"&add2="+add2);56）xmlHttpRequest.open("POST","/abc/servlet/ajax");57）//设置请求头58）xmlHttpRequest.setRequestHeader("Content-Type"," application/x-www-form-urlencoded"); 59）//设置回调函数60）xmlHttpRequest.onreadystatechange=handleResult;61）xmlHttpRequest.send("type=add&add1="+add1+"&add2="+add2);62）}63）function handleResult(){64）if(xmlHttpRequest.readyState == 4){65）if(xmlHttpRequest.status == 200){66）var result = xmlHttpRequest.responseText;67）document.getElementsByName("result")[0].value=result;68）}69）}70）}71）</script>72）</body>73）</html>74）ajax.java75）publicvoid doPost(HttpServletRequest request, HttpServletResponse response)76）throws ServletException, IOException {77）78）PrintWriter out = response.getWriter();79）String type = request.getParameter("type");80）if("add".equals(type)){81）String add1 = request.getParameter("add1");82）String add2 = request.getParameter("add2");83）int result = Integer.parseInt(add1) + Integer.parseInt(add2);84）response.setContentType("text/plain;charset=utf-8");85）out.println(result);86）out.flush();87）}88）2）响应XMLadd.javapublicvoid doPost(HttpServletRequest request, HttpServletResponseresponse)throws ServletException, IOException {response.setContentType("text/xml;charset=UTF-8");OutputStreamos=response.getOutputStream();String username=request.getParameter("username");if("张三".equals(username)){Document document = DocumentHelper.createDocument();Element student = document.addElement("student");student.addElement("name").setText("张三");student.addElement("age").setText("20");student.addElement("address").setText("浙江杭州");student.addElement("email").setText("zhangsan@");XMLWriter out = new XMLWriter(os);out.write(document);out.flush();out.close();System.out.println("输出");}else{Document document = DocumentHelper.createDocument();Element student = document.addElement("student");student.addElement("name").setText("李四");student.addElement("age").setText("30");student.addElement("address").setText("浙江杭州");student.addElement("email").setText("zhangsan@");XMLWriter out = new XMLWriter(os);out.write(document);out.flush();out.close();}}.jsp<body>请输入学生的姓名：<input type="text"name="username"id="username"/><input type="button"value="获取"onclick="getStudent();"/><div id="studentContent"></div><script type="text/javascript">var xmlHttpRequest;//创建XMLHttpRequest对象function createXMLHttpRequest() {if(window.XMLHttpRequest) {//火狐谷歌window.alert("支持XMLHttpRequest");xmlHttpRequest = new XMLHttpRequest();}else if (window.ActiveXObject) {//IE5 IE6try{xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {try{xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");} catch (e) {}}}}//发送请求function getStudent(){var username=document.getElementById("username").value;createXMLHttpRequest();xmlHttpRequest.open("GET","/aaa/servlet/add?type=add&username="+username,true);xmlHttpRequest.onreadystatechange=dealresult;xmlHttpRequest.send(null);}function dealresult(){if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){var xmlText=xmlHttpRequest.responseXML;alert(xmlText);var name=xmlText.getElementsByTagName("name")[0].innerHTML;var age = xmlText.getElementsByTagName("age")[0].innerHTML;var address=xmlText.getElementsByTagName("address")[0].innerHTML;var email = xmlText.getElementsByTagName("email")[0].innerHTML;document.getElementById("studentContent").innerHTML="name"+name+",age:"+age+",address:"+address+"email:"+email;}}</script></body>3)加法计算如果使用GET方法GET方法：使用POST方法：4）三级联动。