Ajax学习
一、AJAX是什么
异步刷新技术，在当前页面响应不同的请求内容。
二、AJAX的原理
AJAX的原理可以理解为：JS函数发了一个请求，回复也必须由这个函数来处理，所以应当在当前页面显示，不应该刷新页面（因为一旦刷新页面这个函数就没有了，也不能处理响应的响应）；所以ajax可以理解为本页面局部响应请求，不必每次响应所有页面。
这样做的好处：有时候我们需要将本次的响应结果与前面的响应结果显示在同一个页面展现给客户，如果刷新页面，之前的响应结果需要在加载到本次的响应结果之中，这样会造成资源浪费。
三、AJAX的使用流程
1、创建ajax引擎对象
2、复写onreadystatement函数（此函数会根据Ajax状态码变化调用）
3、发送请求open 与 send函数来执行
四、Ajax的状态码
| readyState值 | 含义 |
| 0 | 表示XMLHttpRequest已建立，但还未初始化，这时尚未调用open方法 |
| 1 | 表示open方法已经调用，但未调用send方法（已创建，未发送） |
| 2 | 表示send方法已经调用，其他数据未知 |
| 3 | 表示请求已经成功发送，正在接受数据 |
| 4 | 表示数据已经成功接收 |
五、AJAX的异步与同步
ajax.open(method,urL,async) 第三个参数默认为true 表示为异步，false为同步，异步表示执行ajax的时候不影响页面的其他信息的执行，比如上面的alert("哈哈")会继续执行不必等待ajax执行结束再执行。
六、AJAX请求
Ajax的请求有两种，对其get 与post方法，下面是对应代码
1 <script type="text/javascript"> 2 function ajaxReq(){ 3 /*获取用户请求数据*/ 4 var uname=document.getElementById("uname").value; 5 var data="name="+uname; 6 /* 省略中间的创建对象与处理部分*/ 7 8 /*get方式:请求实体拼接在URL后面*/ 9 ajax.open("get","ajax?"+data); 10 ajax.send(null); 11 12 /*post方式：请求实体需要单独的发送*/ 13 ajax.open("post", "ajax"); 14 /* 下面这句话必须添加否则数据格式认为是字符串不是键值对，得不到数据*/ 15 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 16 ajax.send("name=张三&pwd=123"); 17 } 18 </script>
七、Ajax的响应数据类型
一般的响应类型有三种，第一种是字符串类型，第二种是键值对，第三种是json格式；主要学习的是json，在其他章节有对json做具体介绍，这里主要介绍一下如何将一个后台数据拼接成一个js对象。
1、普通字符串类型
class User{ private String name; private String pwd; ... }
后台获得user数据之后通过下面语句在前台生成响应的对象
resp.getWriter().write("var obj={};obj.name='zhangsan';obj.pwd='123';");
前端通过eval函数来执行后端语句
eval(ajax.responseText);// 利用js的语法规则执行后台返回的语句 alert(obj.name);
但这样会造成代码阅读困难，js中无法知道obj的来源，此方法不可取。
resp.getWriter().write("{name='zhangsan',pwd='123';}");// 这里可以吧变量拼进去
eval("var obj=" + ajax.responseText);// 利用js的语法规则执行后台返回的语句
alert(obj.name);
2、json方式
json的大致使用方式，将对象拼接成固定的格式，传到js,获得对应的数据，使用注解会更加简单。
resp.getWriter().write(new Gson.toJson(u));// u是一个对象，也可以是其他 eval("var u=" + ajax.responseText);// 利用js的语法规则执行后台返回的语句 alert(u.name);// 这样就可以js中直接获取对象的每个字段信息
3、xml方式
resp.setContentType("text/xml;chatset=utf-8");// 设置返回格式为xml，之前设置都是html
resp.getWriter().write("<user><uid>1</uid><uname>zhangsan</uname><uprice>2.2</uprice></user>");/
var doc=ajax.responseText;// 利用js的语法规则执行后台返回的语句
doc.getElementsByTagName("name")[0].innerHTML; // 这样就可以通过XML的方式获得数据
但这种方式还是很复杂，拼接数据繁琐，通过jsp的方式就不需要拼接（因为jsp最后会转化成getWriter.write输出）
下面是xml.jsp 文件，与js中的代码，这种方式与上面的方式完全一致
<%@ page language="java" contentType="text/xml; charset=utf-8"%>
<user>
<name>李四</name>
<pwd>123</pwd>
</user>
ajax.open("get","xml.jsp",true);
var doc=ajax.responseText;// 利用js的语法规则执行后台返回的语句
doc.getElementsByTagName("name")[0].innerHTML; // 这样就可以通过XML的方式获得数据
三种方法中json是最常用的方式，也是主流的方式，xml用来配置，json用来数据交互。
八、Ajax的封装
jquery中已经对其进行了封装下面是封装的示例：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"/jquery/test1.txt",async:false}); $("#myDiv").html(htmlobj.responseText); }); }); </script> </head> <body> <div id="myDiv"><h2>通过 AJAX 改变文本</h2></div> <button id="b01" type="button">改变内容</button> </body> </html>
九、代码示例
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 7 <title>Insert title here</title> 8 <!-- 声明js代码域 --> 9 <!-- 10 Ajax学习： 11 1、ajax的概念 12 局部刷新技术。不是一门新技术，是多种技术的组合。是浏览器端的技术。 13 2、ajax的作用 14 实现在当前结果页中显示其他请求的响应内容 15 3、ajax的使用 16 ajax的基本流程 17 //创建ajax引擎对象 18 //复写onreadystatement函数 19 //判断ajax状态码 20 //判断响应状态码 21 //获取响应内容(响应内容的格式) 22 //普通字符串：responseText 23 //json(重点)：responseText 24 其实就是讲述数据按照json的格式拼接好的字符串，方便使用eval方法 25 将接受的字符串数据直接转换为js的对象 26 27 json格式： 28 var 对象名={ 29 属性名:属性值, 30 属性名:属性值, 31 …… 32 } 33 34 //XML数据：responseXML.返回document对象 35 通过document对象将数据从xml中获取出来 36 //处理响应内容(js操作文档结构) 37 //发送请求 38 //get请求 39 get的请求实体拼接在URL后面，？隔开，键值对 40 ajax.open("get","url"); 41 ajax.send(null); 42 //post请求 43 有单独的请求实体 44 ajax.open("post", "url"); 45 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 46 ajax.send("name=张三&pwd=123"); 47 ajax的状态码 48 ajax状态码: 49 readyState：0,1,2,3,4 50 4: 表示响应内容被成功接收 51 响应状态码: 52 status 53 200:表示一切OK 54 404:资源未找到 55 500：内部服务器错误 56 ajax的异步和同步 57 ajax.open(method,urL,async) 58 async：设置同步代码执行还是异步代码执行 59 true代表异步，默认是异步 60 false代表同步 61 --> 62 <script type="text/javascript"> 63 function getData(){ 64 //创建ajax引擎对象(通过函数来创建) 65 var ajax; 66 if(window.XMLHttpRequest){//火狐 67 ajax=new XMLHttpRequest(); 68 }else if(window.ActiveXObject){//IE 69 ajax=new ActiveXObject("Msxml2.XMLHTTP"); 70 } 71 72 //复写onreadystatement函数(这里是重写；当readystate的值一旦修改就触发一次，一共会触发4次) 73 ajax.onreadystatechange=function() 74 //判断Ajax状态吗 75 if(ajax.readyState==4){ 76 //判断响应状态吗 77 if(ajax.status==200){ 78 //获取响应内容，后端返回来的数据 79 var result=ajax.responseText; 80 //处理响应内容 81 //获取元素对象 82 var showdiv=document.getElementById("showdiv"); 83 showdiv.innerHTML=result; 84 }else if(ajax.status==404){ 85 //获取元素对象 86 var showdiv=document.getElementById("showdiv"); 87 showdiv.innerHTML="请求资源不存在"; 88 }else if(ajax.status==500){ 89 //获取元素对象 90 var showdiv=document.getElementById("showdiv"); 91 showdiv.innerHTML="服务器繁忙"; 92 } 93 }else{ 94 //获取元素对象 就是当请求数据没来之前，请求框中显示在刷新的图片 95 var showdiv=document.getElementById("showdiv"); 96 showdiv.innerHTML="<img src='img/2.gif' width='200px' height='100px'/>"; 97 } 98 } 99 //发送请求 100 ajax.open("get","ajax",true);// false 101 ajax.send(null); // post请求内容不在请求头中，所以才会有send，可以参考get 和post请求的区别。 102 alert("哈哈"); 103 } 104 </script> 105 <style type="text/css"> 106 #showdiv{ 107 border:solid 1px; 108 width:200px; 109 height:100px; 110 } 111 </style> 112 </head> 113 <body> 114 <h3>欢迎登录</h3> 115 <hr> 116 <input type="button" value="测试 " onclick="getData()"/> 117 <div id="showdiv"></div> 118 </body> 119 </html>
你是一只猪
